什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素，如颜色，大小，粗细，字体，边框，布局编排等等
CSS样式有哪几种?具体是怎样表现的？
- 内联样式（inline-style），位于 HTML元素标签内部。
- 内部样式表（internal style sheet），位于 <head> 标签内部。
- 外部样式表（External style sheet），以.css文件形式单独存在。
<--!内联样式--> <p style="color:sienna;margin-left:20px">这是一个段落。</p> <--!内部样式表--> <style> 选择器 {属性名称: 属性值;} h2 {color: red;} </style> <--!外部样式表，HTML引用声明--> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> /* .css文件 */ h {color:sienna;} p {margin-left:20px;} body {background-image:url(/images/back40.gif);}
CSS样式优先级别
- 内联样式（inline-style）> 内部样式表（internal style sheet）> 外部样式表（External style sheet）> 浏览器默认样式
- 同一样式同一选择器的重复渲染，后者会覆盖前者
- 同一样式不同选择器，Id选择器的优先级大于class选择器
- 如果样式被后者覆盖，如还想使用初始样式。可以加上 ！important强制使用当前样式
<style> body { color: green; } <--!如下样式会覆盖上面body样式--> .pink-text{ color:pink; } </style> <body> <h1 class="pink-text">Hello World!</h1> </body> .pink-text { color: pink; } <--!同样下面的会覆盖前面的，而不会取决class在元素中的先后--> .blue-text{ color:blue; } </style> <body> <h1 class="blue-text pink-text ">Hello World!</h1> </body> <--! id优先级>class优先级 --> #orange-text{ color:orange; } .pink-text { color: pink; } .blue-text { color: blue; } </style> <body> <h1 class="pink-text blue-text" id='orange-text'>Hello World!</h1> </body> #orange-text { color: orange ; } <--!尚方宝剑在手，此时又是他生效了哦--> .pink-text { color: pink !important; } .blue-text { color: blue; } </style> <h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
CSS选择器
1.标签选择器
p 选择所有<p>元素 { background-color:yellow; } h1,p 选择所有<h1>元素和<p>元素 { background-color:yellow; } div p 选择<div>元素内的所有<p>元素 { background-color:yellow; } div>p 选择所有父级是 <div> 元素的 <p> 元素 { background-color:yellow; } div+p 选择所有紧接着<div>元素之后的<p>元素 { background-color:yellow; }
2.id选择器
#firstname 选择所有id="firstname"的元素
{
background-color:yellow;
}
<--! 注意同一个ID只能在一个HTML文件中出现一次，可联想为ID card -->
3.class选择器
.intro 选择所有class="intro"的元素 { background-color:yellow; }
<--! 注意同一个class在一个HTML文件中可多次使用 -->
4.属性选择器
a[target] 选择所有带有target属性元素
{
background-color:yellow;
}
a[target=_blank] 选择所有使用target="-blank"的元素
{
background-color:yellow;
}
[title~=flower] 选择标题属性包含单词"flower"的所有元素
{
background-color:yellow;
}
[lang|=en] 选择一个lang属性的起始值="EN"的所有元素
{
background-color:yellow;
}
5.伪元素和伪类
伪元素：控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。如first-letter，first-line等。
伪类：由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类 。 如anchor，first-child等。
<--! 伪元素使用方法 --> selector:pseudo-element {property:value;} selector.class:pseudo-element {property:value;} p:first-letter { color:#ff0000; font-size:xx-large; } <--! 伪类使用方法 --> selector:pseudo-class {property:value;} selector.class:pseudo-class {property:value;} <html> <head> <style> <--! p标签第一行变蓝 --> p:first-child { color:blue; } </style> </head> <body> <p>I am a strong man.</p> <p>I am a strong man.</p> </body> </html>
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：
- Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
- Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content（内容） - 盒子的内容，显示文本和图像
重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。
下面的例子中的元素的总宽度为300px：
250px;
padding:10px;
border:5px solid gray;
margin:10px;
CSS Positioning(定位)
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。他们也有不同的工作方式，这取决于定位方法.
有四种不同的定位方法。
1.Static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
2.Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
3.Relative 定位
相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
4.Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2
{
position:absolute;
left:100px;
top:150px;
}
Absolutely定位使元素的位置与文档流无关，因此不占据空间。Absolutely定位的元素和其他元素重叠。
5.重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
CSS Float(浮动)
CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。默认块级标签会独占一行，用float可以让块级标签浮动在一起。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
<--! 右浮动 --> img { float:right; } <--! 并列浮动 --> .thumbnail { float:left; 110px; height:90px; margin:5px; } <--! 清除浮动 --> .text_line { clear:both; }
最后，关于伪类和伪元素的区别，可以参考如下链接：
1.CSS3伪类和伪元素的特性和区别：https://www.cnblogs.com/ihardcoder/p/5294927.html
2.详解 CSS 属性 - 伪类和伪元素的区别：https://segmentfault.com/a/1190000000484493