标签：顺序 外观 规则 ntc get over span 标准 多项选择
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>
内部样式表：使用<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样式规则：选择器 {属性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属性，<标签名 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>
css
1 .first { 2 font-size: 20px; 3 } 4 5 .second { 6 font-size: 25px; 7 }
多类名选择器：在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>
css
1 .fontc { 2 color: red; 3 } 4 5 .fonts { 6 font-size: 40px; 7 }
注意：多个类名之间使用空格隔开，类名表现为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>
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 }
复合选择器就是利用多个基本选择之间的组合来定位元素内容。
后代选择器：当标签存在嵌套关系，标签之间就存在父子关系了。外层标签是内层标签的“长辈”，嵌套一层为父标签，两层为祖父标签，三层及以上为祖先标签；同理，内层标签为“晚辈”，嵌套一层为子标签，两层为孙子标签，三层及三层以上为祖孙标签。后代选择器利用父子关系，由“长辈”到“晚辈”的顺序，依次以空格间隔来定位“晚辈”标签中内容。基本语法：父标签名 子标签名 {属性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 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>
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>
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可以调整顺序进行测试。
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>
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 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>
标签：顺序 外观 规则 ntc get over span 标准 多项选择
原文地址：https://www.cnblogs.com/snow-lanuage/p/10393939.html
