前端のCSS （一）
程序员文章站
2022-06-19 15:46:09
文章目录1.什么是 CSS2.CSS 导入样式3.基本选择器**标签选择器****类选择器**id 选择器4.层次选择器5.伪类6.属性选择器：（常用）1.什么是 CSScss选择器（重点加难点）美化网页（文字，阴影，超链接，列表，渐变）盒子模型浮动定位动画效果从浏览器中观察：随便打开一个网页，点F12，可以看到他的 css 和 盒子 模型HTML 和 CSS2.CSS 导入样式1.直接写在一起的写法：
1.什么是 CSS
- css选择器（重点加难点）
- 美化网页（文字，阴影，超链接，列表，渐变）
- 盒子模型
- 浮动
- 定位
- 动画效果
从浏览器中观察：
随便打开一个网页，点F12，可以看到他的 css 和 盒子 模型
HTML 和 CSS
2.CSS 导入样式
1.直接写在一起的写法：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: blueviolet;
}
</style>
</head>
<body>
<h1>你好</h1>
</body>
2.分开的写法：
html 文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 使用link标签把这两部分关联起来 -->
<link rel="stylesheet" href="./01.css">
</head>
<body>
<h1>你好</h1>
</body>
CSS文件：
h1{
color: blueviolet;
}
CSS导入的方式 到底选哪个？ (就近原则)
- 行内样式
- 内部样式
- 外部样式
直接进行更改：
3.基本选择器
基本选择器可以分为三种
- 标签选择器
- 类 选择器 class
- Id 选择器
优先级： id > 类 选择器 > 标签选择器
标签选择器
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>你好</h1>
<h1>世界</h1>
</body>
效果图：
选中后，所有的h1标签都会变颜色
这种选择器只能固定的选择一种标签，不具有灵活性
类选择器
格式 ： .类名
<style>
.zhao {
color: blue;
}
</style>
</head>
<body>
<h1 class="zhao">你好</h1>
<h1>世界</h1>
<p class="zhao">*自我</p>
</body>
效果图： 所有类名为 .zhao 的都能被渲染：
id 选择器
id 选择器是 #id 和 class 的 .class 不同
<style>
.zhao {
color: blue;
}
#first{
color: red;
}
</style>
</head>
<body>
<h1 class="zhao">你好</h1>
<h1>世界</h1>
<p class="zhao">*自我</p>
<p id="first">永远高唱我歌</p>
</body>
4.层次选择器
这个是为了在很多层级关系的时候，只需要在其中一个位置打上标签，就可以定位到他前后上下左右的所有标签（用的比较少，用到再查吧）
- 后代选择器：在某个元素的后边 祖爷爷，爷爷，爸爸 ，你
- 子选择器，一代，儿子
- 相邻兄弟选择器 ：同辈（只有一个，向下）
- 通用选择器：当前选中元素的所有兄弟元素（当前选中元素的向下所有的兄弟元素）
/* 后代选择器 */
body p {
color: #000;
}
/* 子选择器,只有一代 */
body>p {
color: #000;
}
/* 相邻兄弟选择器: 只有一个,相邻（向下） */
.dex1+p {
color: #000;
}
/* 通用选择器 .当前选中元素的所有兄弟元素*/
.dex1~p{
color: #000;
}
5.伪类
相当于选定以后，又加了一些限制，大多数是带 ：的
/* 伪类 */
/* 把第一个 li 选择出来 */
ul li:first-child{
color: #000;
}
6.属性选择器：（常用）
属性选择器有点类似于正则表达式
= 绝度等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
</head>
<style>
/* h1中所有id=fist 的都选出来 */
h1[id=first] { color: aqua;}
</style>
</head>
<body>
<p class="demo">
<h1 class="links, first" id="first">哈哈</h1>
</p>
</body>
参考文献
[1]https://www.bilibili.com/video/BV1YJ411a7dy/?p=9
本文地址：https://blog.csdn.net/zhaozhao236/article/details/109236885