前端之HTML、CSS（三）
CSS
CSS-Cascading Styles Sheets，层叠样式表。用于网页的表现，主要用于布局和修饰网页。
CSS引入方式
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>
内部样式表：使用<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>外部样式表：将所有样式从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>
CSS文件
1 h3 {2 ????color: red;3 ????font-size: 25px;4 }5 6 p {7 ????color: gray;8 ????font-size: 20px;9 }文件结构
CSS基础选择器
在内部样式表和外部样式表中都使用了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>
css
1 p {2 ????font-size: 20px;3 }4 5 div {6 ????font-size: 25px;7 }类选择器：在HTML标签中添加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 >类选择器</div>10 ????<div >类选择器</div>11 </body>12 </html>
css
1 .first {2 ????font-size: 20px;3 }4 5 .second {6 ????font-size: 25px;7 }多类名选择器：在HTML标签中class属性只能添加一个，但是属性值可以是多个，<标签名 >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 >多类名选择器</div>10 ????<p >多类名选择器</p>11 </body>12 </html>
css
1 .fontc {2 ????color: red;3 }4 5 .fonts {6 ????font-size: 40px;7 }注意：多个类名之间使用空格隔开，类名表现为class属性的属性值。即<标签名 >。多种CSS样式如果属性有相同，后写入的CSS样式会覆盖前写入的CSS样式属性，即只看CSS文件中属性的写入的前后关系，而与HTML文档中class属性值调用前后无关。
ID选择器：同类选择器使用方式相似，在HTML标签中添加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选择器</div>10 ????<div>ID选择器</div>11 ????<div>ID选择器</div>12 ????<div >ID选择器</div>13 </body>14 </html>
css
1 #last {2 ????color: red;3 }4 5 #first {6 ????font-size: 40px;7 }注意：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>
css
1 * {2 ????color: blue;3 }CSS复合选择器
复合选择器就是利用多个基本选择之间的组合来定位元素内容。
后代选择器：当标签存在嵌套关系，标签之间就存在父子关系了。外层标签是内层标签的“长辈”，嵌套一层为父标签，两层为祖父标签，三层及以上为祖先标签；同理，内层标签为“晚辈”，嵌套一层为子标签，两层为孙子标签，三层及三层以上为祖孙标签。后代选择器利用父子关系，由“长辈”到“晚辈”的顺序，依次以空格间隔来定位“晚辈”标签中内容。基本语法：父标签名 子标签名 {属性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>
css
1 div p span {2 ????font: oblique bolder 30px "Microsoft YaHei";3 ????color: rgb(50%, 50%, 70%);4 }当需求变为：当目标内容在<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 >10 ????????<p>123</p>11 ????</div>12 ????<div>13 ????????<p>456</p>14 ????</div>15 ????<div>16 ????????<p >789</p>17 ????</div>18 </body>19 </html>
css
1 /*需求:123为红色显示,456为黑色显示,789为蓝色显示;*/2 .div_red p {3 ????color: red;4 }5 6 div .p_blue {7 ????color: blue;8 }子代选择器：明确一点，儿子、孙子或者祖孙都是应该是子代，如果只是定位子代可以使用后代选择器，而子代选择器只是作用儿子标签。基本语法：父标签名 > 子标签名 {属性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>
css
1 div span {2 ????color: red;3 }4 5 div>span {6 ????color: blue;7 }效果显示
原因解释：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>
css
1 h1, p, div {2 ????color: red;3 }伪类选择器
链接伪类选择器：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>CSS字体样式属性
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>
css
1 p {2 ????font: italic 400 20px sans-serif,"宋体","Microsoft YaHei";3 }注意：上述css可以调整顺序进行测试。
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 >CSS外观属性</div>10 ????<div >CSS外观属性</div>11 ????<div >CSS外观属性</div>12 ????<div>CSS外观属性</div>13 ????<div>CSS外观属性</div>14 ????<div >CSS外观属性</div>15 </body>16 </html>
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 }标签的显示模式
块级元素：通常独占一整行或者多个整行，可以设置宽度、高度以及对齐方式等属性，常用于网页布局和网页结构搭建。常见块级元素有：<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>行内元素：不占独立的区域，只占有自身内容（文字、图片）的大小的区域，一般情况下不可设置宽度、高度以及对齐方式等属性，常用于控制页面内容显示的样式。常见行内元素有：<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>行内块元素：不独占一整行，与相邻行内元素在一行，会存在空白缝隙，但是可以设置宽度、高度以及对齐方式等属性。常见行内块元素有：<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>块-行内-行内块相互转换：使用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>导航栏案例
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 >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>
前端之HTML、CSS（三）
原文地址：https://www.cnblogs.com/snow-lanuage/p/10393939.html