选择器和文本标签
选择器的辨别
1.Type Selector:
plate
2.Type Selector:
bento
3.ID Selector:
#fancy
4.Descendant(后代)Selector:
plate apple
5.Combine the Descendant & ID Selectors(合并后代和ID选择器):
#fancy pickle
6.Class Selector:
.small
7.Combine the Class Selector:
orange.small
8.bento orange
9.Comma Combinator:
plate,bento
10.(The Universal Selector)通用选择器:
*
11.Combine the Universal Selector()
plate *
12.Adjacent Sibling Selector(相邻选择器):
plate+apple
13.General Sibling Selector(一般兄弟姐妹选择器):
bento~pickle
14.Child Selector:
plate>apple
15.First Child Pseudo-selector:
p :first-child
16.Only Child Pseudo-selector:
plate :only-child
17.Last Child Pseudo-selector
.small:last-child
18.Nth Child Pseudo-selector:
:nth-child(3)
19.Nth Last Child Selector
:nth-last-child(4)
20.First of Type Selector
apple:first-of-type
21.Nth of Type Selector
:nth-of-type(even)
22.Nth-of-type Selector with Formula(带式选择器式选择器)
:nth-of-type(2n+3)
23.Only of Type Selector
apple:only-of-type
24.Last of Type Selector
.small:last-of-type
25.Empty Selector
bento:empty
26.Negation Pseudo-class:否定伪类
apple:not(.small)
选择器的分类
| 类型 | 语法 |
|---|---|
| 元素选择器 | 标签名 |
| 类选择器 | . 类名 |
| id选择器 | #id名 |
| 复合选择器 | A.B |
| 群组选择器 | A,B |
| 通用选择器 | * |
| 后代选择器 | A B(>表示只是子一代) |
| 选择第一个子标签 | :first-child |
| 选择最后一个子标签 | :last-child |
| 选择指定位置的子元素 | :nth-child(A) |
| 选择指定类型的子元素 | :first-of-type，:last-of-type，:nth-of-type |
| 兄弟选择器 | +表示后边一个元素，~表示后面所有元素 |
| 否定伪类 | :not(X) |
CSS权重的等级划分
- !important，加在样式属性值后，权重值为 10000
- 内联样式，如：style=””，权重值为1000
- ID选择器，如：#content，权重值为100
- 类，伪类和属性选择器，如： content、:hover 权重值为10
- 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
- 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
文本标签
<em>着重点通常为斜体
<strong>重要性通常为粗体
<i><b>类似于上边没有语义只是斜体和粗体
<small>小一个字号
<cite>使用cite标签可以指明对某内容的引用或参考。
<blockquote>和<q>
blockquote和q表示标记引用的文本。
blockquote用于长引用，q用于短引用。
上标下标
<ins>下划线<del>删除线
<ul>无序列表
<ol>有序列表
<dl><dt><dd>定义列表
文本格式化
px:像素
em：相对于font-size来说：1em = 1font-size
RGB
– RGB(100%,0%,0%)
– RGB(0,255,0)
RGBA
RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度， 透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。– RGBA(255,100,5,0.5)
字体
font-size:设置大小
font-family:设置类型，可以多个类型例如：p{font-family:Arial , Helvetica , sans-serif}
font-style用来指定文本的斜体。
指定斜体：font-style:italic
指定非斜体：font-style:normal
font-weight用来指定文本的粗体。
指定粗体：font-weight:bold
指定非粗体：font-weight:normal
font语法：
font:加粗 斜体 小型大写 大小/行高 字体
这里前边几个加粗、斜体和小型大写的顺 序无所谓，也可以不写，但是大小和字体 必须写且必须写到后两个。
line-height用于设置行高，行高越大则行 间距越大。
行间距 = line-height – font-size
text-transform样式用于将元素中的字母全都变成大写。
大写：text-transform:uppercase
小写：text-tansform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none
text-decoration属性，用来给文本添加各 种修饰。通过它可以为文本的上方、下方 或者中间添加线条。
可选值：
underline
overline
line-through
none
letter-spacing用来设置字符之间的间距。
word-spacing用来设置单词之间的间距。
这两个属性都可以直接指定一个长度或百 分数作为值。正数代表的是增加距离，而 负数代表减少距离。
text-align用于设置文本的对齐方式。
可选值：
left：左对齐
right：右对齐
justify：两边对齐
center：居中对齐
text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一 行生效
