css层贴样式表与css选择器
程序员文章站
2024-03-25 12:28:58
...
1、css层贴样式表
层贴样式表：就是给HTML标签添加样式的，让它变的更加的好看
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
```python
"""
css的学习流程
1.先学如何查找标签
css查找标签的方式你一定要学会
因为后面所有的框架封装的查找语句都是基于css来的
css选择器很简单很好学不要有压力!!!
2.之后再学如何添加样式
"""
-
css的语法结构
选择器 { 属性1:值1; 属性2:值2; 属性3:值3; 属性4:值4; } -
css的三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种) <style> h1 { color: burlywood; } </style> 2.link标签引入外部css文件(最正规的方式 解耦合) <link rel="stylesheet" href="mycss.css"> 3.行内式(一般不用) <h1 style="color: green">老板好 要上课吗?</h1>
2、CSS选择器
2.1基本选择器
- id选择器
<style>
/*id选择器*/
/*#d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
/* color: greenyellow;*/
/*}*/
</style>
- 类选择器
<style>
/*类选择器*/
/*.c1 { !*找到class值里面包含c1的标签*!*/
/* color: red;*/
/*}*/
</style>
- 元素/标签选择器
<style>
/*元素(标签)选择器*/
/*span { !*找到所有的span标签*!*/
/* color: red;*/
/*}*/
</style>
- 通用选择器
<style>
/*通用选择器*/
/** { !*将html页面上所有的标签全部找到*!*/
/* color: green;*/
/*}*/
</style>
2.2、组合选择器
在前端 我们将标签的嵌套用亲戚关系来表述层级
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
- 后代选择器
/*后代选择器*/
/*div span {*/
/* color: red;*/
/*}*/
- 儿子选择器
/*儿子选择器*/
/*div>span {*/
/* color: red;*/
/*}*/
- 毗邻选择器
/*毗邻选择器*/
/*div+span { !*同级别紧挨着的下面的第一个*!*/
/* color: aqua;*/
/*}*/
- 弟弟选择器
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: red;
}
2.3、属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/
/* background-color: red;*/
/*}*/
/*[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!*/
/* background-color: orange;*/
/*}*/
/*input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!*/
/* background-color: wheat;*/
/*}*/
2.4、分组与嵌套
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
d1 .c1 span {
color: orange;
}
2.5、伪类选择器
主要针对a标签，可以为a标签中的文本加不同的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
}
a:link { /*访问之前的状态*/
color: red;
}
a:hover { /*需要记住*/
color: aqua; /*鼠标悬浮态*/
}
a:active {
color: black; /*鼠标点击不松开的状态 **态*/
}
a:visited {
color: darkgray; /*访问之后的状态*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>
2.6、 伪元素选择器
使用css为网页添加文本
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
p:after {
content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
2.7、选择器优先级
"""
id选择器
类选择器
标签选择器
行内式
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
*/
#d1 {
color: aqua;
}
/*.c1 {*/
/* color: orange;*/
/*}*/
/*p {*/
/* color: red;*/
/*}*/
</style>
<!-- <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
<p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p>
</body>
</html>
上一篇： HTML/CSS
下一篇： html、css基础知识