-
CSS基础
1 概念
1.1 介绍
CSS：层叠样式表(英文全称：Cascading Style Sheets)，是一种用于描述网页或文档样式的标记语言。它与 HTML（Hypertext Markup Language）一起被广泛用于网页设计和开发中。
层叠：多个样式可以作用在同一个html的元素上，同时生效
1.2 作用
CSS 的主要作用是为 HTML 或其他 XML（eXtensible Markup Language）文档提供样式和布局。使用 CSS，你可以定义文档的外观和风格，包括字体、颜色、大小、边距、背景等。
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
2 CSS的优势
- 分离样式和内容：CSS 允许将文档的样式与结构分离。通过将样式单独定义在 CSS 文件中，可以使 HTML 文档更加清晰、易于阅读和维护。同时，如果多个页面使用相同的样式，可以很方便地通过链接同一个外部样式表来实现样式的重用。
- 灵活性和可重用性：CSS 提供了丰富的选择器和样式属性，使得对元素的样式设计更加灵活和精确。可以轻松地对不同类型的元素应用样式，也可以根据不同的条件选择特定的元素进行样式修改。此外，通过引入外部样式表，可以在多个页面之间共享样式，实现样式的可重用性。
- 页面加载速度和性能优化：使用 CSS 可以将网页的样式信息集中管理，这样浏览器只需要下载一次样式文件即可。相比内联样式或内部样式表，外部样式表可以被浏览器缓存，从而减少数据传输量和页面加载时间，提高加载速度和用户体验。
- 响应式布局和移动优化：CSS 提供了强大的布局、定位和响应式设计功能。通过使用 CSS 媒体查询和弹性布局等技术，可以轻松实现适应不同设备尺寸和屏幕大小的响应式布局。这使得网页在不同的设备上都能够提供良好的用户体验，并优化移动设备上的显示效果。
- 可扩展性和维护性：CSS 具有层叠的特性，可以方便地进行样式的重用、继承和覆盖。这样，在修改样式时只需更新相应的 CSS 规则，而不需要逐个修改 HTML 元素。这提高了代码的可维护性，并减少了代码冗余。
3 CSS的使用
3.1 内联样式
在 HTML 元素的 style 属性中直接编写 CSS 样式。
语法： <html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my csshtml标签> 案例： <p style="color: red; font-size: 16px;">这是一段红色且字号为 16 像素的文本。p>- 1
- 2
- 3
- 4
内联样式适用于只在当前元素中应用样式且不需要复用的情况。
3.2 内部样式表
在 HTML 文档的 标签中，使用
"box">这是浮动元素周围的文本内容。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
9.4 clear–清除浮动
clear 属性用于清除浮动元素对其后面内容布局的影响，使得后续元素不会环绕在浮动元素的周围。
9.4.1 属性取值
- clear: none;：默认值，表示不清除浮动。
- clear: left;：清除左侧的浮动元素对当前元素的影响。
- clear: right;：清除右侧的浮动元素对当前元素的影响。
- clear: both;：清除左右两侧的浮动元素对当前元素的影响，使得当前元素在浮动元素下方单独显示。
9.4.2 演示
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动title> <style> div{ width: 400px; height: 200px; margin-bottom: 10px; } style> head> <body> <div style="background: rgba(255,0,0,0.5); float: left;"> div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动 div> <div style="background: lawngreen; width: 600px; height: 350px; "> div2-未浮动，常规文档流, <br/>PS:此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互不影响 如果不想让div2被浮动元素影响，需要添加clear属性。 添加clear: left;之后div2就会忽略div1浮动的影响，在div1层后面显示，不会重叠了，大家可以自己试验一下 div> <div style="background: lightblue; float: right; width: 1800px;"> div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动 div> <div style="background: lightcoral; width: 600px; height: 350px; "> div4-未浮动，常规文档流, <br/>PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互不影响 如果不想让div4被浮动元素影响，需要添加clear属性。 添加clear: right;之后div4就会忽略div3浮动的影响，在div3层后面显示，不会重叠了，大家可以自己试验一下 clear属性有三个取值：left、right、both;分别是取出左浮动、有浮动和所有浮动元素的影响 div> <div style="background: lavender;"> div5-未浮动，常规文档流, div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
10 overflow
overflow 属性用于控制内容溢出容器时的处理方式。
它可以应用于包含块级元素的容器，具体效果取决于属性的取值。值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 注意 ：
- overflow 属性只工作于指定高度的块元素上。
- 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。
11 Display(显示) 与 Visibility（可见性）
display 属性和 visibility 属性都用于控制元素在网页中的显示方式
11.1 display
- display 属性控制元素在布局中占据的空间以及元素的显示方式。
- 修改 display 属性会改变元素的布局，并且可能影响相邻元素的位置。
值 描述 display: block; 元素将被显示为块级元素，会独占一行并撑满其父容器的宽度。 display: inline; 元素将被显示为内联元素，不会独占一行，宽度由内容决定。 display: inline-block; 元素将被显示为内联块级元素，不会独占一行，可以设置宽度、高度等属性。 display: none; 元素将被隐藏，不会在页面上占据空间，无法与其交互。 11.2 visibility
- visibility 属性控制元素的可见性。
- 修改 visibility 属性不会改变元素的布局，元素仍然占据原来的空间，只是其可见性发生变化。
值 描述 visibility: visible; 元素是可见的，默认值。 visibility: hidden; 元素是隐藏的，但仍然占据在布局中的位置。 visibility: collapse; 仅适用于表格相关元素，元素被隐藏，且表格的布局会进行调整。 12 复合选择器
由两个或多个基础选择器，通过不同方式组合而成的。
可以更准确更精细的选择目标元素标签。12.1 并集选择器
并集选择器（Union Selector）是CSS中的一种选择器，它可以选择同时满足多个选择器条件的元素。
并集选择器使用逗号（,）将多个选择器组合在一起，它选取了满足任意一个选择器条件的所有元素。
/*通过并集选择器 .button, .link，同时选择带有 class 为 "button" 和 "link" 的元素，并将它们的文本颜色设置为红色并加粗显示 */"button">这是一个按钮
"link" href="#">这是一个链接- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
12.2 交集选择器
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
/* 通过 .button.special 这个选择器，选择同时具有 class 为 "button" 和 "special" 的按钮元素，并将其背景颜色设为红色，文字颜色设为白色 */- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
12.3 后代选择器
后代选择器（Descendant Selector）是CSS中的一种选择器，它可以选择指定元素的所有后代元素。
后代选择器使用空格（ ）来表示选择器之间的关系。它会匹配在指定元素内的所有后代元素，无论是子元素、孙子元素还是更深层次的后代元素。
/* 通过后代选择器 ul li，选择- 元素内的所有
- 元素，并将它们的文本颜色设置为蓝色 */
- 列表项1
- 列表项2
- 列表项3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
12.4 子元素选择器
子元素选择器（Child Selector）是CSS中的一种选择器，用于选择指定元素的直接子元素。
子元素选择器使用大于号（>）表示选择器之间的关系。它只会匹配指定元素的直接子元素，而不会匹配更深层次的后代元素。
/* 通过子元素选择器 ul > li，选择- 元素下的直接子元素
- 元素，并将它们的文本颜色设置为蓝色。 注意，在这个选择器中，嵌套在第三个
- 中的
- 元素并没有被选择，因为它们不是直接子元素。 */
- 列表项1
- 列表项2
-
列表项3
- 嵌套列表项A
- 嵌套列表项B
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
12.5 伪类选择器
伪类选择器（Pseudo-class Selector）是CSS中的一种选择器，用于选择具有特殊状态的元素。它可以针对链接、表单、鼠标事件等动态变化的样式进行设置。
伪类选择器使用冒号（:）表示选择器之间的关系。它一般用于根据元素的状态或行为来选择元素，例如选择鼠标悬停时的元素、选择被点击时的元素等。
值 描述 :hover 选择鼠标悬停在上面的元素。 :active 选择被鼠标点击的元素。 :focus 选择获取焦点的元素，例如表单中的输入框。 :nth-child(n) 选择第 n 个子元素，其中 n 是一个数字，可以使用不同的表达式进行计算。 :first-child 和 :last-child 选择第一个和最后一个子元素。 "UTF-8">伪类选择器 "03-常用样式.html" target="_blank">常用样式 "04-盒子模型1.html" target="_blank">盒子模型 "05-综合练习.html" target="_blank">综合练习- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
注意
- 写的时候，他们的顺序尽量不要颠倒 按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
- 因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
- 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
12.6 复合选择器比对
选择器 作用 特征 使用情况 隔开符号及用法 后代选择器 用来选择元素后代 是选择所有的子孙后代 较多 符号是空格 p .one 子代选择器 选择 最近一级元素 只选亲儿子 较少 符号是 > .nav>p 交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one 并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav, .header 链接伪类选择器 给链接更改状态 较多 重点记住 a{} 和 a:hover 实际开发的写法 -
相关阅读:
【Angular】07管道pipe
6. Python数据类型之浮点数
.Net Web项目创建比较不错的参考文章
让AI成为你的编程助手——DevChat AI插件在VSCode中的应用
极简7照训练法，奇趣相机引领儿童AI摄影潮流
大龄程序员思考
Python 在Word中查找并高亮指定文本
word2vec
刷题记录（NC235611 牛牛国的战争，NC23803 DongDong认亲戚，NC235622 叠积木）
都这麽大了还不快了解IDS？
- 原文地址：https://blog.csdn.net/qq_58216564/article/details/132698260
