CSS学习笔记

2301_81208699

已于 2024-11-10 14:32:24 修改

阅读量664

点赞数 19

CC 4.0 BY-SA版权

文章标签： css 学习笔记

于 2024-11-03 11:43:09 首次发布

本文链接：https://blog.youkuaiyun.com/2301_81208699/article/details/143271490

一、初识css

（一）样式

1.行内样式

写在标签的style属性中
语法：

<h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1>

注意点：
1. style 属性的值不能随便写，写要符合 CSS 语法规范，是名:值; 的形式。
2. 行内样式表，只能控制当前标签的样式，对其他标签无效。

2.内部样式

写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中。
语法：

<style>

h1 {

color: red;

font-size: 40px;

}

</style>

注意：<style>标签一般都在<head>标签中

3.外部样式

写在单独的 .css 文件中，随后在 HTML 文件中引入使用
语法：

1. 新建一个扩展名为 .css 的样式文件，把所有 CSS 代码都放入此文件中

h1{

color: red;

font-size: 40px;

}

2. 在 HTML 文件中引入 .css 文件

<link rel="stylesheet" href="./xxx.css">

注意点：

1. <link> 标签要写在 <head> 标签中。

2. <link> 标签属性说明：

href ：引入的文档来自于哪里。
rel ：( relation ：关系）说明引入的文档与当前文档之间的关系。
3. 外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速

度，实现了结构与样式的完全分离。

4. 实际开发中，几乎都使用外部样式，这是最推荐的使用方式！

3.样式表优先级

优先级规则：行内样式 > 内部样式 = 外部样式

1. 内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（简记：“后来

者居上”）。

2. 同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来

者居上”）。

（二）语法规范

1.构成

CSS 语法规范由两部分构成：

选择器：找到要添加样式的元素。
声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名: 属性值；

备注1：最后一个声明后的分号理论上能省略，但最好还是写上。

备注2：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好

还是写上。

2.注释的写法：

/* 给h1元素添加样式 */

h1 {

/* 设置文字颜色为红色 */

color: red;

/* 设置文字大小为40px */

font-size: 40px

}

二、基础知识

（一）基本选择器

1.通配选择器

作用：可以选中所有的 HTML 元素。

语法：

* {

属性名: 属性值;

}

2.元素选择器

作用：为页面中 某种元素 统一设置样式。
语法：

标签名 {

属性名: 属性值;

}

/* 选中所有h1元素 */
h1 {
     color: orange;
     font-size: 40px;
}
/* 选中所有p元素 */
p {
     color: blue;
     font-size: 60px;
}

3 .类选择器

作用：根据元素的 class 值，来选中某些元素。
class 翻译过来有：种类、类别的含义，所以 class 值，又称：类名。
语法：

.类名 {

属性名: 属性值;

}

举例：

注意点：

4.ID选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。
语法：

#id值 {

属性名: 属性值;

}

注意：

id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空

格、区分大小写。

一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。

一个元素可以同时拥有 id 和 class 属性。

（二）复合选择器

1 .交集选择器

注意：

1. 有标签名，标签名必须写在前面。

2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没

有意义。

3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元

素。

4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

2.并集选择器

注意：

1. 并集选择器，我们一般竖着写。

2. 任何形式的选择器，都可以作为并集选择器的一部分。

3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

3. HTML元素间的关系

分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

1. 父元素：直接包裹某个元素的元素，就是该元素的父元素。

2. 子元素：被父元素直接包含的元素（简记：儿子元素）。

3. 祖先元素：父亲的父亲......，一直往外找，都是祖先。

4. 后代元素：儿子的儿子......，一直往里找，都是后代。

5. 兄弟元素：具有相同父元素的元素，互为兄弟元素。

4.后代选择器

5.子代选择器

6.兄弟选择器

7.属性选择器

作用：选中属性值符合一定要求的元素。
语法：

1. [属性名] 选中具有某个属性的元素。

2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。

3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。

4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。

5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

8.伪类选择器

一、动态伪类

二、结构伪类

常用的：

1. :first-child 所有兄弟元素中的第一个。

2. :last-child 所有兄弟元素中的最后一个。

3. :nth-child(n) 所有兄弟元素中的第 n 个。

4. :first-of-type 所有同类型兄弟元素中的第一个。

5. :last-of-type 所有同类型兄弟元素中的最后一个。

6. :nth-of-type(n) 所有同类型兄弟元素中的第n个。

关于 n 的值：

1. 0 或不写：什么都选不中 —— 几乎不用。

2. n ：选中所有子元素 —— 几乎不用。

3. 1~正无穷的整数：选中对应序号的子元素。

4. 2n 或 even ：选中序号为偶数的子元素。

5. 2n+1 或 odd ：选中序号为奇数的子元素。

6. -n+3 ：选中的是前 3 个

三、否定伪类

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

四、UI伪类

1. :checked 被选中的复选框或单选按钮。

2. :enable 可用的表单元素（没有 disabled 属性）。

3. :disabled 不可用的表单元素（有 disabled 属性）。

五、目标伪类（了解）

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

六、语言伪类（了解）

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

七、伪元素选择器

八、选择器优先级（权重）

（三）三大特性

1.层叠性

2.继承性

3.优先级

（四）CSS常用属性

1.像素的概念

概念：我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。
规律：像素点越小，呈现的内容就越清晰、越细腻。

2.颜色的表示

3.字体属性

字体大小

字体族

字体风格

字体粗细

字体符合写法

4.CSS文本属性

文本颜色

文本间距

文本修饰

文本缩进

文本对齐_水平

文本对齐_垂直

vertical-align

5.CSS列表属性

列表相关的属性，可以作用在 ul 、 ol 、 li 元素上

6.CSS表格属性

边框相关属性（其他元素也能用）：

表格独有属性（只有 table 标签才能使用）：

7.CSS背景属性

（五）盒子模型

1.CSS长度单位

2.元素的显示模式

3. 总结各元素的显示模式

4. 修改元素的显示模式

通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：

5. 盒子模型的组成

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

1. margin（外边距）： 盒子与外界的距离。

2. border（边框）： 盒子的边框。

3. padding（内边距）： 紧贴内容的补白区域。

4. content（内容）：元素中的文本或后代元素都是它的内容