标签：bis css常用 str 一个 第一个 black 它的 div html
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
编写CSS样式：
当同一个 HTML 元素被不止一个样式定义时，内联样式（在 HTML 元素内部）拥有最高的优先权，接着是<head>标签中的样式声明，再是外部样式表(通过link标签引入的)中的样式声明，最后浏览器中的样式声明(缺省值)。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式，以达到使标记更加简洁的目的。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 li strong { 6 font-style: italic; 7 font-weight: normal; 8 } 9 </style> 10 </head> 11 <body> 12 <p> 13 <strong> 14 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用 15 </strong> 16 </p> 17 <ol> 18 <li> 19 <strong> 20 我是斜体字。这是因为 strong 元素位于 li 元素内。 21 </strong> 22 </li> 23 <li>我是正常的字体。</li> 24 </ol> 25 </body>
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 #i1{ 6 background-color: indianred; 7 height: 40px; 8 } 9 #d2{ 10 background-color: aquamarine; 11 height: 40px; 12 } 13 #i3{ 14 background-color: bisque; 15 height: 40px; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="i1">1</div> 21 <span id="d2">2</span> 22 <div id="i3">3</div> 23 </body>
在 CSS 中，类选择器以一个点号显示：
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 .c1{ 6 background-color: indianred; 7 height: 40px; 8 } 9 .c2{ 10 background-color: aquamarine; 11 height: 40px; 12 } 13 .c3{ 14 background-color: bisque; 15 height: 40px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="c1">1</div> 21 <span class="c2">2</span> 22 <div class="c3">3</div> 23 </body>
类名的第一个字符不能使用数字！
对应的标签才会应用样式。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 div{ 6 background-color: bisque; 7 color: red; 8 } /*设置所有div标签的样式*/ 9 span{ 10 background-color: red; 11 color: black; 12 } /*设置所有span标签的样式*/ 13 </style> 14 </head> 15 <body> 16 <div id="i1">1</div> 17 <span id="d2"> 18 2 19 <div>夹在span中的div也会应用样式</div> 20 </span> 21 <div id="i3">3</div> 22 </body>
层级间用空格符号分隔，最底层的标签才会被应用。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 #i1 div{ 6 background-color: aquamarine; 7 color: red; 8 } /*设置i1下div标签的样式*/ 9 10 span div{ 11 background-color: bisque; 12 color: red; 13 } /*设置span标签下的div标签的样式*/ 14 .c1 div{ 15 background-color: olivedrab; 16 color: red; 17 } /*设置c1下div标签的样式*/ 18 .c2 div span{ 19 background-color: sienna; 20 color: black; 21 } /*c2下的div下的span标签的样式*/ 22 </style> 23 </head> 24 <body> 25 <div id="i1"> 26 1 27 <div >夹在id=i1的div标签下的div标签才会应用样式</div> 28 </div> 29 <div id="i2"> 30 1 31 <div >夹在id=i2的div标签下的div标签不会应用样式</div> 32 </div> 33 <span> 34 2 35 <div>夹在span中的div才会应用样式</div> 36 </span> 37 <div class="c1"> 38 3 39 <div>夹在class=c1的div标签下的div标签才会应用样式</div> 40 </div> 41 <div class="c2"> 42 3 43 <div>夹在class=c2的div标签下的div标签不会应用样式</div> 44 </div> 45 <div class="c2"> 46 3 47 <div> 48 夹在class=c2的div标签下的div标签不会应用样式 49 <span> 50 夹在class=c2下的div标签下的div标签下的span标签会应用样式 51 </span> 52 </div> 53 </div> 54 </body>
每个标签都会应用样式。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 #i1,#i2,#i3{ 6 background-color: indianred; 7 height: 40px; 8 } 9 .c1,.c2,.c3{ 10 background-color: aquamarine; 11 height: 40px; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="i1">1</div> 17 <span id="i2">2</span> 18 <div id="i3">3</div> 19 <div class="c1">1</div> 20 <span class="c2">2</span> 21 <div class="c3">3</div> 22 </body>
height: 设置高度，单位可以是像素和百分比
width: 设置宽度，单位可以是像素和百分比
border: solid orangered; 设置边界颜色
color: 设置字体颜色
font-size: 设置字体大小
text-align: center; 设置水平方向居中
line-height: 100px; 根据标签高度来确定文字垂直方向的位置
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
标签：bis css常用 str 一个 第一个 black 它的 div html
原文地址：https://www.cnblogs.com/Druidchen/p/8979716.html
