当前位置：首页 > article >正文

二、CSS笔记

article 2025/2/2 19:09:10

（一）css概述

1、定义

CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

2、要点

怎么找到标签

怎么操作标签对象（element）

3、css的四种引入方式

3.1 行内式

在标签的style属性中设定CSS样式。这种方式不需要再找标签对象，但没有体现出CSS样式分离的优势，不推荐使用。
<p style="background-color: rebeccapurple">hello yuan</p>

3.2 嵌入式：

将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3.3 链接式

通过html语言规范将一个.css文件引入到HTML文件中：
<head>
    <link href="mystyle.css" rel="stylesheet" type="text/css"/>
</head>

3.4 导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css">
	@import"mystyle.css";   // 此处要注意.css文件的路径
</style>　

3.5 推荐方式

导入式固有的一个缺陷：会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。

链接式会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

推荐链接式。

（二）css选择器

css的选择器（Selector），指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素，是写css代码的第一个要点，找标签

1、基础选择器

1.1 通用选择器*

一个星号*，匹配任何元素，如：
* { margin:0; padding:0; }  // 设置所有标签外边距和内边距为0像素

1.2 标签选择器E

直接匹配标签本身，如：
p { color:green; }  // 设置所有<p>标签的字体颜色是green

1.3 class选择器.info或E.info

匹配所有class属性中包含info的元素，可与标签选择器配合使用，如：
.info { background-color:#ff0; }  // 设置class属性包含info的标签背景颜色是#ff0
div.info { background-color:#ff0; }  // 设置class属性包含info的<div>标签背景颜色是#ff0

1.4 id选择器#info

匹配id属性等于info的元素，因为标签的id是唯一标识的，所以只会匹配符合的那一个标签，如：
#info { background-color:#ff0; }  // 设置id为info的标签背景颜色是#ff0

2、组合选择器

2.1 多元素选择器E,F

同时匹配所有E元素和F元素，E和F之间用逗号分隔，如：
div,p { color:#f00; }  // 设置所有<div>标签和<p>标签的字体颜色是#f00

2.2 后代元素选择器E F

匹配所有属于E元素后代的F元素（嵌套在E标签里的F标签，不论多少层），E和F之间用空格分隔，如：
li a { font-weight:bold;}  // 设置所有<li>标签的所有子孙<a>标签的字体加粗

2.3 子元素选择器E>F

匹配所有E元素的子元素F（只能是紧挨着嵌套的一层），如：
div > p { color:#f00; }  // 设置所有<div>标签的所有子标签<p>元素的字体颜色是#f00

2.4 毗邻元素选择器E+F

匹配所有紧随E元素之后的同级元素F，如：
div + p { color:#f00; }  // 设置所有紧随在<div>标签之后的<p>标签的字体颜色是#f00

3、属性选择器（主要用1和2，其他了解即可）

3.1 E[att]

匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。），如：
p[title] { color:#f00; }  // 设置所有具有title属性（不论何值）的<p>标签字体颜色为#f00
[title] { color:#f00; }  // 设置所有具有title属性（不论何值）的标签字体颜色为#f00

3.2 E[att=val]

匹配所有att属性等于“val”的E元素，如：

p[title="game"] { color:#f00; }  // 设置所有title属性="game"的<p>标签字体颜色为#f00
[title="game"] { color:#f00; }  // 设置所有title属性="game"的标签字体颜色为#f00

3.3 E[att~=val]

匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素，如：

p[title~="game"] { color:#f00; }  // 设置所有title属性有多个值，其中一个值="game"的<p>标签字体颜色为#f00
[title~="game"] { color:#f00; }  // 设置所有title属性有多个值，其中一个值="game"的标签字体颜色为#f00

3.4 E[att^=val]

匹配属性值以指定值开头的每个元素，如：

p[title^="ga"] { color:#f00; }  // 设置所有title属性的值以"ga"开头的<p>标签字体颜色为#f00
[title^="ga"] { color:#f00; }  // 设置所有title属性的值以"ga"开头的标签字体颜色为#f00

3.5 E[attr$=val]

匹配属性值以指定值结尾的每个元素，如：

p[title$="ga"] { color:#f00; }  // 设置所有title属性的值以"ga"结尾的<p>标签字体颜色为#f00
[title$="ga"] { color:#f00; }  // 设置所有title属性的值以"ga"结尾的标签字体颜色为#f00

3.6 E[attr*=val]

匹配属性值中包含指定值的每个元素，如：

p[title*="ga"] { color:#f00; }  // 设置所有title属性的值包含"ga"的<p>标签字体颜色为#f00
[title*="ga"] { color:#f00; }  // 设置所有title属性的值包含"ga"的标签字体颜色为#f00

4、伪类(Pseudo-classes)

CSS伪类是用来选择元素的特定状态或位置的选择器。

以冒号(:)开头，用于向特定元素在特定状态下应用样式。

伪类的作用是根据元素的状态或位置来改变其样式，这些状态可能包括用户交互（如鼠标悬停、点击）或元素自身的状态（如已访问链接、禁用表单元素）。

伪类通常与元素选择器结合使用，以选择元素的特定状态，如a:hover用于选择鼠标悬停时的链接。

格式: 标签:伪类名称{ css代码; }

4.1 anchor（锚点）伪类

又称为链接伪类，主要用于选择和样式化HTML中的<a>标签，控制链接的显示效果，这些伪类根据锚点的不同状态来应用特定的样式。以下是常见的锚点伪类：

‌:link‌：

选择所有尚未访问过的链接（即默认状态下的链接）。

用于定义了链接的常规状态

示例：a:link { color: blue; } 会将所有未访问的链接文本设置为蓝色。

‌:visited‌：

选择所有已经访问过的链接。

用于阅读文章，能清楚的判断已经访问过的链接。

示例：a:visited { color: purple; } 会将所有已访问的链接文本设置为紫色。

出于隐私考虑，现代浏览器对:visited伪类能应用的样式有所限制，通常只能改变颜色。

‌:hover‌：

选择鼠标悬停时的链接。

用于产生视觉效果。

示例：a:hover { text-decoration: underline; } 会在鼠标悬停时给链接添加下划线。

‌:active‌：

选择被用户激活（通常是点击）时的链接。

用于表现鼠标按下时的链接状态。

示例：a:active { color: red; } 会在链接被点击时将其文本颜色改为红色。

‌:focus‌：

选择获得焦点的链接（通常通过键盘（Tab）导航或点击获得）。

常用于添加表单元素的样式

示例：a:focus { outline: 2px dashed #000; } 会在链接获得焦点时给其添加一个黑色的外框虚线轮廓，焦点消失后消失。

这些伪类可以按照特定的顺序来编写（也称为“Love-Hate”顺序）：:link -> :visited -> :hover -> :active。这个顺序是基于用户与链接交互的自然流程，从未访问到访问，再到悬停和激活。按照这个顺序编写样式规则可以确保它们按照预期的方式覆盖和应用。
<head lang='zh-CN'>
<style type="text/css">
    a:link {
    color: blue;
    text-decoration: none;
    }

    a:visited {
        color: purple;
    }

    a:hover {
        text-decoration: underline;
    }

    a:active {
        color: red;
    }

    a:focus {
        outline: 2px dashed #000;
    }
    
    // 补充：可以悬浮一个区域更改另一个区域的样式，如：
    .outer:hover .right{color: red}
</style>
</head>
<body>
    <div class="outer">
        <a href="#">hello-world</a>
        <a class="right" href="#">go-on</a>
    </div>
</body>
</html>

4.2 其它伪类

动态伪类（如:hover、:active和:focus）不仅限于链接元素，还可以应用于任何HTML元素。在表单中，这些动态伪类可以用来增强用户交互体验，例如当用户将鼠标悬停在按钮上时改变按钮的样式，或者当输入框获得焦点时改变其边框颜色。

结构伪类（如:first-child、:last-child、:nth-child、:nth-of-type(n)、:only-child‌、:only-of-type‌等）则用于选择具有特定结构关系的元素，与anchor伪类不同，它们不依赖于元素的状态，而是基于元素在文档树中的位置。

‌否定伪类:not(selector)‌：选择不匹配指定选择器的元素。例如，:not(.class)选择没有.class类的元素。

UI元素状态伪类:checked‌：选择被选中的表单元素（例如，复选框或单选按钮）。

UI元素状态伪类:disabled‌：选择被禁用的表单元素。

:empty‌：选择没有任何子元素（包括文本节点）的元素。

:target‌：选择当前活动的锚点目标元素。常用于制作页面内跳转。

:valid‌ 和 ‌:invalid‌：分别用于选择通过验证和未通过验证的表单元素（如<input>元素）。

5、伪元素Pseudo-elements

概念与用途：

用来在元素的内容前面或后面插入额外的内容的选择器。

它们以双冒号(::)开头（尽管在CSS2中伪元素也可以使用单冒号，但为了区分伪类和伪元素，CSS3规范推荐使用双冒号），用于向元素的特定部分应用样式。

伪元素的作用是在元素的内容前面或后面插入文档树之外的内容，并对其进行样式修饰，虽然用户可以看到这些伪元素生成的内容，但它们实际上并不存在于DOM树中。

常见的伪元素包括::before、::after、::first-letter、::first-line等

使用方式‌：在元素选择器后添加双冒号和伪元素名称，如p::before用于在段落内容前插入额外内容。

5.1 before after伪元素

:before和:after是CSS中的伪元素（在CSS3中更推荐使用双冒号形式::before和::after来表示伪元素，以与伪类区分开）

它们允许你在一个元素的内容之前或之后插入内容。这些插入的内容不会出现在DOM中，而是通过CSS生成的，通常用于添加装饰性内容，如图标、引号或其他视觉效果。

（1）基本用法

:before：在选定元素的内容之前插入内容。

:after：在选定元素的内容之后插入内容。

这两个伪元素必须与content属性一起使用，以定义要插入的内容，否则它们不会生效。

content属性可以包含字符串、图像或其他可用CSS生成的内容。

不改变DOM结构‌：虽然:before和:after可以在视觉上添加内容，但这些内容不会出现在DOM中，因此不会改变文档的实际内容。

可以像对待普通元素一样对:before和:after伪元素应用样式和行为，包括设置宽度、高度、背景、边框等。

兼容性‌：虽然:before和:after在大多数现代浏览器中都得到了很好的支持，但使用双冒号形式::before和::after可以提高代码的清晰度和兼容性，因为双冒号形式是CSS3的推荐写法。

（2）示例

p::before {
    content: "《";
    color: blue;
}

p::after {
    content: "》";
    color: blue;
}
// 上面的CSS代码会在每个<p>元素的内容之前插入一个蓝色的“《”，在其内容之后插入一个蓝色的“》”

（3）应用场景

添加装饰性内容‌：如图标、引号、分隔符等。

‌清除浮动‌：通过:after伪元素和clear属性来清除浮动元素对父元素高度的影响。

‌创建自定义列表样式‌：在列表项前或后插入自定义样式。

（4）注意事项

虽然:before和:after伪元素非常强大且灵活，但它们应该被用于添加装饰性内容，而不是有实际意义的内容，因为用户无法复制或与之交互这些通过CSS生成的内容。

（三）css优先级和继承

1、优先级Specificity

CSS样式在浏览器中被解析的先后顺序，决定当多个样式规则应用于同一个HTML元素时，哪个样式规则最终会被应用的机制。

优先级由选择器的类型决定，并且可以通过特定的计算方法来量化。

1.1 计分规则

CSS优先级由四个部分组成，按照优先级从高到低排列如下：

‌内联样式（Inline Styles）‌：

优先级最高，直接写在HTML元素的style属性中。

计算分数：1000分。

‌ID选择器（ID Selectors）‌：

优先级次之，使用#符号标识。

计算分数：100分。

‌类选择器、伪类选择器、属性选择器（Class Selectors, Pseudo-Class Selectors, Attribute Selectors）‌：

优先级再次之，分别使用.、:和[]标识。

计算分数：10分。

‌元素选择器、伪元素选择器（Element Selectors, Pseudo-Element Selectors）‌：

优先级最低，使用HTML元素名称标识。

计算分数：1分。

1.2 优先级算法

每个CSS选择器都有一个特定的优先级分数，这个分数由选择器的类型决定，参看1.1计分规则；

当存在多个选择器组合时，分数累加；

总分越高，优先级越高；

特殊权重：!important，使一个样式的优先级高于其他任何非内联样式的优先级，但低于内联样式的优先级。

如果!important声明冲突，则比较优先权。

优先级相同，按照代码顺序，后定义的样式覆盖前面的。

由继承而得到的样式没有specificity的计算，它低于一切其它规则，比如全局选择符*定义的规则。

使用!important虽然可以强制某一条样式规则生效，但应尽量避免滥用，因为它会破坏CSS的层叠特性，导致样式难以维护。

1.3 应用技巧

合理组合选择器‌：当需要覆盖某个样式时，可以通过组合多个选择器来提高优先级。

‌避免过度复杂的选择器‌：虽然可以通过组合选择器来达到较高的优先级，但也会使得选择器变得过于复杂，不利于维护。

‌使用源顺序作为最后的手段‌：当两个选择器具有相同的优先级时，源顺序（即样式表的出现顺序）决定了哪一个规则将被应用，后面的会覆盖前面的，因为CSS的层叠顺序决定了样式的应用方式‌ 。

1.4 示例

<head lang="en">
    <style>
        #p{
            color: rebeccapurple;
        }
        .p{
            color: #2459a2;
        }
        p{
            color: yellow;
        }
    </style>
</head>
<body>
    <p id="p" class="p" style="color: deeppink">hello yuan</p> <!--最终显示颜色：deeppink-->
</body>

1.5 注意事项

在实际开发中，合理利用优先级规则可以帮助我们更好地组织和管理样式表。

使用浏览器的开发者工具来检查元素的实际样式，可以帮助诊断样式未按预期显示的原因。

2、css继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

例如一个BODY定义了的颜色值也会应用到段落的文本中。

简单来说，父标签的样式会被内嵌的子孙标签所继承，除非子元素显式地设置了不同的值。

即使父元素的权重很高，子元素通过继承得到的权重也是0，任何显示申明的规则都可以覆盖其继承样式。这是因为继承的权重在CSS的优先级计算中是不被考虑的‌。

实际开发中，可以利用CSS的继承特性来简化样式表的编写，避免在多个子元素上重复设置相同的样式属性。

同时，也需要注意非继承属性的使用，确保在需要时显式地为子元素设置这些属性‌。

2.1 常见继承属性

字体（font）系列属性、文本（text）系列属性、颜色（color）属性、可见性（visibility）属性、光标（cursor）属性等。这些属性在父元素上设置后，子元素通常会继承相同的值‌

2.2 常见非继承属性

一些属性是不会被继承的，常见的非继承属性包括布局相关属性，如宽度（width）、高度（height）、边框（border）、外边距（margin）、内边距（padding）、背景（background）和显示类型（display）等。这些属性在父元素上设置后，子元素不会继承相同的值，除非子元素显式地设置了这些属性‌

（四）CSS的单位

在CSS中，单位用于指定元素的大小、间距、字体大小等属性。这些单位可以分为绝对单位、相对单位和自动（auto）三种类型。

1、绝对单位

绝对单位表示一个固定的值，在不同设备和环境下保持固定，不会因屏幕大小或分辨率以及浏览器设置而改变。常见的绝对单位包括：

‌px（像素）‌：

最常用的绝对单位，基于屏幕的分辨率。一个像素通常对应于屏幕上的一个点。

由于不同设备和屏幕的像素密度不同，相同的像素值在不同设备上可能会呈现不同的物理尺寸。

‌in（英寸）‌：

基于实际物理长度，1英寸等于2.54厘米。

‌cm（厘米）‌：

基于实际物理长度。

‌mm（毫米）‌：

基于实际物理长度。

‌pt（点）‌：

通常用于打印样式，1点等于1/72英寸。

2、相对单位

相对单位是基于其他元素的大小或视口（viewport）的大小来定义的，因此它们会根据父元素或视口的大小而改变，使得布局更加灵活和响应式，因为它们能够根据屏幕尺寸或用户设置自动调整元素的大小。常见的相对单位包括：
‌%（百分比）‌：

相对于父元素的大小。例如，如果父元素的宽度是200px，而子元素的宽度设置为50%，那么子元素的宽度就是100px。

‌em‌：

相对于当前元素的字体大小。例如，如果元素的字体大小为16px，那么1em就等于16px。
‌rem‌：
相对于根元素（<html>）的字体大小（很多浏览器的默认值是16px）的倍数。
使用场景：
响应式设计：通过简单地改变根元素的字体大小来调整整个页面的布局，而不需要逐个修改每个元素的 padding、margin 或其他长度属性，这使得布局更加灵活和响应式

‌一致性‌：使用 rem 可以确保在整个页面中，不同元素之间的间距保持一致性，特别是当你想要在不同的屏幕尺寸或设备上保持一致的视觉效果时。

可访问性‌：当用户通过浏览器设置改变字体大小时，使用 rem 单位的布局会自动调整以适应新的字体大小，满足可访问性需求。
/* 设置所有段落元素的内边距为 1rem */
p {
  padding: 1rem;
}

/* 设置特定类的内边距 */
.my-class {
  padding: 1rem;
}
/*在上述示例中，无论是段落元素还是具有特定类的元素，它们的内边距都将被设置为 1rem。这意味着，如果根元素的字体大小是 16px，那么这些元素的内边距将是 16px。如果根元素的字体大小改变，那么这些元素的内边距也会相应地改变
*/
‌vw和vh（视口宽度和高度）‌：
相对于视口（视口是用户网页的可视区域，它随着窗口的缩放而改变）宽度（Viewport Width）和高度（Viewport Height）的1%。

例如，1vw等于视口宽度的1%，1vh等于视口高度的1%，100vw等于当前视口的完整宽度，100vh 等于当前视口的完整高度。

使用场景：

全屏布局‌：当你想要创建一个占据整个浏览器窗口高度的元素时，可以使用 height: 100vh;。这对于创建全屏背景、全屏图像或全屏视频等效果特别有用。

响应式设计‌：虽然 vh 单位本身不是响应式的（因为它基于视口大小，而不是基于元素或父容器的大小），但你可以结合媒体查询来使用它，以在不同的屏幕尺寸下调整元素的高度。

创建垂直滚动效果‌：如果你有一个内容区，你希望它在垂直方向上滚动，并且这个区域的高度应该与视口高度相匹配，那么你可以使用 height: 100vh; 来设置这个区域的高度。

注意事项：

视口变化‌：当浏览器窗口的大小改变时，使用 vh 单位设置的高度也会相应地改变。这意味着，如果你的布局依赖于特定的视口高度，你需要确保在视口大小变化时，布局仍然能够保持可用和美观。

兼容性‌：虽然现代浏览器都支持 vw和vh 单位，但在一些较旧的浏览器或某些特定的浏览器环境中（如某些移动设备的浏览器），可能不支持或支持不完全。因此，在使用 vw或vh 单位时，最好进行跨浏览器测试。

内边距、边框和外边距‌：记得 height 属性只设置内容区的高度。如果你想要包括内边距、边框或外边距在内的总高度与视口高度相匹配，你可能需要使用 box-sizing 属性来调整元素的盒模型。
示例：
示例
/* 设置全屏背景 */
.full-screen-background {
  height: 100vh;
  background-color: #333; /* 示例背景颜色 */
}

/* 创建垂直滚动的内容区 */
.content-area {
  height: 100vh;
  overflow-y: auto; /* 允许垂直滚动 */
}
‌vmin‌ 和 ‌vmax‌：

分别基于视口的最小和最大边。1vmin等于视口最小边的1%，1vmax等于视口最大边的1%。

3、自动auto

auto不是一个具体的单位，而是一个特殊的关键字，用于让浏览器自动计算元素的大小或位置，例如：

使用width: auto;可以让浏览器根据内容的大小自动调整元素的宽度；

margin: auto;可以用于水平居中对齐块级元素。

4、适用场景

在实际开发中，选择合适的单位取决于具体的需求和上下文。

绝对单位适用于需要精确控制元素大小的情况；

相对单位则更适合创建响应式布局；

自动（auto）则提供了一种让浏览器自动处理布局细节的方法，从而简化了开发过程。

（五）CSS的常用属性

1、颜色属性color

值的表示方法：

颜色的英文单词，如：<div style="color:blueviolet">ppppp</div>

颜色的十六进制代码，如：<div style="color:#ffee33">ppppp</div>

用红、绿、蓝三种颜色的十进制调合表示，rgb(0~255，0~255， 0~255)，如：<div style="color:rgb(255,0,0)">ppppp</div>

用红、绿、蓝三种颜色的十进制调合表示+透明度，rgba(0~255，0~255， 0~255，0~1)，如：<div style="color:rgba(255,0,0,0.5)">ppppp</div>

各种表示方法的颜色表，可以参照：https://blog.csdn.net/2301_78888169/article/details/143754235

2、字体属性font

字体大小：font-size，可用像素px/百分比%/较大larger或较小smaller表示: 20px/50%/larger(smaller)

字体类型：font-family:'Lucida Bright'

字体粗细：font-weight，用数字100到100以及lighter/bold/border表示

斜体：font-style: inherit/italic/normal/oblique

3、背景属性background

背景颜色：background-color: cornflowerblue（值参考8.1颜色属性）

背景图片：background-image: url('图片路径');（图片尺寸不会变化，如果小于背景区域，则空白部分会复制图片平铺满）

背景图片是否平铺：background-repeat: no-repeat;(repeat:平铺满，repeat-x横向平铺，repeat-y纵向平铺，no-repeat不平铺)

背景位置：background-position: right top（或20px 20px）;(横向位置：left center right)(纵向位置：top center bottom)（与左部横向距离：20px）（与顶部纵向距离ÿ

查看全文

http://www.kler.cn/a/528821.html