【css】基础知识

最新推荐文章于 2024-07-12 20:49:16 发布

为毛哩

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量934

点赞数 21

分类专栏： Web 文章标签： css

本文链接：https://blog.csdn.net/weixin_40584890/article/details/139652609

版权

Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

CSS

全称：层叠样式表（Cascading Style Sheets）

样式

行内样式

<h1 style="color:red; font-size:20px;">Hello World</h1>

内部样式

<style>
  h1 {
    color: red;
    font-size: 20px;
  }
</style>

推荐写在<head>标签中

外部样式

/* index.css */
h1 {
  color: red;
  font-size: 20px;
}

<!-- index.html -->
<link rel="stylesheet" href="./index.css">

推荐写在<head>标签中

样式表优先级

行内样式 > 内部样式 = 外部样式

注意事项
1. 内部样式、外部样式优先级相同，且：后面的会覆盖前面的（后来着居上）
2. 同一个样式表中，优先级也和编写顺序有关（后来者居上）

语法规范

在这里插入图片描述

注意事项
注释写法：/* */

选择器

通配选择器

可以选中所有的HTML元素

* {
  color: red;
}

元素选择器

为页面中 某种元素 统一设置样式

/* 选中所有 h2 元素 */
h2 {
  color: red;
}
/* 选中所有 p 元素 */
p {
  color: orange;
}

类选择器

/* index.css */
.speak {
  color: red;
}
.answer {
  color: orange;
}

<!-- index.html -->
<p class="speak">今天是好日子</p>
<p class="answer">确实</p>

注意事项
- 一个元素不能写多个class属性，后面写的会失效
- class的值不要使用纯数字、中文，尽量使用英文，若由多个单词组成，使用-连接

id选择器

根据元素的id属性值，来 精准的 选中某个元素

/* index.css */
#speak {
  color: red;
}
#answer {
  color: orange;
}

<!-- index.html -->
<p id="speak">今天是好日子</p>
<p id="answer">确实</p>

注意事项
- 尽量由字母、数字、下划线、短横线组成，最好以字母开头，不要包含空格，区分大小写
- 一个元素只能拥有一个 id属性，多个元素的id属性不能相同

交集选择器

选中 同时符合 多个条件的元素

语法：选择器1选择器2...选择器n {}

/* index.css */
p.speak {
  color: red;
}
.speak.answer {
  color: orange;
}

<!-- index.html -->
<p calss="speak">今天是好日子</p>
<p class="answer speak">确实</p>

注意事项
- 有标签名，标签名必须写在前面
- id 选择器理论上可以作为交集的条件，但实际应用中几乎不用，没有意义
- 交集选择器中不可能出现两个元素选择器

并集选择器

选中多个选择器对应的元素，又称：分组选择器

语法：选择器1,选择器2,...选择器n {}

.speak,
.answer,
#people {
  color: orange;
}

<p calss="speak">今天是好日子</p>
<p class="answer">确实</p>
<p id="people">我是张三</p>

注意事项
- 一般竖着写
- 任何形式的选择器，都可以作为并集选择器的一部分
- 通常用于集体声明，可以额缩小样式表体积

后代选择器

选中指定元素中个，符合要求的后代元素

语法：选择器1 选择器2 ...选择器n {} (先写祖先，再写后代)

/* 选中 ul 中的所有 li */
ul li {
  color: red;
}

/* 选中 ul 中所有 li 中的 a */
ul li a {
  color: orange;
}

/* 选中类名为 subject 中所有的 li */
.subject li {
  color: blue;
}

/* 选中类名为 subject 中所有类名为 front-end 的 li */
.subject li.front-end {
  color: green;
}

注意事项

后代选择器，最终选择的是后代，不选中祖先
儿子、孙子、重孙子，都算是后代

子代选择器

选中指定元素中，符合要求的子元素（儿子元素）。

语法：选择器1>选择器2>...选择器n {}（先写父，再写子）

/* div 中的子代 a 元素 */
div>a {
  color: red;
}

/* 类名为 person 的元素中的子代 a 元素 */
.person>a {
  color: orange;
}

注意事项
- 最终选择的是子代，不是父级
- 子代指的是儿子

兄弟选择器

相邻兄弟选择器

选中指定元素后，符合条件的 相邻兄弟 元素

所谓相邻，就是紧挨着他的下一个元素

语法：选择器1+选择器2 {}

/* 选中 div 后相邻的兄弟元素 p */
div+p {
  color: red;
}

通用兄弟选择器

选中指定元素后，符合条件的 所有兄弟 元素

语法：选择器1~选择器2 {}

/* 选中 div 后所有的兄弟 p 元素 */
div~p {
  color: red;
}

注意事项
通通只往下找

属性选择器

选中属性值符合一定要求的元素

语法：

[属性名] 选中具有某个属性的元素
[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素
[属性名^="值"] 选中包含某个属性，且属性值以包含指定值开头的元素
[属性名$="值"] 选中包含某个属性，且属性值以包含指定值结尾的元素
[属性名*="值"] 选中包含某个属性，且属性值包含指定值的元素

/* 选择具有 title 属性的元素 */
[title] {
  color: red;
}

/* 选择 title 属性值为 hello 的元素 */
[title="hello"] {
  color: red;
}

/* 选择 title 属性值以 h 开头的元素 */
[title^="h"] {
  color: red;
}

/* 选择 title 属性值以 e 结尾的元素 */
[title$="e"] {
  color: red;
}

/* 选择 title 属性值包含 o 的元素 */
[title*="o"] {
  color: red;
}

<p title="hello">hello</p>
<p title="world">world</p>
<p title="welcome">welocome</p>

伪类选择器

选中特殊状态的元素

像类，但不是类，是元素的一种特殊状态

语法：元素:伪类名 {}

/* 没有访问过的 a 元素 */
a:link {
  color: orange;
}
/* 访问过的 a 元素 */
a:visited {
  color: gray;
}

动态伪类

:link 超链接 未被访问 的状态
:visited 超链接 访问过 的状态
:hover 鼠标悬停在元素上的状态
:active 元素激活状态，即鼠标按下时
::: warning 注意
a标签遵循lvha的顺序，即link、visited、hover、active
:::
:focus 获取焦点的元素

结构伪类

:first-child 所有兄弟元素中的 第一个
:last-child 所有兄弟元素中的 最后一个
:nth-child(an+b) 所有兄弟元素中的 第an+b个 元素，其中表达式必须写成an+b，偶数可以用2n（或even），奇数可以
用2n+1(或odd)，选中前5个，可以用-n+5
:nth-last-child(an+b) 所有兄弟元素中的 倒数第an+b个 元素
:first-of-type 所有 同类型 兄弟元素中的 第一个
:last-of-type 所有 同类型 兄弟元素中的 最后一个
:nth-of-type(an+b) 所有 同类型 兄弟元素中的 第an+b个 元素
:nth-last-of-type(an+b) 所有 同类型 兄弟元素中的 倒数第an+b个 元素
:only-child 所有兄弟元素中的唯一元素
:only-of-type 所有 同类型 兄弟元素中的唯一元素
:root 根元素，即<html>元素
:empty 空元素，即没有子元素的元素

/* 选中的是 div 的第一个儿子 p 元素（结构1） - 按照所有兄弟计算 */
div>p:first-child {
  color: red;
}
/* 选中的是 div 的最后一个儿子 p 元素（结构 1）- 按照所有兄弟计算 */
div>p:last-child {
  color: red;
}
/* 选中的是 div 的第 3 个儿子 p 元素（结构 1）- 按照所有兄弟计算 */
div>p:nth-child(3) {
  color: red;
}
/* 选中的是 div 的偶数个儿子 p 元素（结构 1）- 按照所有兄弟计算 */
div>p:nth-child(2n) {
  color: red;
}
/* 选中的是 div 的奇数个儿子 p 元素（结构 1）- 按照所有兄弟计算 */
div>p:nth-child(2n+1) {
  color: red;
}
/* 选中的是 div 的前 5 个儿子 p 元素（结构 1）- 按照所有兄弟计算 */
div>p:nth-child(-n+5) {
  color: red;
}
/* 选中的是 div 的倒数第 3 个儿子 p 元素（结构 1）- 按照所有兄弟计算 */
div>p:nth-last-child(3) {
  color: red;
}
/* 选中的是 div 的第一个儿子 p 元素（结构 2）- 按照所有同类型兄弟计算 */
div>p:first-of-type {
  color: red;
}
/* 选中的是 div 的最后一个儿子 p 元素（结构 2）- 按照所有同类型兄弟计算 */
div>p:last-of-type {
  color: red;
}
/* 选中的是 div 的第 3 个儿子 p 元素（结构 2）- 按照所有同类型兄弟计算 */
div>p:nth-of-type(3) {
  color: red;
}
/* 选中的是 div 的倒数第三个儿子 p 元素（结构 2）- 按照所有同类型兄弟计算 */
div>p:nth-last-of-type(3) {
  color: red;
}
/* 选中的没有兄弟的 span 元素（结构 2） */
span:only-child {
  color: red;
}
/* 选中的没有同类型兄弟的 span 元素（结构 2） */
span:only-of-type {
  color: red;
}
/* 选中的是 html 根元素 */
:root {
  background-color: red;
}
/* 选中的是没有内容的 div 元素（结构 3） */
div:empty {
  width: 100px;
  height: 100px;
  background-color: red;
}

<!-- 结构 1 -->
<div>
  <p>第1个</p>
  <p>第2个</p>
  <p>第3个</p>
  <p>第4个</p>
  <p>第5个</p>
  <p>第6个</p>
  <p>第7个</p>
  <p>第8个</p>
  <p>第9个</p>
  <p>第10个</p>
</div>

<!-- 结构 2 -->
<div>
  <span>测试1</span>
</div>
<div>
  <span>第1个</span>
  <p>第2个</p>
  <p>第3个</p>
  <p>第4个</p>
  <p>第5个</p>
  <p>第6个</p>
  <p>第7个</p>
  <p>第8个</p>
  <p>第9个</p>
  <span>第10个</span>
</div>

<!-- 结构 3 -->
<div></div>

否定伪类

:not(选择器) 排除满足括号中条件的元素

/* 选中的是 div 中的儿子 p 元素，但是排除类名为 fail 类的元素 */
div>p:not(.fail) {
  color: red;
}
/* 选中的是 div 中的儿子 p 元素，但是排除 title 属性值以"你要加油啊"开头的元素 */
div>p:not([title^="你要加油啊"]){
  color: red;
}
/* 选中的是 div 中的儿子 p 元素，但是排除第一个儿子 p 元素 */
div>p:not(:first-child){
  color: red;
}

<div>
  <p>张三：98分</p>
  <p>李四：90分</p>
  <p>王五：85分</p>
  <p>赵六：75分</p>
  <p class="fail" title="你要加油啊！孙七">孙七：58分</p>
  <p class="fail" title="你要加油啊！老八">老八：33分</p>
</div>

UI 伪类

:checked 选中状态的单选框和复选框
:enabled 可用的元素（用的不多）
:disabled 禁用的元素

/* 选中的是勾选的复选框或者单选框 */
input:checked {
  width: 100px;
  height: 100px;
}

/* 选中的是可用的 input 元素 */
input:enabled {
  background-color: green;
}

/* 选中的是被禁用的 input 元素 */
input:disabled {
  background-color: red;
}

<input type="checkbox">
<input type="radio" name="gander">
<input type="radio" name="gander">
<input type="text">
<input type="text" disabled>

注意事项
复选框、单元框选中时的颜色浏览器是不允许更改的

目标伪类

:target 选中被锚点指向的元素

div {
  height: 200px;
  background-color: yellow;
}
div:target {
  background-color: red;
}

<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>

<div id="one">第1个</div>
<div id="two">第2个</div>
<div id="three">第3个</div>

语言伪类

:lang(语言) 根据指定的语言选择元素（本质是看 lang 属性的值）

/* 选中 div 中 lang 属性值为 en 的元素 */
div:lang(en) {
  color: red;
}

/* 选中 lang 属性值为 zh-CN 的元素 */
:lang(zh-CN) {
  color: green;
}

<!DOCTYPE html>
<html lang="zh-CN"> 
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div lang="en">hello</div> 
    <div>你好</div>
    <p>今天你吃了吗</p>  
  </body> 
</html>

伪元素选择器

::first-letter 选中元素内容中的 第一个字
::first-line 选中元素内容中的 第一行
::selection 选中 被鼠标选中 的内容
::placeholder 选中元素的 提示文案
::before 在元素内容 开始位置 插入内容
::after 在元素内容 结束位置 插入内容

/* 选中的是 div 中的第一个文字 */
div::first-letter {
  color: red;
}
/* 选中的是 div 中的第一行文字 */
div::first-line {
  background-color: yellow;
}
/* 选中的是 div 中鼠标选中的内容 */
div::selection {
  background-color: green;
  color: orange;
}
/* 选中的是 input 元素中的提示文字 */
input::placeholder {
  background-color: gray;
}
/* 选中的是 p 元素最开始的位置，随后创建一个子元素 */
p::before {
  content: "￥";
}
/* 选中的是 p 元素最后的位置，随后创建一个子元素 */
p::after {
  content: ".00";
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<input type="text" placeholder="请输入用户名">
<p>199</p>
<p>299</p>
<p>399</p>

选择器优先级

!important（慎用） > 行内样式（少用） > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式

格式：(a, b, c)

a ID选择器的个数
b 类、伪类、属性选择器的个数
c 元素、伪元素选择器的个数

(1,0,0) > (0,1,0) > (0,0,1)

如果权重相同，则看顺序（后来者居上）

在vscode 中鼠标悬停在选择器上可以查看计算后的选择器优先级

三大特性

层叠性

如果发生了样式冲突，就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖），一句话：为了解决样式冲突

继承性

元素会自动拥有 其父元素 、或 其祖先元素 上所有设置的 某些样式

规则：优先继承 离得近 的

常见的可继承属性：text-??、font-??、line-??、color

优先级

参考选择器优先级

像素

是一个相对单位，1 像素就代表屏幕上一个电子发光点，相同屏幕尺寸，分辨率越高的像素点越多，对应看
的100px * 100px的色块就越小

颜色

颜色名

例如 red、blue、orange等

rgb或rgba

rgb对应单词为 red、gree、blue，分别代表太阳光中的红、绿、蓝，rgb 的值范围是0~255或0%~100%；

rgba中的a为透明度，值范围是0~1或0%~100%；

注意事项
rgb中的值范围 必须统一 ，不能用 0~255 和百分比混合使用

HEX 或 HEXA

是一种十六进制颜色表示法，原理同rgb，只不过要用 6个数字 分成 3组来表达

格式为：#rrggbb

每一位数字的取值范围是 0~f，即：0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f；所以每一种光的最小值是00，最大值是ff

如果每种颜色的两位都是相同的，就可以简写，比如#ff0000可以简写为#f00；但要注意前 3 位简写，透明度也要简
写，例如#ff998866可以简写为#f986
不区分大小写，建议大小写保持统一

注意事项
IE浏览器不支持HEXA，但支持HEX

HSL 或 HSLA

HSL 是通过：色相、饱和度、亮度来显示一个颜色

格式：hsl(色相、饱和度、亮度)

色相：取值范围0deg~360deg
饱和度：取值范围0%~100%（向色相中对应颜色添加灰色，0%全灰，100%没有灰）
亮度：取值范围0%~100%（0%亮度没了，代表黑色，100%亮度太强，代表白色，50%则刚给好）

HSLA 中的 A 就是透明度，用法同 rgba 和 HEXA

常用字体属性

字体族

语法：font-family: "STCaiyun","Microsoft YaHei",sans-serif

注意事项
- 使用字体的英文名兼容性会更好，英文名可查询搜索
- 如果字体名包含空格，必须使用引号包裹
- 可以设置多个字体，顺序按照从左到右依次查找，且通常在最后写上serif(衬线字体)或sans-serif(非衬线字体)；
推荐使用非衬线字体（也就是不太像书法字体那种带有笔顿感的）
- windows系统中，默认字体是微软雅黑（Mircosoft YaHei）

字体风格

语法：font-style: normal

normal 正常（默认值）
italic 斜体（使用字体自带的斜体效果，斜体更推荐用这个）
oblique 斜体（强制产生斜体效果）

字体粗细

语法：font-weight: bold

关键词
- lighter：细
- normal：正常
- bold：粗
- bolder：更粗（多数字体不支持）
数值

范围：100~1000且无单位，数值越大，字体约粗（或一样粗，具体要看设计字体的时候支持了哪些）
- 100~300等于lighter
- 400~500等同于normal
- 600及以上等同于bold

字体复合属性

语法：font: bold italic 100px "STCaiyun","Microsoft YaHei",sans-serif

编写规则：

字体大小、字体族必须都写上
字体族必须是最后一位，字体大小必须是倒数第二位（其他属性不分顺序）
各个属性之间用空格隔开

实际开发中更推荐使用复合写法

文本属性

文本间距

letter-spacing：字母间距
word-spacing：单词间距（通过空格识别单词）

属性值为像素(px)，正值让间距增大，负值让间距缩小

文本修饰

语法：text-decoration: underline dotted red

none：无装饰线
overline：上划线
underline：下划线
line-through：删除线

可搭配如下值使用，还可指定其颜色（这些属性值 无顺序 要求）

dotted：虚线
wavy：波浪线

文本缩进

语法：text-indent: 2em

属性值：css中的长度单位，例如：px、em

文本对齐

水平方向

语法：text-align: center

left：左对齐，默认
right：右对齐
center：居中对齐

垂直方向

用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式

注意：不能控制块元素
语法：vertical-align: top

top：上对齐
bottom：下对齐
baseline：基线对齐，默认
middle：居中对齐

盒模型

margin、border、padding、content组成了css中的盒模型

盒子的大小 = border+padding+content

内容区

width：内容区域宽度
max-width：内容区域最大宽度
min-width：内容区域最小宽度
height：内容区域高度
max-height：内容区域最大高度
min-height：内容区域最小高度

内边距

语法：padding: 10px 20px 30px 40px
::: tip

值不能写负数
行内元素左右边距支持，上下边距不能完美的设置（会重叠到其他区域）
块级元素、行内块元素，四个方向内边距均可设置
:::

四个值：上、右、下、左（顺时针）
三个值：上、左右、下
两个值：上下、左右
一个值：四个方向都一样

边框

语法：border: 1px solid red

外边距

语法：margin: 10px 20px 30px 40px

与内边距一样

注意事项
1. 行内元素，左右margin有效，上下margin无效
2. 块级元素，左右的margin赋值为auto，则代表水平方向居中
3. margin的值可以是负数

塌陷问题

第一个子元素的margin-top和最后一个子元素的margin-bottom会作用于父元素上

解决方案：

使用overflow: hidden
使用display: table
使用float
使用position

合并问题

上面兄弟元素的 margin-bottom 和下面兄弟的 margin-top 会合并（取最大值，而不是相加）

解决方案：只给一个设置上下外边距即可

样式的继承

会继承的属性：字体属性、文本属性（除了vertical-align）、文字颜色等
不会继承的属性：边框、背景、内外边距、宽高、溢出方式等

规律：能继承的属性都是不影响布局的，也就是和盒子模型没有关系的

布局技巧

让子元素在父元素中水平居中

若子元素为块元素，给父元素加上：margin: 0 auto;
若子元素为行内元素、行内块元素，给父元素加上：text-align: center;

让子元素在父元素中垂直居中

若子元素为块元素，给子元素加上：margin-top，值为：（父元素content - 子元素盒子总高）/ 2
若子元素为行内元素、行内块元素，给父元素加上：line-height: height，每个子元素都加上：vertical-align: middle

补充：若想绝对垂直居中，父元素font-size设置为0

元素之间的空白问题

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

解决方案：给父元素设置font-size: 0，再给需要显示文字的元素单独设置字体大小

行内块的幽灵空白问题

行内块元素与文本的基线对齐，而文本的基线与文本最低端之间是有一定距离的

解决方案：

给行内块元素设置vertical，值不为baselinde即可
若父元素中只有一个图片，设置图片为display: block
给父元素设置font-size: 0

浮动

设计初衷是为了让文字环绕图片

特点

脱离文档流（相当于漂在天上）
不管浮动前是什么元素，浮动后：默认宽高都是被内容撑开，而且可以设置宽高
不会独占一行，可以与其他元素共用一行
不会出现margin塌陷和margin合并的问题
不会像行内块一样被当做文本处理（没有行内块的空白问题）

浮动后的影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；但是对前面的兄弟无影响
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素

清除浮动产生的影响

给父元素指定高度
给父元素也设置为浮动
给父元素设置overflow: hidden
在所有浮动元素的最后，添加一个块级元素，并给该元素设置clear: both
给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理同4 （推荐使用）
```
.parent::after {
  content: '';
  display: block;
  clear: both;
}
```

布局原则：设置浮动的时候，要么兄弟元素全都浮动，要么全都不浮动

定位

相对定位

语法：position: relative（可以使用left、right、top、bottom四个属性调整位置）

参考点：相对自己原来的位置

特点：

不会脱离文档流，元素位置的变化只是视觉效果上的变化，不会对其他元素产生影响
定位元素显示的层级比普通元素高（如果两个元素都开启了相对定位，则后面元素会覆盖在前面元素身上），无论什么定位，显示层级都是一样的
left不能和right一起设置，top和bottom不能一起设置
相对定位的元素，也能开启浮动，但不推荐
相对定位的元素，也能通过margin调整位置，但不推荐

绝对定位

未完待续

固定定位

未完待续

粘性定位

未完待续

为毛哩

关注

21
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
【css】基础知识

是一个相对单位，1 像素就代表屏幕上一个电子发光点，相同屏幕尺寸，分辨率越高的像素点越多，对应看。，即：0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f；所以每一种光的最小值是。对应单词为 red、gree、blue，分别代表太阳光中的红、绿、蓝，rgb 的值范围是。且无单位，数值越大，字体约粗（或一样粗，具体要看设计字体的时候支持了哪些）1. 内部样式、外部样式优先级相同，且：后面的会覆盖前面的（后来着居上）的值不要使用纯数字、中文，尽量使用英文，若由多个单词组成，使用。
复制链接

扫一扫