DIV+CSS笔记(一)
CSS层叠样式表
1.在HTML中放置CSS的几种方式
1>内联样式表
1 <p style="color:red;font-family:serif">这是内联样式表</p>
2>嵌入样式表
1 <head> 2 <style type="text/css"> 3 body{ 4 background-color:red; 5 } 6 </style> 7 </head>
3>链接到外部样式表
1 <link rel="stylesheet" href="style.css" type="text/css" />
样式表优先级（就近原则）：内联 > 内嵌 > 外链
2.CSS选择器
1>HTML选择器
1 h1{color:red}
2>类选择器
1 .class1{font-size:small}
3>ID选择器
1 #id1{text-indent:3em}
4>关联选择器
1 table a{color:red}
5>组合选择器
1 h1,h2,h3,h4,h5,h6{color:green}
6>伪元素选择器
1 a:link{color:red;} 2 a:hover{color:yellow;font-size:125%} 3 a:active{color:blue;font-size:125%} 4 a:visited{color:green;font-size:85%}
选择器优先级： 关联选择器 > ID选择器 > 类选择器 > HTML选择器
3.CSS常见属性
1>字体属性
font-family、font-size、font-style、font-weight、font-variant
组合 font:[<字体风格>||<字体变形>||<字体加粗>]?<字体大小>[/<行高>]?<字体族科>
2>颜色属性
color:blue; color:#000080; color:#0c0;
3>背景属性
background-color、background-image、background-repeat、background-attachment、background-position
组合 background:<背景颜色>||<背景图像>||<背景重复>||<背景附件>||<背景位置>
4>文本属性
letter-spacing、word-spacing、text-decoration、text-align、text-indent、line-height
5>边框属性
border-style:none(无边框)dotted(点线)dashed(破折线)solid(实线)double(双框线)groove(槽线)ridge(脊线)inset(内嵌效果)outset(突起效果)
border-width边框宽度
border-color边框颜色
组合 border:5px solid red;
6>鼠标光标属性
cursor属性: hand(小手)crosshair(交叉十字)text(文本选择器号)wait(Windows沙漏)help(问号鼠标)
7>列表属性
list-style-type、list-style-image、list-style-position
