CSS的样式引入方式和选择器
程序员文章站
2022-04-27 22:31:07
...
CSS的样式引入方式和选择器
引入方式
CSS样式有三种引入方式:外部样式,内部样式,内联样式
内联样式
就是将样式直接写在标签的的style属性里,优先级最高。
但是可读性和代码复用程度最差。
<p style="color: red">内联</p>
内部样式
将样式写在style标签内,然后通过选择器渲染到对应标签上,可读性好,复用性高
<style>
<!--内部样式-->
p{
font-size: 40px;
}
</style>
外部样式
将样式写在CSS文件里然后再需要使用这些样式的html文档中的link标签导入,复用性最高。
<link rel="stylesheet" href="url">
样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可以在三个不同的位置设置元素的样式属性</title>
<!--外部样式-->
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/pc/css/detail_enter-500bc3f487.min.css">
<!--内部样式-->
<style>
p{
font-size: 40px;
color: aqua;
}
</style>
</head>
<body>
<p>一个用来展示设置样式的演示</p>
<!-- 内联样式 -->
<p style="color:red">一个用来展示设置样式的演示</p>
</body>
</html>
CSS选择器
CSS通过选择器来选择一组样式要渲染到哪些的DOM元素上,用于内部样式和外部样式。
简单来说,选择器就是选择标签用的。
标签选择器
标签选择器会选择所有这个标签的元素
如下是一个p标签选择器,它会渲染页面上所有的p元素
p {
font-size: 20px;
}
会影响到项目的所有这一标签的元素的样式,影响范围很大,谨慎使用
ID选择器
ID选择器只会选择指定ID的元素,以#
开头后跟ID的值
#redsample{
color: red;
}
由于ID一般是唯一的,这一选择器一般只能选择的一个元素,效率较低,相比于内联样式仅仅起到了分离的作用。
类选择器
类选择器会选择一个类的元素(元素的类由class属性的值决定),.
后跟类名,最为常用。
.bluesample{
color:blue;
}
属性选择器
属性选择器会选择拥有指定属性的元素,还可以加等号来指定这个属于应该有的值。
[colorsample=greensample]{
color: green;
}
派生选择器
派生选择器用于以多个条件选择元素,是数个选择器的结合,常用于通过依据元素在其位置的上下文关系来定义样式
分为后代选择器、子元素选择器、兄弟选择器。
后代选择器
在某类元素的所有后代中再进行选择
p strong{
font-family: 楷体;
}
子选择器
不同于后代选择器,只选择子代
p > strong{
font-family: 楷体;
}
兄弟选择器
在与某类元素是并列关系的相邻元素中进行选择,注意是相邻
p + strong{
font-family: 楷体;
}
样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器样例</title>
<style>
/* 普通选择器p{} */
p{
font-size: 20px;
}
/* 派生选择器p strong{} */
p strong{
font-family: 楷体;
}
/* ID选择器#id{} */
#redsample{
color: red;
}
/* 类选择器.item{} */
.bluesample{
color:blue;
}
/* 属性选择器[property=a]{} */
[colorsample=greensample]{
color: green;
}
</style>
</head>
<body>
<p>普通选择器</p>
<p><strong>派生选择器</strong></p>
<p id="redsample">ID选择器</p>
<p class="bluesample">类选择器</p>
<p colorsample=greensample>属性选择器</p>
</body>
</html>
上一篇: 他的9个字为朱元璋打下*,临走前的请求竟是给儿子留个全尸?
下一篇: CSS选择器
推荐阅读
-
Lesson03_01 什么是CSS和CSS的设置方式
-
Java发送邮件和短信最常用的方式有哪些?_html/css_WEB-ITnose
-
jQuery的显示和隐藏方法与css隐藏的样式对比
-
css基础-css选择器和css文本样式相关
-
win8专业版 ie10和360浏览器无法加载本地html网页的css样式文件_html/css_WEB-ITnose
-
CSS中的id选择器和class选择器简单介绍_html/css_WEB-ITnose
-
01-css的引入方式
-
引入外部CSS的两种方式及区别_html/css_WEB-ITnose
-
dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来_html/css_WEB-ITnose
-
html使用四种方式引用css样式表的实例详解