网站首页 > 技术文章 正文
今天学习了CSS引入方式以及选择器的使用,个人感觉引入方式很好理解,CSS选择器中的标签选择器、class选择器、id选择器也很容易掌握,就是伪类选择器稍微有点难度,并且这个地方也还是重难点,所以我把今天所学的知识梳理一下,重点记录一下伪类选择器这个知识点,再重点理解一下。
一、CSS引入HTML文档的三种方式
1.通过<style>标签引入HTML文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS基础语法</title>
<style>
h1 {
color: violet;
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>php.cn</h1>
</body>
</html>
- 效果图:
2.通过外部样式表引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS引入方式:外部样式表(公共样式表、共享样式表)</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>php.cn</h1>
</body>
</html>
- 效果图
3.通过style属性设置元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS引入方式:style属性设置样式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>toutiao.com</h1>
<h1 style="color: yellow;">Hello World</h1>
</body>
</html>
- 效果图:
通过以上学习可以做出如下总结:
- 内部样式:仅对当前元素有效,使用<style>标签;
- 外部样式:适用于所有引入了CSS样式表的HTML文档,使用<link>标签引入;
- 行内样式:仅仅适用当前页面的指定的元素,使用<style>属性。
二、样式表的模块化
通常一个网站有页头,主体部分,页脚,页头和页脚一般都是公用的部分,如果在每个页面都写一遍页头和页脚的样式,这样的话也太复杂了,可以使用模块化的样式表,在每个页面再进行引入就可以了,这样既方便又利于管理。
CSS模块化使用方法:
- 将公共样式部分进行分离,并创建一些独立的样式表来保存;
- 使用@import指令引用公用样式表到指定的CSS文档或标签中。
<style>
/* 导入公共页眉 */
@import url(css/header.css);
main {
min-height: 50px;
background-color: lightblue;
}
/* 导入公共页脚 */
/* 该方法等同于上面的 @import url() 方法 */
@import 'css/footer.css';
</style>
三、选择器
1.标签选择器:返回一组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器1:简单选择器</title>
<style>
li {
background-color: violet;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</body>
</html>
- 效果图:
2.class选择器:返回一组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器1:简单选择器</title>
<style>
/* li[class="on"] {
background-color: #ffffff;
} */
/* class选择器可以简化为 */
li.on {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li id="foo">item1</li>
<li class="on">item2</li>
<li id="foo">item3</li>
<li class="on">item4</li>
<li class="on">item5</li>
</ul>
</body>
</html>
- 效果图:
3.id选择器:返回一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器1:简单选择器</title>
<style>
/* ---------------------------------------------- */
/* id选择器:返回一个 */
/* li[id="foo"] {
background-color: violet;
} */
/* id选择器可以简化为 */
#foo {
background-color: violet;
}
/* 浏览器并不检查id选择器的唯一性,由开发者自行保证它的唯一性。 */
</style>
</head>
<body>
<ul>
<li id="foo">item1</li>
<li class="on">item2</li>
<li id="foo">item3</li>
<li class="on">item4</li>
<li class="on">item5</li>
</ul>
</body>
</html>
- 效果图:
需要注意的是,这里面有一个坑,我通过学习发现id选择器,在页面中不能重复使用,跟class选择器是不一样的,它需要在页面中保证它的唯一性,这个浏览器并不会检查id的唯一性,需要开发者自行保证。
4.上下文选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器1:上下午选择器</title>
<style>
/* 1.后代选择器:所有层级 */
ul li {
background-color: lightblue;
}
/* 2.子元素选择器 */
body > ul > li {
background-color: teal;
}
/* 3.同级相邻选择器:仅选中与之相邻的第一个元素 */
.start+li {
background-color: #000;
color: #ffffff;
}
/* 4.同级所有选择器:选中与之相邻的后面所有兄弟元素 */
.start~li {
background-color: tomato;
}
</style>
</head>
<body>
<ul>
<li id="foo">item1</li>
<li class="start">item2</li>
<li id="foo">item3</li>
<li class="on">item4
<ul>
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
<li class="on">item5</li>
</ul>
</body>
</html>
- 效果图:
总结,上下文选择器用到的符号:
- 空格:所有层级;
- >:父子级;
- +:仅选中与之相邻的第一个元素
- ~:选中与之相邻的后面所有兄弟元素
5.伪类选择器
匹配任意位置的元素:nth-of-type(an + b),其中an表示起点,b是偏移量,n为从0开始的正整数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器:结构伪类(重难点)</title>
<style>
/* 1.匹配任意位置的元素:`:nth-of-type(an+b)` */
/* 0乘以任何数都等于0,通常直接写偏移量就可以 */
/* 匹配第3个li */
/* ul li:nth-of-type(3) {
background-color: tomato;
} */
/* 选择li的所有元素 */
/* ul li:nth-of-type(1n) {
background-color: yellow;
} */
/* 如果只是为了全选,这样做没意义,还不如标签选择器来的直接,但是一旦带上偏移量就完全不同了。 */
/* 1乘以任何数都等于自己,所以省去1 */
/* ul li:nth-of-type(1n + 3) {
background-color: yellowgreen;
} */
/* ul li:nth-of-type(n + 8) {
background-color: springgreen;
} */
/* ----------------------------------------------------------------- */
/* 2. 反向获取任意位置的元素:`nth-last-of-type(an + b)` */
/* ul li:nth-last-of-type(-n + 3) {
background-color: wheat;
} */
/* 只选择倒数第3个,直接命中 */
/* ul li:nth-last-of-type(-0n + 3) {
background: wheat;
} */
/* 3.选择所有索引为偶数的子元素:2,4,6,8 */
/* ul li:nth-of-type(2n) {
background-color: yellow;
} */
/* 选择所有奇数行的子元素:1,3,5,7,9 */
/* ul li:nth-of-type(2n - 1) {
background-color: yellow;
} */
/* 这里2n - 1 也是对的,为什么呢? */
/* 偶数行:even */
/* ul li:nth-of-type(even) {
background-color: violet;
} */
/* 奇数行:odd */
/* ul li:nth-of-type(odd) {
background-color: yellowgreen;
} */
/* ----------------------------------------------------------------- */
/* 3.选择第一个子元素: */
/* :nth-of-type(1) 的语法糖:first-of-type */
/* ul li:first-of-type {
background-color: turquoise;
} */
/* 选中最后一个:last-of-type */
ul li:last-of-type {
background-color: #000;
}
/* :nth-of-type(an + b) 这是最核心的一个选择器,其他的相关选择器都是它的语法糖 */
/* :nth-last-of-type(), :first-of-type, :last-of-type这些都是快捷方式 */
/* ul:last-of-type li {
background-color: turquoise;
} */
/* 如果只想匹配父元素中唯一子元素,使用:only-of-type就可以快速实现 */
ul li:only-of-type {
background-color: violet;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
<ul>
<li>Hello ssssWorld!</li>
<li>Hello ssssWorld!</li>
</ul>
<ul>
<li>Hello World!</li>
</ul>
</body>
</html>
- 效果图:
通过学习CSS基础语法和伪类选择器的使用,了解了页面引入样式的三种方法,还有如何修饰页面中元素的样式。
- 上一篇: CSS面试题——隐藏元素的方法
- 下一篇: 19.HTML CSS边距、边框、填充和内容
猜你喜欢
- 2024-11-25 [前端开发]网页设计|如何实现网页变灰效果_网站蒙灰CSS样式总汇
- 2024-11-25 Three.js开发日记3:如何在three.js模型中插入html内容?
- 2024-11-25 「测试开发全栈-HTML」(20)css的引入方式-外部样式表和总结
- 2024-11-25 web开发源代码案例3-css样式
- 2024-11-25 「测试开发全栈-HTML」(10)css字体属性之字体样式和复合属性
- 2024-11-25 「测试开发全栈-HTML」(15)css字体的文本缩进
- 2024-11-25 CSS中的z-index属性如何使用
- 2024-11-25 交互设计进阶:如何通过CSS制作引人注目的按钮
- 2024-11-25 java将html转为pdf
- 2024-11-25 「测试开发全栈-HTML」(11)css字体复合属性和小结
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-