CSS(一)概述、选择器、选择器优先级
CSS:层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。对前端网页的布局与美化有着广泛作用。
目录
一、CSS概述
1. 前端HTML、Javascript、CSS
- html:超文本标记语言。用于网页的结构搭建和页面布局。
- css:层叠样式表。用于网页的修饰,样式的渲染。
- javascript:解释型的编程语言。用于与页面的交互。
2. CSS语法规范
(1)内联样式
内联样式也叫行内样式,就是在 html 文件中的 html 标签中,用 style 属性样式值来完成渲染。内联样式将样式写在标签里,缺点是杂乱且不易于修改,复用性差;优点是可以指定当前标签,更加直接。
-
<!-- 内联样式 -->
-
<span style="样式声明"></span>
(2)内部样式
在网页头部<head></head>中增加一对<style></style>标签,在 style 中定义样式。特点是需要选择器查找到元素并嵌入 HTML 文件,只能在当前页面使用,优先级低于内联样式(不建议用于项目)。
-
<head>
-
<!-- 内部样式 -->
-
<style>
-
h2 {
-
background-color: lightpink;
-
color: red;
-
}
-
</style>
-
</head>
(3)外部样式
单独创建 CSS 文件,在 HTML 文件的 head 标签中引入。
-
<head>
-
<!-- 外部样式 -->
-
<link rel="stylesheet href="01.css">
-
</head>
href 为超文本引用,引用 css 文件路径,rel 属性指文件与当前HTML的关系(必写)。外部样式所有页面都可以使用,是项目中最重要的样式使用方式。
二、CSS选择器
要使用 css 对 HTML 页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到 CSS 选择器。HTML页面中的元素就是通过 CSS 选择器进行控制的。
1. 基础选择器
(1)通用选择器:使用通配符 * ,选择 HTML 文件中所有元素。最常用的写法是清除浏览器内外边距,如下:
*{margin:0;padding:0}
(2)元素选择器:也叫标签选择器,直接使用标签的名字来选择 HTML 元素。权重值为1
-
h1 {color: teal;}
-
div {color: green;}
(3)id 选择器:只针对一个元素,一般不作为样式渲染的选择器使用。
#getblue {color: blue;}
(4)类选择器:通过元素的类名即class值选择元素。权重值10
-
.oz {color: purple;}
-
.oo {color: orangered;}
一个元素可以创建多个类名,每个类名之间用空格分开即可。
(5)群组选择器:将多种选择器进行组合,把不同的选择器用逗号连接
-
.y,#mybox {
-
background-color: yellow;
-
}
2. 关系选择器
(1)后代选择器:先代元素(祖先)选择器写在前面,空格后写后代元素选择器。
-
.item span {
-
color: red;
-
}
(2)子代选择器:选中某个元素的直接子元素(当前元素下的第一层子元素),与后代不同的是子代选择器的范围更小。
-
body>div>div>div {
-
color: red;
-
}
(3)兄弟选择器
-
.l1~li {
-
color: blue;
-
}
-
-
.s~.nv {
-
color: red;
-
}
注意,前面的为参照元素,后面的为筛选元素,选中的永远是其参照元素后面的兄弟元素。
(4)相邻选择器:同一层的关系选择器,可以选中参照的元素后面紧挨着的被参照元素的选择器。
-
.o1+span {
-
color: red;
-
}
3. 伪类选择器
伪类选择器的作用是匹配同一个元素,设置其不同状态下的样式。常用的伪类有:
a:link {样式声明} | 未激活(a标签特有) |
a:visited {样式声明} | 激活后(a标签特有) |
div:hover {样式声明} | 鼠标悬停 |
p:active {样式声明} | 激活中 |
input:focus { } | input标签获取焦点 |
input:cheaked { } | input单选、复选等type 类型被选中后的样式 |
-
-
a:link {
-
color: green;
-
}
-
-
div:hover {
-
background-color: salmon;
-
}
-
-
button:hover+div {
-
background-color: red;
-
}
4. 伪元素选择器
用于设置元素的“指定部分”的样式。
::before | 元素最前边部分 |
::after | 元素的最后边部分 |
-
div::before {
-
content: "欢迎您,";
-
font-weight: bolder;
-
font-size: 26px;
-
}
需要注意content属性必须写,但值可以为空。
三、CSS优先级
1. 优先级原则
(1)顺序读取:相同类型选择器采用顺序读取后来的优先。
(2)选择器优先级:不同类选择器,按照权重原则(id选择器100,类选择器10,元素选择器 1)。
(3)继承:制定样式的优先级大于继承样式的优先级。
(4)多个选择器一起使用:根据权重值累加比较值后采用优先级。
2. 最高优先级 - !important
直接获取最高优先级,但注意内联样式不能加 !important。用法如下:
-
.d1{
-
background-color: rgb(22, 92, 161) !important;
-
}
-
<!-- 表示类名为d1的元素具有最高优先级 -->
3. 优先级的比重大小
按引入方式:内联样式 > 内部样式 > 外部样式
按元素:id 选择器(100)> 类选择器(10)> 元素选择器(1)
文章来源: majinjian.blog.csdn.net,作者:Developer 小马,版权归原作者所有,如需转载,请联系作者。
原文链接:majinjian.blog.csdn.net/article/details/119771922
- 点赞
- 收藏
- 关注作者
评论(0)