/* 这是注释,选择body这个元素*/
/* 声明body 元素 的字体颜色（属性）为白色#fff（对应的值） */
body{
    color:#fff;
}

/* 选择id="nav" 的元素 */
/* id选择器以 # 标识 */
#nav{
    color:#fff;
}

/* 选择 class="nav" 的元素 */
/* class选择器 以 . 标识 */
/* class可以同时存在与多个不同的HTML元素,所以可以选择多个元素*/ 
.nav{
    color:#fff;
}

* {属性：属性值}

/* 有title属性的所有元素 */
[title]
{
    color:#fff;
}
<p title>xxx 这里是白色色字体</p>

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

p>span{
	color:#fff;
}
<p><span>xxx这里是白色色字体</span></p>

<style>
/* 选择div的兄弟p */
div~p{
  color:#fff;
}
</style>
<div>
  <p>text</p><!--文字是非不是白色的-->
  <div>text</div>
  <p>text</p><!--文字是白色的-->
</div>
/*所谓兄弟就是类似上面这样的在同一个父dom下,并列的div和p*/

/* 可以同时将上面的选择器组合使用 */
/* 选择id为nav class为nav 的元素 */
#nav .nav{
    ...
}
/* 选择...下的p元素 */
#nav .nav>p{
    
}
等等

/* 将一组共同的属性，选择元素写到一起设置,逗号分隔 */
h1,h2,h3,h4,h5,h6{
	color:#000;
}

/* 可以单独指定也可以一起指定属性值 */
/*便于代码可读高一点就分开指定*/

/*背景*/
background:(颜色，背景图，水平或平铺，大小)
background-image:(图像)
background-origin:(指定在哪里放置图像)
(content-box，padding-box，border-box)
background-clip:(指定背景的绘制区域)
background-size:(指定大小)

/*渐变属性*/
linear-gradient:(添加浏览器前缀使用，线性渐变)
线性渐变 - 从上到下（默认情况下）
指定top，left，等指定方向
radial-gradient:(..径向渐变)

/*文本*/
color:颜色
text-align:对齐方式（justify 两端对齐）
text-decoration:文本修饰,(上，下划线，主要用来删除链接的下划线...)
text-index:文本缩进（第一行）
text-transform:转换字母大小写等
text-shadow:文本阴影
text-overflow:指定文本如何显示溢出内容(hidden)
letter-spacing:字符间距
line-height:行高
vertical-align:元素的垂直对齐
white-space:指定空白字符的如何处理
word-warp:可以指定长文本换行(break-word)

/* 字体 */
font-family:设置文本字体系列
font-style:设置斜体正常等等
font-size:大小，浏览器默认16px
font-weight:设置字体粗细

/* 列表 */
list-style:(项标志，圆点什么的，罗马数字什么的，一般用来取消标志 )

/* 边框 */
border:(指定简写)(上，右，下，左)
border-style:(none,dotted点线，dashed虚线，solid实线，double双边框,...)
border-width:宽度
border-color:边框颜色可设置透明 transparent
border-top:(指定顶部边框。。其他类似)
CSS 中 border: 1px solid rgba(0, 0, 0, 0.1);
意思是: 设定元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。
其中，rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值（0-255），最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1，越接近 1，代表透明度越低。
border-radius:(设置圆角)
(左上，右上，右下，左下)
(左上，右上左下，右下)
(左上右下，右上左下)
(全部)
可以单独设置每个
box-shadow:(阴影)
(h-shadow   v-shadow   blur   spread   color   insect)
水平阴影    垂直阴影   模糊    阴影尺寸  颜色   外阴影转到内阴影
border-image:(使用图片创建一个边框)
box-sizing:(元素上设置了 border-box; 
则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中)
* {
    box-sizing: border-box;
} 

/* 轮廓 */
/*区别于边框位于边框外围*/
outline:(类型，一般为none，颜色，宽度)

/* 边距 */
/* 外边距 */
/*margin 没有背景颜色，是完全透明的 */
margin:(所有)
margin:(上，右，下，左)
margin:(上下，左右)
margin:(上，左右，下)
/* 内边距 */
/* 清空内边距会被背景色填充 */
padding:类似margin

/* 尺寸 */
width:宽度 (100 %, 100 px|em, 50vw)
max-width,min-width
height:高度
max-width,min-width

/* 显示 */
display:(指定如何显示none,block,inline,inline-block,flex,table...)
visiblity:(指定元素可见还是隐藏hidden,)
/* 区别与hidden和none，hidden不可见但是占据空间，none是不显示不占据 */

/* 定位 */
position:(static(默认),relative,fixed,absolute,sticky)
/* sticky 粘性定位*/

/* overflow */
overflow:(visible(默认),hidden,scroll,auto,inherit)

/* 浮动 */
float:(指定浮动的方向,left,right)
clear:(清除浮动,指定元素两侧不能出现浮动元素,both)

选择器名:伪类名{
	属性:值;
}
/* 状态 */
/* 例如 */
/* a 这个元素被鼠标划过的样式指定 */
a:hover{
    color:#fff;
}
/* a 被选择 */
a:active{
    ...
}
/* visited */
a:visited{
    /*被访问过*/
}
a:link{
    /* 没访问 */
}
/*等等*/
/*a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。*/

/* 选择子元素 */
ul:first-child{
    /*选取所有元素的第一个子元素ul*/
}
<div>
	<ul>被选择</ul>
	<ul>不被选择</ul>
	<div><ul>被选择</ul></div>
</div>
ul:last-child{
    /*选择所有ul的最后一个子元素*/
}
:not(p){
    /*选择p以外的元素*/
}
/* 使用 nth-child(n) 设置 表格每行颜色*/
td,th {
    padding: 12px;
}

table tr:nth-child(odd){
    /* odd设置奇数行 */
    /* even设置偶数 */
    background: #fff;
}
table tr:first-child{
    background: #ccc;
}

/* 根据元素属性的伪类 */
input:focus{
    /* 获得焦点 */
}
input:optional{
    /* 选择没有 required 的input元素 */
}
input:required{
    /* 选择有 required 的input元素 */
}
input:read-only{
    /*选择只读属性的input*/
}
input:read-write{
    /* 选择没有只读属性的input*/
}

/* 插入内容 */
/*为每个p元素插入以下内容*/
p:before{
    content:'before';
    /*必须指定content*/
}
p:after{
    content:'after';
    /*必须指定content*/
}
/* 结果：*/
<p>before 我是本来的内容 after</p>

@media screen{
	/*在浏览器屏幕上的一直组css样式*/
}
@media print{
    /* 在打印的时候使用的样式*/
}

/*选项*/
[
	all,所有媒体设备
。。。等等
]
/*媒体查询*/
max-width，min-width
最大宽度以下
最小宽度以上
@media (max-width:993px){
    .archive-list li::before{
        content: '';
        display: inline-block;
        width: 10px;
        position: absolute;
        height: 10px;
        left: 7px;
        margin-top: 7px;
        border-radius: 50%;
        background: #abc2d3;
    }
}

@font-face{
	/* 引用何种字体*/
    font-family:font_p;
    src:url('');
}
/* 使用 */
p{
  font-family:font_p;  
}

/* 使用浏览器前缀 transfom */
/*
-webkit- 
-ms-
-moz-
*/

/* 2D转换 */

translate(指定左x轴和顶部y轴)
/*translate(100px,100px) 左往右移100 顶部往下100*/
rotate(顺时针旋转元素)
/*rotate(50deg)*/
scale(设置元素增大和减少,宽高)
/* scale(2,3) 增大到宽度2倍，高度3倍*/
skew(设置倾斜)
/* skewY() skewX()*/
matrix(上述的混和写法)

/* 3D 转换*/

主要是rotateY()和rotateX()

/* 过度 */
transition(指定要添加效果的css属性和持续时间)
/* 例如 */
div{
    width:100px;
    /* 添加给宽度变化的动画过度效果 2s*/
    transition:width 2s;
}
div:hover{
    /*动画效果鼠标经过div宽度变为200*/
    width:200px;
}

@keyframes animation_name{
    from{
        /*一组原始属性*/
        /*from等同0%*/
    }
    .../*可以根据百分比指定*/
    to{
        /*要变化到的属性*/
        /*等同100%*/
    }
}
/* 使用 类型font定义的使用*/
div{
    /*animation指定动画名称,时间*/
    animation:animation_name 5s;
    /*其他浏览器兼容加前缀*/
}