首页 > 代码库 > CSS01
CSS01
1 CSS
Cascading Style Sheets -->> 层叠样式表
定义如何显示HTML元素
2 CSS的三种使用方式
2.1 内联样式 -->> 样式定义在每个HTML元素中
2.2 内部样式 -->> 样式定义在HTML文件的head元素中
2.3 外部样式 -->> 样式定义在一个CSS文件中，在THML文件中引用CSS样式表（推荐使用）
3 CSS规则特性
3.1 继承性：父元素的CSS声明可以被子元素继承
3.2 层叠性：同一个元素可以存在多个CSS规则，对于不冲突的声明可以叠加
3.3 优先级：同一个元素若存在多个CSS规则，以优先级高的CSS规则为准（内联样式的优先级别最高）
4 CSS选择器
4.1 元素选择器 -->> p h1 ul ...
4.2 类选择器 -->> .类名
4.3 ID选择器 -->> #ID
4.4 选择器组 -->> .aaa , .bbb <<-- 将选择 类名为aaa 和 类名为bbb 的元素
4.5 派生选择器
4.5.1 后代选择器 子元素选择器
4.5.2 ：link -->> 向未被访问的超链接添加样式
4.5.3 ：visited -->> 向已被访问的超链接添加样式
4.5.4 ：active -->> 想被激活的元素添加样式
4.5.5 ：hover -->> 当鼠标悬停至元素上方时，向该元素添加样式
4.5.6 ：focus -->> 当元素获得焦点时，向该元素添加样式
5 CSS声明
5.1 文本样式
color: red; /*字体颜色*/
letter-spacing: 2px; /*字符间距*/
line-height: 20px; /*行高*/
font-size: 16px; /*字符大小*/
font-family: "楷体"; /*字体设置*/
font-style: oblique; /*字体风格*/
font-weight: bold; /*字体加粗*/
text-indent: 2em; /*段首缩进*/
text-align: center; /*文本对齐方式*/
text-decoration: overline; /*文本装饰*/
text-transform: capitalize; /*(uppercase/lowercase大小写转换)*/
background-color: skyblue; /*背景颜色*/
background-image: url("../IMG/cq.jpg"); /*背景图片*/
background-repeat: repeat-x; /*背景图片平铺设置*/
background-size: 100px 100px; /*背景图片大小设置*/
background-position: 200px 300px; /*背景图片定位设置*/
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset = "utf-8" /> 5 <meta name="Keywords" content="" /> 6 <mata name = "description" content = "" /> 7 <title>Day02CSS</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 h2{ 14 color: blue; 15 } 16 </style> 17 <link rel="stylesheet" href="../CSS/day02.css"> 18 </head> 19 <body> 20 <!-- 使用内联样式 --> 21 <h1 style="color:red">我使用的是内联样式</h1> 22 23 <!-- 使用内部样式 --> 24 <h2>我使用的内部样式</h2> 25 26 <!-- 使用外部样式 --> 27 <h3>我使用的是外部样式</h3> 28 29 <div> 30 hello world 31 </div> 32 33 <p>重庆，简称巴或渝，位于中国西南部，是中华人民共和国中央直辖市、国家中心城市[1] 、超大城市、国际大都市，长江上游地区经济、金融、商贸物流、科技创新和航运中心，[2] 西南地区综合交通枢纽和最大的工商业城市[3] ，国家重要的现代制造业基地，全国统筹城乡综合配套改革试验区；[1] 西部开放开发战略支撑和长江经济带西部中心枢纽；东邻湖北、湖南，南靠贵州，西接四川，北连陕西。重庆，简称巴或渝，位于中国西南部，是中华人民共和国中央直辖市、国家中心城市[1] 、超大城市、国际大都市，长江上游地区经济、金融、商贸物流、科技创新和航运中心，[2] 西南地区综合交通枢纽和最大的工商业城市[3] ，国家重要的现代制造业基地，全国统筹城乡综合配套改革试验区；[1] 西部开放开发战略支撑和长江经济带西部中心枢纽；东邻湖北、湖南，南靠贵州，西接四川，北连陕西。重庆，简称巴或渝，位于中国西南部，是中华人民共和国中央直辖市、国家中心城市[1] 、超大城市、国际大都市，长江上游地区经济、金融、商贸物流、科技创新和航运中心，[2] 西南地区综合交通枢纽和最大的工商业城市[3] ，国家重要的现代制造业基地，全国统筹城乡综合配套改革试验区；[1] 西部开放开发战略支撑和长江经济带西部中心枢纽；东邻湖北、湖南，南靠贵州，西接四川，北连陕西。重庆，简称巴或渝，位于中国西南部，是中华人民共和国中央直辖市、国家中心城市[1] 、超大城市、国际大都市，长江上游地区经济、金融、商贸物流、科技创新和航运中心，[2] 西南地区综合交通枢纽和最大的工商业城市[3] ，国家重要的现代制造业基地，全国统筹城乡综合配套改革试验区；[1] 西部开放开发战略支撑和长江经济带西部中心枢纽；东邻湖北、湖南，南靠贵州，西接四川，北连陕西。重庆，简称巴或渝，位于中国西南部，是中华人民共和国中央直辖市、国家中心城市[1] 、超大城市、国际大都市，长江上游地区经济、金融、商贸物流、科技创新和航运中心，[2] 西南地区综合交通枢纽和最大的工商业城市[3] ，国家重要的现代制造业基地，全国统筹城乡综合配套改革试验区；[1] 西部开放开发战略支撑和长江经济带西部中心枢纽；东邻湖北、湖南，南靠贵州，西接四川，北连陕西。重庆，简称巴或渝，位于中国西南部，是中华人民共和国中央直辖市、国家中心城市[1] 、超大城市、国际大都市，长江上游地区经济、金融、商贸物流、科技创新和航运中心，[2] 西南地区综合交通枢纽和最大的工商业城市[3] ，国家重要的现代制造业基地，全国统筹城乡综合配套改革试验区；[1] 西部开放开发战略支撑和长江经济带西部中心枢纽；东邻湖北、湖南，南靠贵州，西接四川，北连陕西。</p> 34 <script type="text/javascript"> 35 36 </script> 37 </body> 38 </html>
1 @charset "UTF-8"; 2 /** 3 * 4 * @authors Your Name (you@example.org) 5 * @date 2017-03-31 21:09:37 6 * @version $Id$ 7 */ 8 h3{ 9 color: green; 10 } 11 div{ 12 width: 100px; 13 height: 100px; 14 text-align: center; 15 line-height: 100px; 16 background-image: url("../IMG/cq.jpg"); 17 background-size: 300px 300px; 18 } 19 p{ 20 color: red; /*字体颜色*/ 21 22 letter-spacing: 2px; /*字符间距*/ 23 line-height: 20px; /*行高*/ 24 25 font-size: 16px; /*字符大小*/ 26 font-family: "楷体"; /*字体设置*/ 27 font-style: oblique; /*字体风格*/ 28 font-weight: bold; /*字体加粗*/ 29 30 text-indent: 2em; /*段首缩进*/ 31 text-align: center; /*文本对齐方式*/ 32 text-decoration: overline; /*文本装饰*/ 33 text-transform: capitalize; /*(uppercase/lowercase大小写转换)*/ 34 35 background-color: skyblue; /*背景颜色*/ 36 background-image: url("../IMG/cq.jpg"); /*背景图片*/ 37 background-repeat: repeat-x; /*背景图片平铺设置*/ 38 background-size: 100px 100px; /*背景图片大小设置*/ 39 background-position: 200px 300px; /*背景图片定位设置*/ 40 41 42 }
待更新...
CSS01