1、CSS基本概念
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
编写CSS样式：
- 在标签中用style编写(内联样式)；
- 在head中用style编写(内部样式表)；
当同一个 HTML 元素被不止一个样式定义时，内联样式（在 HTML 元素内部）拥有最高的优先权，接着是<head>标签中的样式声明，再是外部样式表(通过link标签引入的)中的样式声明，最后浏览器中的样式声明(缺省值)。
2、CSS选择器
2.1 派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式，以达到使标记更加简洁的目的。
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>2.2 ID选择器
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>2.3 类选择器
在 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>类名的第一个字符不能使用数字！
2.4 标签选择器
对应的标签才会应用样式。
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 ????????219 ????????<div>夹在span中的div也会应用样式</div>20 ????</span>21 ????<div id="i3">3</div>22 </body>2.5 层级选择器
层级间用空格符号分隔，最底层的标签才会被应用。
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 ????????127 ????????<div >夹在id=i1的div标签下的div标签才会应用样式</div>28 ????</div>29 ????<div id="i2">30 ????????131 ????????<div >夹在id=i2的div标签下的div标签不会应用样式</div>32 ????</div>33 ????<span>34 ????????235 ????????<div>夹在span中的div才会应用样式</div>36 ????</span>37 ????<div class="c1">38 ????????339 ????????<div>夹在class=c1的div标签下的div标签才会应用样式</div>40 ????</div>41 ????<div class="c2">42 ????????343 ????????<div>夹在class=c2的div标签下的div标签不会应用样式</div>44 ????</div>45 ????<div class="c2">46 ????????347 ????????<div>48 ????????????夹在class=c2的div标签下的div标签不会应用样式49 ????????????<span>50 ????????????????夹在class=c2下的div标签下的div标签下的span标签会应用样式51 ????????????</span>52 ????????</div>53 ????</div>54 </body>2.6 组合选择器
每个标签都会应用样式。
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>3、CSS常用属性设置
height: 设置高度，单位可以是像素和百分比
width: 设置宽度，单位可以是像素和百分比
border: solid orangered; ?设置边界颜色
color: 设置字体颜色
font-size: 设置字体大小
text-align: center; ?设置水平方向居中
line-height: 100px; ?根据标签高度来确定文字垂直方向的位置
4、CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
51-Web基础-CSS
原文地址：https://www.cnblogs.com/Druidchen/p/8979716.html