前端 3

伪类和伪元素

有时候,你需要选择本身没有标签,但是 仍然易于识别的网页部位,比如段落首行 或鼠标滑过的连接。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作 为字体

•一般来说只有用户计算机中安装了我们指

定的字体时,它才会显示,否则这行代码 是没有意义的。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 4,919评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 7,017评论 0 7
  • 标签 文本标签斜粗标记 表示一段内容中的着重点斜体 表示一个内容的重要性粗体 斜粗标记 使文字变成斜体 使文字变成...
    錦魚阅读 2,953评论 0 0
  • 1.元素选择器:标签名{},选择页面中的所有标签, 2.类选择器:.classname{},会选择.class页面...
    爱你如阅读 1,661评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,716评论 1 92

友情链接更多精彩内容