CSS基础
初识 CSS
层叠样式表（英语：Cascading Style Sheets，简写CSS）一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
h1 {color:red; font-size:14px;}
详情请参阅维基百科或者百度百科。
CSS引入方式
<p style="background-color: red">Hello Worldp>行内式
<head> <meta charset="UTF-8"> <title>Titletitle> <style> p{ background-color: red; } style> head>嵌入式
<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 style>导入式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>链接式（推荐使用）
注意：为什么推荐使用链接式引入css渲染html
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
CSS的选择器
基本选择器
组合选择器
属性选择器
伪类与伪元素选择器
css引入伪类和伪元素概念是为了格式化文档树以外的信息。
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
伪类选择器：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器title>
<style>
p:first-letter {color:red;}
style>
head>
<body>
<p>Hello World, and wish you have a good day!p>
body>
html>
伪元素选择器示例1
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器title>
<style>
li:first-child{color: red;}
style>
head>
<body>
<ul>
<li>我是第一个li>
<li>我是第二个li>
ul>
body>
html>
伪元素选择器示例2
示例效果：
Hello World, and wish you have a good day!
- 我是第一个
- 我是第二个
伪元素使用单冒号还是双冒号
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| .class | .intro | 选择 class="intro" 的所有元素。 |
| #id | #firstname | 选择 id="firstname" 的所有元素。 |
| * | * | 选择所有元素。 |
| element | p | 选择所有 元素。 |
| element,element | div,p | 选择所有 元素和所有 元素。 |
| element element | div p | 选择 元素内部的所有 元素。 |
| element>element | div>p | 选择父元素为 元素的所有 元素。 |
| element+element | div+p | 选择紧接在 元素之后的所有 元素。 |
| [attribute] | [target] | 选择带有 target 属性所有元素。 |
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
| :visited | a:visited | 选择所有已被访问的链接。 |
| :active | a:active | 选择活动链接。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
| :focus | input:focus | 选择获得焦点的 input 元素。 |
| :first-letter | p:first-letter | 选择每个 元素的首字母。 |
| :first-line | p:first-line | 选择每个 元素的首行。 |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 元素。 |
| :before | p:before | 在每个 元素的内容之前插入内容。 |
| :after | p:after | 在每个 元素的内容之后插入内容。 |
| :lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 元素。 |
| element1~element2 | p~ul | 选择前面有 元素的每个
|
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 元素。 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 元素。 |
| [attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 元素。 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 元素的每个 元素。 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 元素的每个 元素。 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 元素的每个 元素。 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 元素。 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 元素的每个 元素。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 元素。 |
| :root | :root | 选择文档的根元素。 |
| :empty | p:empty | 选择没有子元素的每个 元素（包括文本节点）。 |
| :target | #news:target | 选择当前活动的 #news 元素。 |
| :enabled | input:enabled | 选择每个启用的 元素。 |
| :disabled | input:disabled | 选择每个禁用的 元素 |
| :checked | input:checked | 选择每个被选中的 元素。 |
| :not(selector) | :not(p) | 选择非 元素的每个元素。 |
| ::selection | ::selection | 选择被用户选取的元素部分。 |
了解更多请参考关于伪类与伪元素的文章：总结伪类与伪元素
CSS优先级和继承
继承
继承可以这样理解：后代的元素使用祖先的CSS样式，但是继承的优先级非常低，任何显示申明的规则都可以覆盖其继承样式。
注意：CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序.
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是:
- 内联样式表的权值最高 style=""－－－－－－－－1000;
- 统计选择符中的ID属性个数 #id －－－－－－－－－－100
- 统计选择符中的CLASS属性个数 .class －－－－－－－－－10
- 统计选择符中的HTML标签名个数 p －－－－－－－－－－－ 1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较.
当存在一个id 多个class类似的情况，这时候不需要相加比较，就是id权重最高。
- 文内的样式优先级为1000，所以始终高于外部定义。
- 有!important声明的规则高于一切。
- 如果!important声明冲突，则比较优先权。
- 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
- 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
CSS常用属性
<div style="color:blueviolet">hello lcgdiv> <div style="color:#ffee33">hello lcgdiv> <div style="color:rgb(255,0,0)">hello lcgdiv> <div style="color:rgba(255,0,0,0.5)">hello lcgdiv>颜色
CSS颜色16进制值
字体 font
背景属性
一张图片满屏设置
text-align 属性规定元素中的文本的水平对齐方式。
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
文本其他常用属性
vertical-align 垂直高度
<style> #i1{vertical-align: bottom;} style> <div>这日子没发过了<img src="riz.png" alt="" id="i1">div>
border边框属性
ul,ol{ list-style: decimal-leading-zero; list-style: none; <br> list-style: circle; list-style: upper-alpha; list-style: disc; }列表属性
display
外边距(margine)与内边距(padding)
盒子模型
margin : 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding : 用于控制内容与边框之间的距离；
Border(边框) : 围绕在内边距和内容外的边框。
Content(内容) : 盒子的内容，显示文本和图像。
注意：边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，解决方法是将body的设置margin设置为0
body{
margin: 0;
}
.....
float浮动
基本浮动规则：
先来了解一下block元素和inline元素在文档流中的排列方式。
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。一般block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
? 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。
示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
margin: 0;
}
.r1{
width: 300px;
height: 100px;
background-color: #7A77C8;
float: left;
}
.r2{
width: 200px;
height: 200px;
background-color: wheat;
/*float: left;*/
}
.r3{
width: 100px;
height: 200px;
background-color: darkgreen;
float: left;
}
style>
head>
<body>
<div class="r1">div>
<div class="r2">div>
<div class="r3">div>
body>
html>
float示例
都不浮动
r2不浮动r1 r3浮动
都浮动
解决父级坍塌：
.clearfix:after{
content: '';
display: block;
clear: both;
position 定位
position(定位)
1 static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
2 position: relative／absolute
position:relative 相对定位。
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
position:absolute 绝对定位。
设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
position:fixed
对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
补充
透明度：
opacity: 0.5;
持续更新中......