CSS 是什么？
CSS是Cascading Style Sheets的简称，中文称为层叠样式表。
属性和属性值用冒号隔开，以分号结尾。
CSS 四种引入方式：
1.行内式
行内式是在标签的style属性中设定CSS样式。
|
1 |
<div style="..."></div> |
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。
|
1 2 3 4 5 6 |
<head> ... <style type="text/css"> ...此处写CSS样式 </style> </head> |
3.导入式
将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。
导入式会在整个网页装载完后再装载CSS文件。
|
1 2 3 4 5 6 |
<head> ... <style type="text/css"> @import "My.css"; 此处注意.css文件的路径 </style> </head> |
4.链接式
将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。
链接式会以网页文件主体装载前装载CSS文件。
|
1 2 3 4 |
<head> ... <link href="My.css" rel="stylesheet" type="text/css"> </head> |
样式应用顺序：
- 行内样式优先级最高
- 针对相同的样式属性，不同的样式属性将以合并的方式呈现
- 相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
!important
- 指定样式规则应用最优先
|
1 2 3 |
.nick { color: yellow !important; } |
|
选择器（Selector） |
基本选择器：
1.通用元素选择器
* 表示应用到所有的标签。
|
1 |
* {color: yellow} |
2.标签选择器
匹配所有使用 div 标签的元素（可以匹配所有标签）
|
1 |
div {color: yellow} |
3.类选择器
匹配所有class属性中包含info的元素。
语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）
|
1 2 |
.Mycolor {color: yellow} <h3 class="Mycolor">nick</h3> |
4.ID选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
语法：#ID名{样式}（ID名不能以数字开头）
|
1 2 |
#Mycolor {color: yellow} <h3 id="Mycolor">Nick.</h3> |
组合选择器：
1.多元素选择器
同时匹配h3,h4标签，之间用逗号分隔。
|
1 2 3 |
h3,h4 {color: yellow;} <h3>Nick</h3> <h4>Jenny</h4> |
2.后代元素选择器
匹配所有div标签里嵌套的P标签，之间用空格分隔。
|
1 2 3 4 5 6 7 8 |
div p {color: yellow;} <div> <p>Nick</p> <div> <p>Nick</p> </div> </div> |
3.子元素选择器
匹配所有div标签里嵌套的子P标签，之间用>分隔。
|
1 2 3 4 5 6 |
div > p {color: yellow;} <div> <p>Nick</p> <p>Nick</p> </div> |
4.毗邻元素选择器
匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。
|
1 2 3 4 |
div + p {color: yellow;} <div>Nick</div> <p>Nick</p> |
属性选择器：
1.[title] & P[title]
设置所有具有title属性的标签元素；
设置所有具有title属性的P标签元素。
|
1 2 3 4 5 6 7 8 9 10 11 |
[title] { color: yellow; } p[title] { color: yellow; } <div title>Nick</div> <p title>Nick</p> |
2.[title=Nick]
设置所有title属性等于“Nick”的标签元素。
|
1 2 3 4 5 6 |
[title="Nick"] { color: yellow; } <p title="Nick">Nick</p> |
3.[title~=Nick]
设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。
|
1 2 3 4 5 6 7 |
[title~="Nick"] { color: yellow; } <p title="Nick Jenny">Nick</p> <p title="Jenny Nick">Nick</p> |
4.[title|=Nick]
设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"Nick"开头的标签元素。
例：lang属性："en"、"en-us"、"en-gb"等等
|
1 2 3 4 5 6 |
[title|="Nick"] { color: yellow; } <p title="Nick-Jenny">Nick</p> |
5.[title^=Nick]
设置属性值以指定值开头的每个标签元素。
|
1 2 3 4 5 6 |
[title^="Nick"] { color: yellow; } <p title="NickJenny">Nick</p> |
6.[title$=Nick]
设置属性值以指定值结尾的每个标签元素。
|
1 2 3 4 5 6 |
[title$="Nick"] { color: yellow; } <p title="JennyNick">Nick</p> |
7.[title*=Nick]
设置属性值中包含指定值的每个元素
|
1 2 3 4 5 6 |
[title*="Nick"] { color: yellow; } <p title="SNickJenny">Nick</p> |
伪类选择器：
1. link、hover、active、visited
- a:link（未访问的链接状态）,用于定义了常规的链接状态。
- a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
- a:active（在链接上按下鼠标时的状态）。
- a:visited（已访问过的链接状态）,可以看出已经访问过的链接。
|
1 2 3 4 5 6 |
a:link{color: black} a:hover{color: yellow} a:active{color: blue} a:visited{color: red} <a href="#">Nick</a> |
2. before、after
- P:before 在每个<p>元素的内容之前插入内容;
- P:after 在每个<p>元素的内容之后插入内容。
|
常用属性 |
1. 颜色属性：
color
- HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
- RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
- RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
- HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
- HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间。）
transparent
- 全透明，使用方式：color: transparent;
opacity
- 元素的透明度，语法：opacity: 0.5;
- 属性值在0.0到1.0范围内，0表示透明，1表示不透明。
- filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。
2. 字体属性:
font-style: 用于规定斜体文本
- normal 文本正常显示
- italic 文本斜体显示
- oblique 文本倾斜显示
font-weight: 设置文本的粗细
- normal（默认）
- bold（加粗）
- bolder（相当于<strong>和<b>标签）
- lighter （常规）
- 100 ~ 900 整百（400=normal，700=bold）
font-size: 设置字体的大小
- 默认值：medium
- <absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
- <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
- <percentage>百分比指定文字大小。
- <length>用长度值指定文字大小，不允许负值。
font-family：字体名称
- 使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）
font：简写属性
- 语法：font：字体大小/行高 字体;（字体要在最后）
3. 文本属性:
white-space: 设置元素中空白的处理方式
- normal：默认处理方式。
- pre：保留空格，当文字超出边界时不换行
- nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
- pre-wrap：保留空格，当文字碰到边界时换行
- pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行
direction: 规定文本的方向
- ltr 默认，文本方向从左到右。
- rtl 文本方向从右到左。
text-align: 文本的水平对齐方式
- left
- center
- right
line-height: 文本行高
- normal 默认
vertical-align: 文本所在行高的垂直对齐方式
- baseline 默认
- sub 垂直对齐文本的下标，和<sub>标签一样的效果
- super 垂直对齐文本的上标，和<sup>标签一样的效果
- top 对象的顶端与所在容器的顶端对齐
- text-top 对象的顶端与所在行文字顶端对齐
- middle 元素对象基于基线垂直对齐
- bottom 对象的底端与所在行的文字底部对齐
- text-bottom 对象的底端与所在行文字的底端对齐
text-indent: 文本缩进
letter-spacing: 添加字母之间的空白
word-spacing: 添加每个单词之间的空白
text-transform: 属性控制文本的大小写
- capitalize 文本中的每个单词以大写字母开头。
- uppercase 定义仅有大写字母。
- lowercase 定义仅有小写字母。
text-overflow: 文本溢出样式
- clip 修剪文本。
- ellipsis 显示省略符号...来代表被修剪的文本。
- string 使用给定的字符串来代表被修剪的文本。
text-decoration: 文本的装饰
- none 默认。
- underline 下划线。
- overline 上划线。
- line-through 中线。
text-shadow：文本阴影
- 第一个参数是左右位置
- 第二个参数是上下位置
- 第三个参数是虚化效果
- 第四个参数是颜色
- text-shadow: 5px 5px 5px #888;
word-wrap：自动换行
- word-wrap: break-word;