本文详细介绍了CSS，从CSS的基本概念、语法、引入方式，深入到选择器、继承、常用属性，如宽高、字体、背景等，以及盒子模型、浮动、定位、阴影、清除默认样式等核心概念。此外，还探讨了z-index和透明度属性的差异。通过实例解析，帮助读者全面理解并掌握CSS在网页设计中的应用。
CSS
文章目录
一、CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
二、CSS语法
1、注释
注释是代码之母
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
2、CSS样式组成
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NJqTDIQD-1635934352270)(C:\Users\pilgirm\AppData\Roaming\Typora\typora-user-images\image-20210805212210870.png)]
选择器 {
属性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>
四、CSS选择器
1、基本选择器
**注意：**样式类名不要用数字开头（有的浏览器不认）。标签中的class属性如果有多个，要用空格分隔。
/*id选择器: 找到id是d1的标签 将文本颜色变成绿黄色*/
#d1 {
color: greenyellow;
}
/*类选择器: 找到class值里面包含c1的标签*/
.c1 {
color: red;
}
/*元素(标签)选择器: 找到所有的span标签*/
span {
color: red;
}
/*通配符选择器: 将html页面上所有的标签全部找到*/
* {
color: green;
}
- 示例代码
<div id="d1" class="c1 c2">
div
<p>div里面得p</p>
<span>div里面得span</span>
</div>
<p id="d2" class="c1 c2">ppp</p>
<span id="d3" class="c2">span111</span>
<span id="d4" class="c3">span222</span>
2、组合选择器
/*后代选择器: 所有被div包裹的标签中的span*/
div span {
color: red;
}
/*儿子选择器: 被div包裹的第一层所有的span标签*/
div>span {
color: red
}
/*毗邻选择器: div同级别紧挨着的下面的第一个span*/
div+span {
color: green;
}
/*弟弟选择器: div同级别下面所有的span*/
div~span {
color: navajowhite;
}
- 示例代码
<span>span1</span>
<span>span2</span>
<div>div
<p>div p</p>
<p>
div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
<span>span</span>
<span>span</span>
3、属性选择器
/*将所有含有属性名是username的标签背景色改为红色*/
[username] {
background: red;
}
/*找到所有属性名是username并且属性值是jason的标签*/
[username='jason'] {
background-color: rosybrown;
}
/*找到所有input标签中属性名是username并且属性值是jason*/
input[username='jason'] {
background-color: firebrick;
}
- 示例代码
<input type="text" username>
<input type="text" username="jason">
<input type="text" username="egon">
<p username="tank">水箱老师</p>
<div username="egon">矮子老师</div>
<span username="jason">鸡哥</span>
了解：
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: red;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素*/
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素*/
[title~="hello"] {
color: red;
}
4、分组和嵌套
分组: 当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
/*div标签和p标签统一设置字体为红色。(逗号表示并列关系)*/
div, p {
color: red;
}
/*通常，我们会分两行来写，更清晰:*/
div,
p {
color: red;
}
嵌套: 多种选择器可以混合起来使用
/*.c1类内部所有p标签设置字体颜色为红色。*/
.c1 p {
color: red;
}
总结:
/*
总结:
分组: 解决样式修饰冗余问题
嵌套: 可以让不同种类的选择器连用
*/
5. 伪类选择器
提示: W3C制定的CSS21规范中指出：这四个伪类的声明顺序应该是：’:link’、’:visited’、’:hover’、’:active’。
/*访问之前的状态*/
a:link {
color: red;
}
/*访问之后的状态*/
a:visited {
color: darkgray;
}
/*鼠标悬浮态*/
a:hover {
color: aqua;
}
/*鼠标点击不松开的状态 激活态*/
a:active {
color: black;
}
/*input框获取焦点(鼠标点了input框)*/
input:focus {
background-color: yellow;
}
/*鼠标悬浮出现小手的状态指针*/
cursor: pointer;
/*
总结:
a:link 访问之前的状态
a:hover 鼠标悬浮的状态
a:active 鼠标按住不放的状态
a:visited 鼠标点击过后的状态
input:focus input框获取焦点的状态
*/
6. 伪元素选择器
/*first-letter: 给首字母设置特殊样式*/
p:first-letter {
font-size: 48px;
color: orange;
}
/*before: 在每个p元素之前插入内容(注意: 这种添加的内容无法被鼠标选中)*/
p:before {
content: '我在你前面呢!';
color: red;
}
/*after: 在每个p元素之后插入内容(注意: 这种添加的内容无法被鼠标选中)*/
p:after {
content: '我在你后面呢!';
color: blue;
}
/*
总结:
first-letter: 修饰首字母
before: 在什么之前
after: 在什么之后
提示!!!: before和after通常都是用来清除浮动带来的影响: 父标签塌陷的问题
*/
7. 选择器优先级
我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？
其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。(万不得已可以使用!important)
总结:
/*
1. 选择器相同, 书写顺序不同:
就近原则: 谁离标签更近就听谁的
2. 选择器不同: 匹配越精确优先级越高
行内 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
3. 最高优先级: !important
强调!!!: 选择器的权重只是为了提供形象的等级, 就算无数个元素选择器加起来权重也是要低于类选择器的.
*/
8. 总结
基本选择器: id, 类, 元素(标签) , 通配符
组合选择器: 后代, 子代, 毗邻, 弟弟
属性选择器: [属性名], [属性名=属性值], 标签[属性名=属性值]
分组与嵌套: p,span p,#d1 .c1
伪类选择器: a:link, a:hover, a:action, a:visited, input:focus
伪元素选择器: p:first-letter, p:before, p:after
选择器的优先级: 选择器相同(就近原则), 选择器不同(精度), !important
五. CSS继承
1. 什么是继承?
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
body {
color: red;
}
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p {
color: green;
}
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承, 接下来了解下~~~
参考: https://www.jianshu.com/p/5daaa32dc5a9
六. CSS常用属性
1. 宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
/*块级标签才能设置宽度*/
p {
background-color: red;
height: 200px;
width: 400px;
}
/*内联标签的宽度由内容来决定。(行内标签无法设置长宽 就算你写了 也不会生效)*/
span {
background-color: green;
height: 200px;
width: 400px;
}
2. 字体属性
文字字体:
body {
/*font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。(第一个字体不生效会使用下一个字体。 依此类推)*/
/*SimSun 宋体
KaiTi 楷体
SimHei 黑体*/
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}
字体大小:
了解: chrome浏览器上默认字体大小16px
p {
font-size: 24px;
}
字重（粗细):
font-weight用来设置字体的字重（粗细）。
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
文本颜色:
颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定, 一下表示颜色的4种指定方式：
-
颜色的名称 - 如: red
-
十六进制值 - 如: **＃**FF0000
-
一个RGB值 - 如: RGB(255,0,0)
-
rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间(补充:
0.5通常在CSS中可以写成.5)
字体样式(了解):
font-style: normal;默认字体样式font-style: italic;, 设置倾斜的字体样式
总结:
font-family 文字字体
font-size 文字大小
font-weight 文字粗细
lighter(100) bold(400) bolder(900)
font-color 文字颜色
颜色单词, #十六进制, rgb(红, 绿, 蓝), rgba(红, 绿, 蓝, 透明度0~1)
3. 文字属性
文字对齐:
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
使用text-align注意:
在使用text-align时, 它只能争对文字(包括在块元素中的文字), 行内元素, 和行内块元素进行水平居中, 只争对没有包含文字的块元素是不起作用的.
示例:
<!DOCTYPE html>
最低0.47元/天 解锁文章
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
