CSS 样式的使用方式、选择器

时间:2021-05-08

在html中使用css的三种方式:

1、行内样式:同过元素的style属性来设置

<p style="font-size:20px; color:red">hello</p>

属性之间分号隔开。

2、内部样式:在<head>的<style>元素中定义css样式

<style> p{font-size: 20px;color: red} </style>

3、外部样式:在css文件中定义css样式,然后在html的<head>中通过<style>引入外部样式表

p{font-size: 20px;color: red}<link href="xxx.css" type="text/css" rel="stylesheet" />

css文件中不加<style>标签,直接写css样式就ok。

内部|外部样式的语法: 选择器 {属性名1:属性值1; 属性名2:属性值2}

三种方式,属性之间都是分号隔开。

css注释:

css选择器

1、元素选择器、类选择器、id选择器

p{color: red} .red{color: red} #user{color: red}

2、通用选择器、分组选择器

*{color: red} h1,.red{color: red}

3、后代选择器、子选择器、相邻兄弟选择器、后续兄弟选择器

div p{color: red} div>p{color:red} div+p{color:red} div~p{color:red}

4、属性选择器

[attr] [attr=value] [attr^=value] [attr|=value] [attr$=value] [attr*=value] [attr~=value]

属性选择器常和其它选择器一起使用,比如:

button[type="button"]

属性选择器中,attr不能加引号,value可引可不引。

5、<a>链接

a:link /*所有未访问过的<a>*元素/a:hover a:active a:visited

这4个设置的是<a>元素不同时期的样式。

:hover这个伪类所有元素都可以使用。

6、表单元素

:focus :checked :enabled :disabled :read-only

可单独使用,也可配合表单元素使用:

:focus{ }input:focus{ }

7、空元素

:empty{ } p:empty{ }

空元素指的是没有任何属性、没有内容的元素,示例:<p></p>。

8、非

:not(p)

()中尽量只使用元素选择器,使用其他选择器容易出错。

9、type系列

p:first-of-type p:nth-of-type(n) p:nth-last-of-type(n) p:last-of-type p:only-of-type

示例:

p:first-of-type{color:red}<body> <h1></h1> <p></p> <!--选中--> <p></p> <div> <h2></h2> <p></p> <!--选中--> <p></p> </div></body>

只要是同级别的<p>中的第一个即可。

10、child系列

p:first-child p:nth-child(n) p:nth-last-child(n) p:last-child p:only-child

示例:

p:first-child{color:red}<body> <h1></h1> <p></p> <p></p> <div> <p></p> <!--选中--> <p></p> </div></body>

11、首字、首行

p:first-letter
p:first-line

12、:before :after

p:before{ content:"hello "}p:after{ content:" byebye"}

添加的内容默认是行内元素,但会和<p>在同一行显示(相当于把添加的内容放到<p>元素内的最前|后面),添加的并不是一个真正的元素,所以叫做伪元素。

可以设置为块级,添加的内容会作为块级元素显示:

p:before{ content:"hello "; display: block}p:after{ content:" byebye"; display: block}

可以给添加的元素设置样式:

p:before{ content:"hello "; display: block; font-size: 20px; color:red}

添加图片:

p:before{ content:""; display: block; width: 100px; height: 100px background-image: url("1.png");}

清除浮动:

p:before{ content:""; clear: both}

伪元素可以使用单冒号,也可以使用双冒号。

:before <=> ::before:after <=> ::after

带冒号的选择器中,有4个伪元素:first-letter、:first-line、:before、:after,其余都是伪类。

选择器可以搭配使用。

在同种方式中(都是内部|外部样式),优先级id选择器最高,类选择器次之,属性选择器最低。(定位越具体、详细的,优先级越高)

如果使用了相同的css属性,优先级行内最高,内部、外部优先级相同,看<head>中<link />、<style>的顺序,后面的优先级更高(后渲染的样式会覆盖之前的样式)。

总结

以上所述是小编给大家介绍的CSS 样式的使用方式、选择器 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章