本文共 4452 字，大约阅读时间需要 14 分钟。
首先，在css的书写中，“#”：ID选择器，代表的是获取html中“id”相对应的元素，“.”：类选择器，代表的是获取html中“class”相对应的元素。例如：
#header .nav a{ background-color: orange;} 其中在，自定义的名称之后加上空格表示包含的关系，例如：
就包含在 >中,而“ a ”为标签选择器，标签包含在 之中。id选择器中的样式优先级要高于class的选择器样式。行内样式的写法，使用style标签属性直接写css样式 这种样式的优先级最高。比如：css是从上往下读代码,后面css产生的效果会覆盖前面相同的css产生的属性 。
body{margin : 0;}—— 解决白边问题。
border: 1px solid yellow; ——边框颜色，此处则为，粗细1像素的黄色边框。
border-bottom: 1px solid #CCCCCC;——设置下边框为粗细1像素，黄色线条。
border-bottom: 1px dashed #CCCCCC;——设置下边框为粗细1像素，黄色连点----虚线。
border-width: 0;——边框宽度
border-radius: 50%;——边框圆角，50%是圆角的程度，也可以使用像素表示。只写一个参数的时候,使得四个角都呈现圆角。
border-radius: 10px 30px;——写两个参数值的时候,第一个参数是使得左上角,右下角变化,第二个参数使得右上角和左下角变化。
border-radius: 10px 30px 60px;——写两个参数值的时候,第一个参数是使得左上角变化,第二个参数使得右上角和左下角变化,第三个参数使得右下角变化。
border-radius: 10px 30px 50px 70px;——写两个参数值的时候,第一个参数是使得左上角变化,第二个参数使得右上角变化,第三个参数使得右下角变化 ，第四个参数使得左下角变化。
border-radius: 200px/50px;——使用 / 来表示，左边的值表示水平轴的值，右边的值表示垂直轴的值；两者互相影响的一个比例效果。
border-top-right-radius: 0.3125rem;——右上角圆角。
border-top-left-radius: 0.3125rem;——左上角圆角。
border-collapse:collapse;——将表格内部的每格之间的空白都去掉。
height : 350px;——设置高度，此处为350像素。当height后面跟着的不是像素，而height100%必须要结合绝对定位 position:absolute才能配合使用.
line-height: 10px;——设置行间距离。
width: 200px;——设置宽度，此处为200像素。当width后面跟着的不是像素，而是百分比时，则是占据页面的比例。
width: calc(100%-10px);——也是设置对象的宽度，但是由百分比和像素一起使用。
background-color : blue;——设置背景颜色，此处为蓝色。
font-size: large;——字体变大，如果后面跟着的是多少像素，则是设置字体大小。
font-family:楷体——设置字体，比如：宋体，楷体，隶书等。
font-style: italic;——字体样式倾斜。
color: #FFF00;——设置字体颜色，此处为黄色。
padding: 10px;——设置内边距，此处为十像素。
padding-bottom: 10px;——仅设置距离下方的内边距为十像素。
padding-left: 10px;——仅设置距离左方的内边距为十像素。
float: left;——字体向左浮动，一旦浮动后，就会脱离文档流。浮动往往和html中父级节点的overflow: auto;连用,确保父级节点的高度。float往往多用在大的模块调整上面，使用的时候必须注意浮动脱离文档流。往往结合clear属性，overflow属性。
clear: both;——和float结合使用，使得另起一行。
overflow: auto;——使用浮动时候结合使用，可以使得容器的宽高自动体现出来。
over-flow:scroll——让页面中的溢出的文字以滚动条的形式显示。
over-flow:hidden——把溢出的文字直接隐藏。
text-decoration: none;——取消字体下划线。
text-align: center;——居中。
text-shadow: aqua 5px -5px 20px;——给文字添加阴影。使用text-shadow至少要使用三个值,分别是颜色,水平偏移距离,垂直偏移距离 （偏移值如果是负值就是反方向偏移）。一共有五个值——box-shadow:颜色,水平偏移距离,垂直偏移距离,模糊像素值,内部(inset)或外部阴影(不用写这个值,默认就是外部)。
.header .nav a:hover{ }——格式—元素:hover,代表鼠标经过时触发样式。行为伪类hover：注意：冒号前后不要有空格。
例如：
.header .nav a:hover{ /* 表示当鼠标放置时标签背景颜色为橘色*/ background-color: orange; /* 表示把鼠标变成手指 */ cursor: pointer;} .nav a:visited{}——被访问过之后的状态。{}内用法与行为伪类hover：相同。
left: 0;，right: 0;，top: -10px;——都表明对象显示位置，当我们使用负数的时候,效果是往相反的方向。
margin: auto;——居中。
margin: 20px auto;——第一个参数是上下距离,第二个是居中。
margin-left:10px;——距离左底边十像素。
margin-bottom:10px;——距离下底边十像素。
margin-top: 10px;——距离上底边十像素。
background-image:url(../img/a%20（2）.jpg);——设置背景图片，url中代表所在路径，这个路径是相对于css所在位置的。
background-repeat:no-repeat;——背景不重复，不会出现很多种相同图片。
background-repeat-y:no-repeat;——背景纵向不重复。"-x"则为横向不重复。
background-size:100% 100%;——设置背景的尺寸，水平方向以100%显示，垂直方向也以100%显示。
background-size: cover;——可以让背景图片的大小为最合适的居中显示，但是图片比容器大的部分将被截断。
background-position:bottom;——背景图片位置居下。
background-position-x：center——背景图片横向居中，"-y"则为纵向居中。
background-attach:fixed——让背景图片固定住，不能随之变动。
background-attach:scroll——让背景图片固定，并且溢出时可以往下滚动。
position: relative;——相对定位。一般要写在绝对定位的父级标签中。
position: absolute;——绝对定位。绝对定位后会脱离文档流。绝对定位使用的时候一定要和相对定位一起使用，这样效果最佳。
position: fixed;——把元素固定在页面的指定的位置,不受滚动条影响. 用法类似于absolute，而absolute会受到滚动条的影响。
z-index: 100;——绝对定位的层次关系的位置，z-index的值越大，越在上层，z-index这个css必须结合position绝对定位才生效。
*{}——通配符选择器，作用于所有的标签。
table tr td,table tr th{}——控制列的边框，tr中其实没有边框，","是分组选择器，表示前后一起受{}内属性影响。
#main h1+p{}——相邻选择器+： h1+p，这个选择器影响的不是h1标签，而且是相邻的p标签。
#main2 h1~p{}——兄弟选择器： h2~p受影响的是弟弟们而不是自己，影响的是h2后面所有的直接的p。
a[id]{}——元素【属性】——元素中包含了某个属性即可，而不需要管属性值是多少。
a[class="two"]{}——元素【属性=值】元素中的属性完全等于某个属性值才被匹配。
a[title~="zk"]{}——元素【属性~=值】属性中的值是成空格隔开的类型的时候使用。
a[ljy2^="喔"]{}——元素【属性^=值】属性中的值是以某个值开头的时候使用。
a[ljy2$="呵"]{}——元素【属性$=值】属性中的值是以某个值结尾的时候使用。
a[lang|="zh"]{}——元素【属性|=值】属性中的值是以"值-"出现的时候使用。
a[con*="e"]{}——元素【属性*=值】属性中包含某个值的内容 。
display: block;——显示。Block可以将普通标签格式化成宽度为100%的div类型的块级元素。
display:none——使得所选区域隐藏。none代表元素隐藏。
display:inline-block——可以使得一个容器在同一行。inline-block将普通标签格式化为div类型的标签，但是没有换行，且宽度自适应内容。往往用在小的标签上面。
opacity: 0.8;——所选区域透明度。
@media (min-width:400px) {}——屏幕自适应，当屏幕大于400px时，发生变化。从小屏幕做大大屏幕,那么使用min-width，从大屏幕做到小屏幕,那么使用max-width。这使得页面自动响应。这就是经典的响应式设计。
letter-spacing: 10px;——文本中字体间距。
.onerow p:not(.t){}—— 除了指定的项,其他全部受到影响，括号内只能填写标签或者id或者class。
word-spacing:5px—— 字体间距。
css3自定义字体：
/* 自定义时候必须要有两个属性1.font-family 自定义字体的名称2.src指字体来源,url表示路径 */@font-face { /* 使用时候就直接使用自定义字体的名称 */ font-family:"zkfont"; src: url("China.ttf");} 转载地址：http://umugn.baihongyu.com/