CSS-Cascading Styles Sheets，层叠样式表。用于网页的表现，主要用于布局和修饰网页。
CSS的三种引入方式：行内样式，内部样式表，外部样式表。
行内样式：通过标签的style属性设定样式，基本语法：<标签名 style="属性1：属性值1；属性2：属性值2；...">内容</标签名>。
1 <!DOCTYPE html>2 <html>3 <head>4 <title>行内样式-测试</title>5 </head>6 <body>7 <h4 style="color: red; font-size: 25px">行内样式</h4>8 </body>9 </html>
View Code
内部样式表：使用<style>标签将CSS代码集中写在HTML文档的<head>标签中，基本语法：<head><style type="text/css>选择器{属性1：属性值1；属性2：属性值2；...}</style></head>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>内部样式-测试</title> 6 <style type="text/css"> 7 h3{ 8 color: red; 9 font-size: 25px;10 }11 p{12 color: gray;13 font-size: 20px;14 }15 </style>16 </head>17 <body>18 <h3>内部样式</h3>19 <p>内部样式表使用<style>标签将CSS代码集中写在HTML文档的<head>标签中</p>20 </body>21 </html>
View Code
外部样式表：将所有样式从HTML文档中剥离出来，放在一个或者多个.css为扩展名的外部样式表中，通过<link>标签将外部样式表文件链接到HTML文档中，基本语法：<head><link href="css文件路径"，type="text/css"，rel="stylesheet" /></head>。其中href、type、rel三个属性是必须属性，href属性值为css文件路径，一般为相对路径；type属性值为text/css，表示链接文件为css样式表；rel属性值为stylesheet，指定链接文档类型为css文件。
HTML文档
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>外部样式-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/test2_css.css"> 7 </head> 8 <body> 9 <h3>外部样式</h3>10 <p>将所有样式从HTML文档中剥离出来，放在一个或者多个.css为扩展名的外部样式表中。</p>11 </body>12 </html>
View Code
CSS文件
1 h3 {2 color: red;3 font-size: 25px;4 }5 6 p {7 color: gray;8 font-size: 20px;9 }
View Code
文件结构
在内部样式表和外部样式表中都使用了CSS样式，CSS样式规则：选择器 {属性1：属性值1；属性2：属性值2；...}。
标签选择器：使用HTML标签名作为选择器。格式：标签名 {属性1：属性值1；属性2：属性值2；...}。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS基本选择器-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <p>CSS基本选择器</p>10 <div>CSS基本选择器</div>11 </body>12 </html>
View Code
css
1 p {2 font-size: 20px;3 }4 5 div {6 font-size: 25px;7 }
View Code
类选择器：在HTML标签中添加class属性，<标签名 class="属性值">content</标签名>，在CSS文件中使用 .属性值 { 属性1：属性值1；属性2：属性值2；...}。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS基本选择器-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="first">类选择器</div>10 <div class="second">类选择器</div>11 </body>12 </html>
View Code
css
1 .first {2 font-size: 20px;3 }4 5 .second {6 font-size: 25px;7 }
View Code
多类名选择器：在HTML标签中class属性只能添加一个，但是属性值可以是多个，<标签名 class="属性值1 属性值2">content</标签名>，表现在CSS文件中为 .属性值1 { 属性1：属性值1；属性2：属性值2；...} \n .属性值2 { 属性1：属性值1；属性2：属性值2；...}。以此形式为HTML标签赋予多种样式。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>多类名选择器-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="fontc fonts">多类名选择器</div>10 <p class="fontc">多类名选择器</p>11 </body>12 </html>
View Code
css
1 .fontc {2 color: red;3 }4 5 .fonts {6 font-size: 40px;7 }
View Code
注意：多个类名之间使用空格隔开，类名表现为class属性的属性值。即<标签名 class="类名1 类名2 ...">。多种CSS样式如果属性有相同，后写入的CSS样式会覆盖前写入的CSS样式属性，即只看CSS文件中属性的写入的前后关系，而与HTML文档中class属性值调用前后无关。
ID选择器：同类选择器使用方式相似，在HTML标签中添加id属性，<标签名 id="属性值">content</标签名>，在CSS文件中使用 #属性值 { 属性1：属性值1；属性2：属性值2；...}。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ID选择器-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div id="first">ID选择器</div>10 <div>ID选择器</div>11 <div>ID选择器</div>12 <div id="last">ID选择器</div>13 </body>14 </html>
View Code
css
1 #last {2 color: red;3 }4 5 #first {6 font-size: 40px;7 }
View Code
注意：ID选择器和类选择器的区别在于调用次数，ID对任何一个HTML标签来说是唯一，再调用时也只能在单个标签中调用一次。
通配符选择器：选择器使用通配符 * 表示，* 表示HTML中所有标签，是广义上的标签选择器。在CSS文件中使用 * {属性1：属性值1；属性2：属性值2；...}。 不推荐使用
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>通配符选择器-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <h1>通配符选择器</h1>10 <div>通配符选择器</div>11 <p>通配符选择器</p>12 <span>通配符选择器</span>13 </body>14 </html>
View Code
css
1 * {2 color: blue;3 }
View Code
复合选择器就是利用多个基本选择之间的组合来定位元素内容。
后代选择器：当标签存在嵌套关系，标签之间就存在父子关系了。外层标签是内层标签的“长辈”，嵌套一层为父标签，两层为祖父标签，三层及以上为祖先标签；同理，内层标签为“晚辈”，嵌套一层为子标签，两层为孙子标签，三层及三层以上为祖孙标签。后代选择器利用父子关系，由“长辈”到“晚辈”的顺序，依次以空格间隔来定位“晚辈”标签中内容。基本语法：父标签名 子标签名 {属性1：属性值1；...}
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>后代选择器-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <!-- div 为 p 的父标签，为 span 的祖父标签 -->10 <div>11 <!-- p 为 div 的子标签，为 span 的父标签 -->12 <p>13 <!-- span 为 div 的孙子标签，为 p 的子标签 -->14 <span>后代选择器</span>15 </p>16 </div>17 </body>18 </html>
View Code
css
1 div p span {2 font: oblique bolder 30px "Microsoft YaHei";3 color: rgb(50%, 50%, 70%);4 }
View Code
当需求变为：当目标内容在<div><p>des-content</p></div>中,又存在多个此形式标签，标签名可以换作类名加以区别，准确定位元素。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>后代选择器-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="div_red">10 <p>123</p>11 </div>12 <div>13 <p>456</p>14 </div>15 <div>16 <p class="p_blue">789</p>17 </div>18 </body>19 </html>
View Code
css
1 /*需求:123为红色显示,456为黑色显示,789为蓝色显示;*/2 .div_red p {3 color: red;4 }5 6 div .p_blue {7 color: blue;8 }
View Code
子代选择器：明确一点，儿子、孙子或者祖孙都是应该是子代，如果只是定位子代可以使用后代选择器，而子代选择器只是作用儿子标签。基本语法：父标签名 > 子标签名 {属性1：属性值1；...}。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>子代选择器-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div>10 <span>后代选择器</span>11 <p>12 <span>后代选择器</span>13 </p>14 </div>15 <div>16 <span>子代选择器</span>17 <p>18 <span>子代选择器</span>19 </p>20 </div>21 </body>22 </html>
View Code
css
1 div span {2 color: red;3 }4 5 div>span {6 color: blue;7 }
View Code
效果显示
原因解释：CSS代码由上至下进行加载，第一部分CSS样式是使用后代选择器，<div>标签中所有<span>标签均设置为红色，加载完毕时，四行文本应该均为红色；第二部分CSS样式使用子代选择器，<div>标签中属于<div>儿子标签的<span>标签均被蓝色覆盖，由此出现上图情况。
注意:可以使用标签名（类名）>标签名（类名）>标签名（类名）>...一级一级往下定位。
多项选择器：多个目标内容分布于多个且多种标签内，设定统一格式，使用多项选择器。基本语法：标签1，标签2，标签3，...{属性1：属性值1；...}，表示标签1、标签2、标签3中内容样式一致。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>多项选择器-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <h1>多项选择器</h1>10 <p>多项选择器</p>11 <span>多项选择器</span>12 <div>多项选择器</div>13 </body>14 </html>
View Code
css
1 h1, p, div {2 color: red;3 }
View Code
链接伪类选择器：a:link { }、a:visited { }、a:hover { }、a:active { }分别表示：未访问的链接、已访问的链接、鼠标悬停的链接、选定的链接。使用时，顺序不要颠倒。“lvha-love hate”。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>链接伪类选择器-测试</title> 6 <style type="text/css"> 7 a:link { 8 color: blue; 9 font-size: 50px;10 text-decoration: none;11 }12 a:visited {13 color: green;14 }15 a:hover {16 color: red;17 }18 a:active {19 color: orange;20 }21 </style>22 </head>23 <body>24 <a href="http://www.baidu.com", target="_blank">百度</a>25 </body>26 </html>
View Code
font-size：设置文字大小，属性值的单位可以使用绝对单位长度，也可以使用相对单位长度。推荐使用相对单位长度。相对单位长度：em（相对于当前对象文本的字体尺寸，一般为1em为16px）、px(像素单位)；绝对单位长度：in、cm、mm。
font-family：设置字体。属性值使用偶数大于14px字号，多个字体使用英文逗号隔开，中文字体或者英文字体含空格、#等字符需要引号引入，英文字体一般不需要引号引入。字体属性值可以设置多个，按照系统是否含有依次读取。
| 中文名称 | 英文名称 | Unicode编码 |
| 宋体 | Simsun | \5B8B\4F53 |
| 新宋体 | NSimsun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9FD1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
font-weight：设置字体的粗细，属性值可以为normal（400），bold（700），bolder、lighter。
font-style：设置字体风格，属性值为normal（标准字体）、italic（斜体）、oblique（文字倾斜显示）。
font：综合设置字体格式，基本语法：选择器 {font：font-style属性值 font-weight属性值 font-size属性值/line-height属性值 font-family属性值;}，字体格式设置必须按照语法顺序写，必须保留font-size、font-family属性，其他属性可以使用默认属性值。"斜粗大体"
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>font属性-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <p>font属性设置</p>10 </body>11 </html>
View Code
css
1 p {2 font: italic 400 20px sans-serif,"宋体","Microsoft YaHei";3 }
View Code
注意：上述css可以调整顺序进行测试。
color：定义文本颜色，三种取值方式：定义颜色（red、green、blue）；十六进制（#FF0000、#FF6600、#29D794）；RGB代码（rgb（255，0，0）或者rgb（100%，0%，0%））。
注意：十六进制表示颜色，两连字符相同可以简写为一个，#FF0000可以表示为#F00，#FF6600可以表示为#F60。
line-height：设置行间距，使用单位长度：px、em、%。当行高和盒子高度相等时，可以使单行文本垂直居中；行高大于盒子高度，文本会偏下，反之偏上。
text-align：设置文本内容的对齐方式，属性值有：left、center、right。
text-indent：设置首行文本的缩进，使用单位长度：px、em、%，允许使用负值，1em相当于一个汉字的宽度。
text-decoration：设置文本装饰，属性值有：none（无装饰）、underline（下划线）、line-through（删除线）、overline（上划线）。
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS外观属性-测试</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="first_div">CSS外观属性</div>10 <div class="second_div">CSS外观属性</div>11 <div class="third_div">CSS外观属性</div>12 <div>CSS外观属性</div>13 <div>CSS外观属性</div>14 <div class="last_div">CSS外观属性</div>15 </body>16 </html>
View Code
css
1 .first_div { 2 color: red; 3 line-height: 20px; 4 text-align: center; 5 text-decoration: underline; 6 } 7 8 .second_div { 9 color: #f60;10 text-align: left;11 text-indent: 2em;12 text-decoration: line-through;13 }14 15 .third_div {16 text-indent: -2em;17 line-height: 30px;18 }19 20 .last_div {21 color: rgb(255,255,0);22 text-align: right;23 text-decoration: overline;24 }
View Code
块级元素：通常独占一整行或者多个整行，可以设置宽度、高度以及对齐方式等属性，常用于网页布局和网页结构搭建。常见块级元素有：<h1>-<h6>、<div>、<p>、<ul>、<ol>、<li>标签等。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>块级元素测试</title> 6 <style type="text/css"> 7 div { 8 width: 100px; 9 height: 100px;10 background: gray;11 }12 </style>13 </head>14 <body>15 <div></div>16 </body>17 </html>
View Code
行内元素：不占独立的区域，只占有自身内容（文字、图片）的大小的区域，一般情况下不可设置宽度、高度以及对齐方式等属性，常用于控制页面内容显示的样式。常见行内元素有：<a>、<span>、<strong>、<b>、<em>、<i>、<ins>、<u>、<del>、<s>标签等。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>行内元素测试</title> 6 <style type="text/css"> 7 span { 8 width: 100px; 9 height: 100px;10 background: gray;11 }12 </style>13 </head>14 <body>15 <span>行内元素</span>16 </body>17 </html>
View Code
行内块元素：不独占一整行，与相邻行内元素在一行，会存在空白缝隙，但是可以设置宽度、高度以及对齐方式等属性。常见行内块元素有：<image />、<input />、<td>标签等。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>行内块元素测试</title> 6 <style type="text/css"> 7 input { 8 width: 200px; 9 height: 25px;10 }11 </style>12 </head>13 <body>14 <input type="" name="">15 <input type="" name="">16 </body>17 </html>
View Code
块-行内-行内块相互转换：使用display属性设定可以对三种显示模式改变：display:inline转换为行内元素；display：block转换为块级元素；display：inline-block转换为行内块元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>显示模式转换-测试</title> 6 <style type="text/css"> 7 div { 8 width: 100px; 9 height: 100px;10 background-color: gray;11 display: inline;12 }13 span {14 width: 40px;15 height: 40px;16 background-color: red;17 display: block;18 }19 a {20 width: 80px;21 height: 40px;22 background-color: blue;23 display: inline-block;24 }25 </style>26 </head>27 <body>28 <div>123</div>29 <div>123</div>30 <span>abc</span>31 <span>abc</span>32 <a href="http://www.baidu.com">百度</a>33 <a href="http://www.baidu.com">百度</a>34 </body>35 </html>
View Code
导航栏案例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>导航栏-测试</title> 6 <style type="text/css"> 7 .nav { 8 width: 800px; 9 height: 50px;10 margin: 0 auto;11 }12 .nav a {13 width: 120px;14 height: 50px;15 display: inline-block;16 background-image: url(images/bg.png);17 text-align: center; /*文本水平居中*/18 line-height: 50px; /*单行文本垂直居中方式*/19 font-weight: bold; 20 font-size: 14px;21 color: #fff;22 text-decoration: none;23 }24 a:hover {25 background-image: url(images/bgc.png);26 }27 </style>28 </head>29 <body>30 <div class="nav">31 <a href="#">公司首页</a>32 <a href="#">公司介绍</a>33 <a href="#">产品介绍</a>34 <a href="#">资料下载</a>35 <a href="#">新闻浏览</a>36 <a href="#">联系我们</a>37 </div>38 </body>39 </html>
View Code
