css的使用方式；css规则特性和样式优先级；css选择器；border与box；背景色和背景图；文本格式化；表格；元素的定位；列表样式；元素的显示方式；鼠标样式。
------------------------------------------------------------------------------------------------------
css：层叠样式表，用于定义html的显示方式，样式通常存储在样式表中。css的使用方式： - 内联方式：样式定义在html元素的属性style中。 例 <h1 style="color:red;">内联方式</h1> - 内部样式：在head的style子标签中写的css，该css可以在当前页面复用。 例 <style> h1{ color:red; } </style> - 外部样式：在head标签中，通过link标签引入外部css文件。任何页面都可以复用这些样式。 例 <link rel="stylesheet" href="my.css">------------------------------------------------------------------------------------------
css语法规范：css由多个样式规则组成，每个样式规则包含选择器和样式声明，样式声明包含属性和值。css规则特性： - 继承性：父元素的某些样式可以被子元素继承，如字体颜色等。 - 层叠性：同一个元素若存在多个css规则，不冲突的声明可以叠加。 - 优先级：同一个元素若存在多个css规则，冲突的声明以优先级高者为准。样式优先级从高到低为：内联样式→（外部样式和内部样式：就近原则）→浏览器默认设置-------------------------------------------------------------------------------------------css选择器：1.元素选择器：通过元素名来选择css作用的目标。 通常在页面中有多个相同的元素需要重用同样的效果时使用。例 p{ color:red; }2.类选择器：根据class选择一组元素。通常在页面中有多个不相同的元素需要重用同样的效果时使用。例 .female{ color:pink; }3.id选择器：根据id选择唯一的元素。*/例 #p4{ color:red; }4.选择器组：选中一组选择器。 .female,#p4{ font-family:"微软雅黑","黑体"; }5.派生选择器： - 后代选择器：选择某元素的所有后代（子孙）元素。例 ol li{ color:blue; } - 子元素选择器：选择某元素的所有子（儿子）元素。例 ol>li{ color:green; } 6.伪类选择器：可以设置同一元素在不同状态下的样式。 - link：向未被访问过的超链添加样式。例 a:link{ color:red; } - visited：向已被访问过的超链添加样式。例 a:visited{ color:green; } - active：向被激活（正在点）的元素添加样式。例 #b1(按钮):active{ background-color:red; } - 当元素获得焦点时（光标正在闪烁），向该元素添加样式。例 #t1（文本框）:focus{ background-color:red; } - hover：当鼠标悬停在元素上方时，向该元素添加样式。例 img:hover{ width:300px; height:450px; }-----------------------------------------------------------------------------------------border与boxborder：用来设置元素的边框。一.border的设置方式：1.四边一起设置：语法为 border：边框的宽width值 style值 color值；例 p{ border:1px dashed red; /* dashed虚线，solid实线 */ }2.单边设置：语法为 border-left/right/top/bottom:width值 style值 color值；例 h1 { border-left:10px solid blue; }3.内容溢出overflow：当内容溢出元素框时如何处理。 - visible：可见。 - hidden：隐藏。 - scroll：滚动（箭头）。 - auto：滚动（滚动条）。样式单位： - % ：百分比 - px ：像素 - em ：当前的字体尺寸
二.框模型：定义了元素框处理元素的内容、内边距（padding）、边框和外边距（margin）的方式。 - width和height指内容区域的宽和高。 - 增加内边距、边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。1.四边一起设置相同的样式：例 /*统一所有div的宽高和边框*/ div{ width:100px; height:100px; border:1px solid red; } /*1.四边一起设置相同的边距*/ #d2{ padding:20px; margin:30px; }2.四边一起分别设置不同的样式： 例 /*2.四边一起设置不同的边距：顺序为 上 右 下 左 */ #d3{ padding:10px 20px 30px 40px; margin:40px 30px 20px 10px; }3.单边设置：例 /*3.单边(left/rigth/top/bottom)设置边距*/ #d4{ padding-top:20px; padding-left:30px; margin-left:40px; margin-bottom:30px }4.对边设置：例 /*4.对边（上下 左右）设置边距*/ #d5{ padding:20px 40px; margin:30px 60px; }5.特殊的居中设置：例 /*5.特殊用法，使用margin对边设置外边距时，若左右的值时auto，则该元素会水平居中*/ #d6{ margin:0 auto; }------------------------------------------------------------------------------------------背景色和背景图：一.背景色:background-color属性，为元素设置背景色。例 body{ background-color:#ccc; }二.背景图片：background-image属性用于设置背景图，默认值是none。例 body{ background-image:url("../images/background.png"); }1. 默认情况下背景图时平铺效果，即水平和竖直方向上重复出现，可以通过background-repeat属性控制： - repeat：平铺。 - repeat-x：水平方向重复出现 还有repeat-y和no-repeat例 body{ background-image:url("../images/background.png"); background-repeat:no-repeat; }2. background-position:用于设置图片在元素中的位置，该属性可取值为： - x%y%：左上角是0%0%，右下角是100%100% - xy：左上角是00 - left：在页面或者包含元素的左边显示，还有center，right，top，bottom3.默认情况下背景会随着页面滚动而滚动，可以通过background-attachment属性来改变特征。 - 默认值是scroll：背景会随文档滚动。 - 可取值为fixed：背景图像固定，不会随着页面的其余部分滚动。*4.采用简化的方式设置背景：background：背景色 背景图 重复 位置； 上述四个值可以省略，但至少保留背景色或背景图之中的一个值例 body{ background:url(../images/background.png) no-repeat center; }------------------------------------------------------------------------------------------文本格式化：一.文本字体的控制：1.字体：font-family:value1（字体1）,value2,...;(字体集)例 body{ font-family:"微软雅黑","文泉驿正黑","黑体"; }2.字体大小：font-size:value;例 p{ font-size:30px; }3.字体加粗：font-weight:normal/bold;例 p{ font-weight:bold; }4.字体颜色：color:value;例 p{ color:red; }5.文本排列：text-align:left/right/center;6.文字修饰（下划线）：text-decoration:none/underline;7.行高：line-height:value;例 p{ line-height:3em;（3个当前的字体尺寸高度） }8.首行文本缩进：text-indent:value(2em);-------------------------------------------------------------------------------------------表格：表格可以使用box模型（边框、内外边距、宽高）以及文本格式化属性。例：表格常用样式属性：table{ width:200px; border:1px solid red; padding:10px; margin:30px;} - 合并相邻的边框：border-collapse:separate/collapse(合并);例 table{ border-collapse:collapse; }--------------------------------------------------------------------------------------------
定位：一.流定位：块级元素上下排列，行内元素左右排列。二.浮动定位：将元素脱离普通的流定位，会释放原本所占空间，在css中任何元素都可以浮动。1.float:none/left(左浮动)/right（右浮动）;例 div{ float:left; }2.clear:用于消除浮动带来的影响。 clear:none/left/right/both;定义了那边不可以出现浮动元素。例 p{ clear:left;(这样浮动的元素就不会遮盖这个段落p) }三.相对定位：**元素原本所占的空间不释放。 - 首先需要设置position属性的值为relative - 然后使用left、right、top、bottom属性设置偏移量。例 /*使用相对定位实现鼠标悬停时照片偏移的效果*/ li:hover{ /*相对定位*/ position:relative; /*设置偏移量*/ left:2px; top:-2px; }四.绝对定位：绝对定位释放原本所占空间。 - 绝对定位会相对与最近的已定位父辈（或更高辈）元素 - 如果该元素没有已定位父辈元素，那么它的位置相对于最初的包含块，如body元素。* - 首先需要设置position属性的值为absolute - 然后使用left、right、top、bottom属性设置偏移量。例 若html中的代码为：<div class="outter"> <div class="d1">d1</div> </div> 则css中的决定定位代码可以为： .outter{ /*父元素上加position仅仅是为了便于子元素做绝对定位。此处不设置偏移量*/ position:relative; } .d1{ position:absolute; bottom:10px; right:10px; }五.固定定位：将元素定位在窗口的某个位置，释放空间，不随页面滚动而移动。 - 首先需要设置position属性的值为fixed - 然后使用left、right、top、bottom属性设置偏移量。例 若html中的代码为：<body> <div><a href="#">TOP</a></div> </body> 则css中的决定定位代码可以为：div{ width:40px; background-color:#ccc; text-align:center; line-height:30px; position:fixed; bottom:10px; right:5px; }六.堆叠顺序：z-index:value;值越大越在前面显示例 img:hover{ z-index:999; }--------------------------------------------------------------------------------------列表样式：1.list-style-type:控制列表中列表项标志的样式： - 无序列表可取值：none无标记、disc实心圆，默认值、circle空心圆、square实心方块 - 有序列表可取值：none无标记、decimal数字（1,2...），默认值 lower-roman小写罗马数字（i，ii，iii...），upper-roman大写罗马数字（Ⅰ,Ⅱ,Ⅲ...）2.list-style-image：使用图像替换列表项的标志，取值为：url();例 html：<ol> <li id="sx">山西</li> <li>广东</li> </ol> <ul> <li>北京</li> <li>合肥</li> </ul>css： <style> ol{ list-style-type:upper-roman; } ul{ list-style-type:square; } #sx{ list-style-image:url(../images/add.png); } </style>------------------------------------------------------------------------------------------元素的显示方式：1.元素都有默认的显示方式： - 块元素：独立成行，可设置宽高，从上至下。 - 如：hn/p/ol/ul/div/table - 行内元素：不独立成行，无宽高，从左至右。 - 如：span/b/strong/i/em/del/u/a - 行内块：不独立成行，有宽高，从左至右。 - 如：img/input/select/textarea2.改变元素的显示方式：display - none：不显示该元素，释放空间。 - block：将元素显示方式设置为块。 - inline：将元素显示方式设置为行内。 - inline-block：将元素显示方式设置为行内块。------------------------------------------------------------------------------------------鼠标样式：cursor：定义了鼠标指针放在一个元素边界范围内时所用的光标形状。 - default/pointer/crosshair/text/wait/help等。