这篇文章主要介绍在html中使用CSS的方式有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在html中使用css的三种方式：1、行内样式：同过元素的style属性来设置<
这篇文章主要介绍在html中使用CSS的方式有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
在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}
h2,.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: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>
<h2></h2>
<p></p> <!--选中-->
<p></p>
<div>
<h3></h3>
<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>
<h2></h2>
<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>的顺序，后面的优先级更高（后渲染的样式会覆盖之前的样式）。
以上是“在html中使用css的方式有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网JavaScript频道！
--结束END--
本文标题: 在html中使用css的方式有哪些
本文链接: https://www.lsjlt.com/news/75662.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0