伪类和伪元素
有时候,你需要选择本身没有标签,但是 仍然易于识别的网页部位,比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选择器:伪类和伪元素
给链接定义样式:
有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4种不同的状态。
正常链接
–a:link
访问过的链接
a:visited(只能定义字体颜色)
鼠标滑过的链接
–a:hover
正在点击的链接
–a:active
获取焦点
–:focus
指定元素前
–:before
指定元素后
–:after
选中的元素
–::selection
给段落定义样式:
首字母
–:first-letter
首行
–:first-line
属性选择器
属性选择器可以挑选带有特殊属性的标签。
语法:
[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]
子元素选择器:
子元素选择器可以给另一个元素的子元素设置样式。
语法:
父元素 > 子元素{}
比如body > h1将选择body子标签中的所有h1标签。
其他子元素选择器:
:first-child
–选择第一个子标签
:last-child
–选择最后一个子标签
:nth-child
–选择指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type
–选择指定类型的子元素
兄弟选择器:
除了根据祖先父子关系,还可以根据兄弟关系查找元素。
语法:
–查找后边一个兄弟元素
兄弟元素 + 兄弟元素{}
–查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{}
否定伪类:
否定伪类可以帮助我们选择不是其他东西的某件东西。
语法:
:not(选择器){}
比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。
继承:
就像父亲的财产会遗传给儿子一样,在CSS中祖先元素的样式 同样也会被子元素继承。
继承是指应用在一个标签上的那些CSS样式会同时被应用到其 内嵌标签上。
比如为父元素设置了字体颜色,子元素也会应用上相同的颜色。
当然并不是所有的样式都会被继承,这一点我们讲到具体样式时,再去讨论。
权重的计算:
–内联样式:权重是1000
–id选择器:权重是 100
–类、属性、伪类选择器:权重是 10
–元素选择器:权重是 1
–通配符:权重是0
计算权重需要将一个样式的全部选择器相加,比如上边的body h1的权重是20,h1的权重是10,所以第一个选择器设置的样 式会优先显示。
<em>和<strong>:
em标签用于表示一段内容中的着重点。
strong标签用于表示一个内容的重要性。
这两个标签可以单独使用,也可以一起使用。
通常em显示为斜体,而strong显示为粗体.
<i>和<b>:
i标签会使文字变成斜体。
b标签会使文字变成粗体。
这两个标签和em和strong类似,但是这两个标签没有语义。
所以根据html5标准,当我们只想设置文本特殊显示,而不需要强调内容时就可以使 用i和b标签。
<small>:
small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。
浏览器在显示small标签时会显示一个比父元素小的字号。
<cite>:
使用cite标签可以指明对某内容的引用或参考。例如,戏剧、文章或图书的标题,歌 曲、电影、照片或雕塑的名称等。
<blockquote>和<q>:
blockquote和q表示标记引用的文本。
blockquote用于长引用,q用于短引用。
在两个标签中还可以使用cite属性来表示引用的地址。
<ins>和<del>:
ins表示插入的内容,显示时通常会加上下 划线。
del表示删除的内容,显示时通常会加上删 除线。
<code>和<pre>:
如果你的内容包含代码示例或文件名,就 可以使用code元素。
pre元素表示的是预格式化文本,可以使用
pre包住code来表示一段代码。
<pre>
<code>
functionfun(){ alert("hello");
}
</code>
</pre>
有序列表:
使用ol和li来创建一个有序列表;
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
无序列表:
使用ul和li来创建一个无序列表。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
定义列表:
可以用dl、dd、dt来创建一个列表。
单位:
px
如果我们将一个图片放大的话,我们会发现一个图片是有一个一个的小色块构成的,这一个小色块就是一个像素,也就是1px,对于不同的显示器来说一个像素 的大小是不同的。
百分比
也可以使用一个百分数来表示一个大小,百分比是相对于父元素来说的,如果父元素使用的大小是16px, 则100%就是16px,200%就是32px。
em
em和百分比类似,是相对于font-size说的
1em = 1font-size
颜色:
17中颜色:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。
十六进制颜色:
用的最多的颜色是十六进制符号。一个颜色值,比如:#6600FF实际上包含了三组十六进制的数字。
上边的例子中66代表红色的浓度,00代表绿色的浓度,FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。
如果每一组数中的两个数字都相同,就可以把十六进制的数字缩短为只有3个字符,如将#6600FF缩短为#60F。
RGB值:
也可以使用计算机中常用的RGB值来表示颜色。可以使用0~255的数值,也可以使用0%~100%的百分比数。
– 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}
– 上边这行代码指定了p标签中使用名为arial作 为字体
•一般来说只有用户计算机中安装了我们指
定的字体时,它才会显示,否则这行代码 是没有意义的。