CSS（CascadingStyleSheets）译为层叠样式表或层叠样式表，简称样式表。1.语法2.写法Embedded：通过标签嵌入到html中，在html5中，type可以省略不写Externallink：使用link标签inline：直接卸载html标签的style属性3.选择器基本选择器使用id选择器时，id必须是唯一的。一个标签可以有多个类名，用空格分隔。复合元素选择器这里要注意后代元素选择器和子元素选择器。子元素只匹配一级，后代匹配所有符合条件的元素。相邻元素选择器只匹配next、next、sibling元素伪类选择器为超链接的不同状态设置样式。这里必须按照L、V、H、A的书写顺序，否则会失败。属性选择器4.sizestyle,font和text属性当sizestyle属性width没有设置时，会自动占据父元素100%只有块级元素才能设置宽高。span标签不能设置宽高，因为span标签是一个内联元素文本属性font属性。注意字体缩写，不能随意改变顺序六．列表样式属性注意list-style-image:url(图片地址)7.背景样式属性前四个是常用的缩写属性。可以有多个，顺序可以任意。8.从外部元素继承的属性将被内部元素继承。当图层元素相同时，内层元素的样式会覆盖外层元素。只能继承文本和字体样式属性。PriorityInlinestyle>ID选择器>class选择器>label选择器一般来说，指向确切的优先级大约越高，也可以使用下面的计算方法。标签选择器1类型选择器10ID选择器100内联样式1000复合选择器添加权重，为当前权重值注意添加了!important的属性，权重相当于无穷大，写法：后面跟属性值（属性：值！重要）。它只会增加属性的权重，不会增加选择器的权重。9、标准的文档流是指在HTML中，文字排列顺序为，“从左到右”、“从上到下”、“高低对齐，底部对齐”10、浮动应该实现多个元素排列在同一行，并且要设置不同的大小，宽度和高度，需要使元素无标签（标准文档流之外），可以通过浮动属性设置。浮动元素取消标记后，不再占用空间。浮动元素的层级高于标准文档流中的元素，因此它会覆盖标准文档流中的元素。浮动元素可以向左或向右浮动。浮动元素遇到上层。浮动元素和父边框将停止浮动。浮动元素浮动后，父元素将不再包裹浮动元素。内联元素设置为浮动后，该元素将成为块级元素。写法：float:leftfloat:right案例：导航栏11.clearfloat上面浮动的div之后，父元素不再包裹子元素，影响到下面的“floatandclearfloat”的文本块，这样就可以了不低于这三个块，而是向上运行。上面的浮动元素会影响下面的其他元素。这时候就需要用到浮动元素了。共有三种方法。给父元素加高度（不推荐，因为元素的高度一般不会手动设置，应该由其内容来抬高）使用clear属性清除浮动（写法：clear:left,clear:right,clear:both)使用overflow:hidden清除浮动（本意是如下图隐藏溢出部分，也可以用来清除浮动）。第二种方法一般通过。在最后一个float元素下，添加一个空的block元素，然后不设置任何样式，添加clear属性，clear:both，清除浮动，这样就不会影响到下面的元素了。第三个本义是隐藏溢出。比如下面这种情况，可以在块中加上overflow:hidden实现隐藏溢出。这个用来清除浮动，一般用在列表中。因为列表中不能添加块元素div，所以将overflow:hidden属性以内联样式的形式写在ul的父元素中。12.盒模型paddingPadding属性格式：大属性：padding:xxpx小属性：padding-top:xxpx；填充底部：xxpx；左填充：xxpx；向右填充：xxpx；简写属性：顺时针方向，上、右、下、左padding的顺序：10px；表示四个内边距都是10pxpadding:10px20px;表示上下内边距为10px，左右内边距为20pxpadding:10px20px30px;表示顶部为10px，左右为20px，底部为30px。内边距：10px20px30px40px；表示上为10px，右为20px，下为30px，左为40pxMargin属性格式：large属性：margin:xxpxsmall属性：margin-top:xxpx;margin-bottom:xxpx;左边距：xxpx；右边距：xxpx；速记属性：顺时针顺序，上，右，下，左边距：10px；表示四个外边距都是10pxmargin:10px20px;表示上下边距为10px，左右边距为20pxmargin:10px20px30px;表示顶部10px，左右20px，底部30pxmargin:10px20px30px40px;表示顶部10px，右侧20px，底部30px，左侧40px，可以用来实现盒子的水平居中。;).只有标准文档流的元素可以水平居中。当您开始编写CSS时，您需要清除默认的HTML内外边距。这不会影响我们自己的布局。border边框属性：border:1pxsolid#f00;边框顶部：xxpx；底部边框：xxpx；左边框：xxpx；右边框：xxpx；boxcollapse在标准文档流中，box的垂直方向margin不会叠加，只会取较大的值。这就是箱体塌陷现象。（图1）在水平方向，不会出现框塌陷（margin会叠加）。浮动元素不会有盒子折叠。如图2所示，利用好父元素的padding而不是子元素的margin。边距通常用来描述兄弟元素之间的关系。父子关系尽量用padding解决。十三、display可以用来转换block元素和inline元素可以显示隐藏元素：display:block（主要针对js）可以隐藏显示的元素：display:none（主要针对js）display:inlineblock在块级的情况下，内联元素被转换为块级元素。在导航栏中，导航栏中的文字是行内元素，不能设置宽高。然后在给它一个悬停效果的时候，只有上面的文字部分有效果。要达到图1所示的效果，需要将行内元素转换为块级元素。14.定位位置属性position:fixed固定定位位置:relative相对定位位置:absolute绝对定位定位要和坐标一起使用定位元素从标准文档流中分离出来。固定定位级别高于标准文档流级别。固定定位不占空间。常用于实现顶栏悬浮和返回顶部按钮。相对定位相对定位就是相对于原件本身进行定位。相对定位元素不偏离标准文档流。相对定位元素层级高于原标准文档流。它将涵盖其他元素。相对定位元素会在原来的地方留下一个“”。“坑”，所以很少单独使用，常与绝对定位元素结合使用。检查父元素的上层定位。如果没有，请使用浏览器窗口定位。绝对定位脱离了标准文档流。绝对定位级别高于标准文档流级别。定位，此时子元素会参照父元素的位置进行定位。这里为父元素设置的定位可以是固定的，也可以是相对的。但是我们一般对父元素使用相对定位。“儿子永远不像父亲”。z-index表示谁覆盖谁，值越大覆盖越小（常用于解决覆盖，一般导航栏需要设置超大值）。只有设置了position属性的元素才能有z-indexz-索引没有单位，直接用正整数表示。如果多个定位元素没有设置z-index或者它们的值相同，那么在html中（注意是在html中，不是css中），后面写的会被压缩覆盖前面的元素十五、CSS3新attributes下面属于CSS3新语法结构伪类选择器boder-collapse:collapsesmergetableline伪元素选择器注意使用后两者时需要加上contentcontentcontentshadowtextshadowtext-shadow:Thecolor模糊水平阴影和垂直阴影的距离阴影。水平和垂直阴影是必需的值，可以是负值。其中，水平阴影和垂直阴影为必填值，可以为负数。文本阴影可以有多组值，用逗号分隔以模糊距离。值越大，boxshadow越模糊box-shadow:水平阴影和垂直阴影的清晰度shadow阴影的大小Shadowcolor内外阴影(默认outside)圆角矩形boder-radius:upperleft,upperright,lowerright,lowerleft(表示转换成圆角的长度)如果四个相同，可以简写成一个值。如果想把某个角变回直角，设置为0px，然后将四个角的值设置为宽/高的一半，就变成了一个圆。将左上角和右上角设置为宽度和高度的一半，就会变成一个扇形的半圆。如果角设置为宽度的一半，它可以变成椭圆。在各种圆形按钮和圆形图片中，transparencyrgba(a,b,c,x)x为透明度，0-1之间，越低越透明。
