Web - CSS3基础语法与盒模型

server/2025/2/5 22:20:56/

概述

这篇文章是关于 Web 前端 CSS3 的基础语法与盒模型的讲解。包括 CSS3 层叠性及处理冲突规则、伪元素和新增伪类元素、属性选择器等。还介绍了文本与字体属性,如段落和行相关属性、字体文本属性。最后阐述了盒子模型,如元素隐藏、行内与块元素转换、盒子构成及相关属性等。

css3__3">css3 层叠样式表

css全名叫做层叠样式表,层叠性是它很重要的性质,多个选择器可以同时作用于同一个标签,效果叠加。

css有严密的处理冲突的规则:ID权重 > Class权重 > 标签权重,复杂选择器可以通过个数的形式,计算权重:

项目权重值
ID2
Class1
Tag0
伪元素

1、::before 和::after

在被选元素的内容前面或后面插入额外的内容,常用来添加一些装饰性的元素或实现特定的布局效果。

p::before {content: "▶";color: blue;margin-right: 5px;
}p::after {content: "◀";color: green;margin-left: 5px;
}

2、::first-letter

用于选择并设置文本块中第一个字母的样式,可实现首字下沉等效果。

p::first-letter {font-size: 2em;color: red;float: left;margin-right: 5px;
}

3、::first-line

用来选择并设置文本块中第一行的样式,比如可以改变第一行文本的字体、颜色、背景等。

p::first-line {font-weight: bold;color: purple;
}

4、::selection

用于设置用户选中页面元素时的样式,包括文字选中时的背景色和文字颜色等。

p::selection {background-color: yellow;color: black;
}

5、::placeholder

用于设置表单输入框中占位文本的样式,可调整占位文本的颜色、字体等。

input::placeholder {color: gray;font-style: italic;
}

6、::marker

主要用于设置列表项标记(如项目符号或数字)的样式。

ul li::marker {color: red;font-size: 1.2em;
}
新增伪类元素

1、:empty 选择空标签
2、:focus 选择当前获得焦点的表单元素
3、:enabled 和 :disabled 分别匹配可使用(启用)和不可使用(禁用)的表单元素。
4、:checked 匹配被选中的表单元素,如复选框、单选框。
5、root 选择根元素,即<html>标签

属性选择器
举例意义
img[alt]选择有alt属性的img标签
img[alt=“故宫”]选择有alt属性是故宫的img标签
img[alt^=“北京”]选择有alt属性是北京开头的img标签
img[alt$=“夜景”]选择有alt属性是夜景结尾的img标签
img[alt*=“美”]选择有alt属性中含有美的img标签
img[alt~=“手机拍摄”]选择有alt属性中有空格隔开的手机拍摄字样的img标签
img[alt=“参赛作品”]
序号选择器
举例意义
:first-child选择父元素的第一个子元素
:last-child选择父元素的最后一个子元素
:nth-child(n)第n个子元素
:nth-of-type(n)选择父元素下指定类型的第n个元素,只针对指定类型的元素进行计数和选择,而不会考虑其他类型的元素
:nth-last-child(n)]从父元素的最后一个子元素开始计数,选择第n个元素
:nth-last-of-type(n)从父元素的最后一个指定类型的子元素开始计数,选择第n个元素
元素关系选择器
名称举例意义
子选择器div > pdiv的子标签p
相邻兄弟选择器img+p图片后面紧跟着的将被选中
通用兄弟选择器p~spanp元素之后的所有同层级span元素

文本与字体属性

文本相关的属性普遍具有继承性,只需要给祖先标签设置,即可在后代所有标签中生效。因为文字相关属性有继承性,所以通常会设置body标签的字号、颜色、行高等,这样就能当做整个网页的默认样式了。

继承性有一个重要的原则:就近原则,在继承的情况下,选择器权重计算失效,而是就近原则。

段落和行相关属性

1、text-indent

设置段落首行的缩进,可以使用长度值(如px、em、rem等)或百分比来指定缩进量。

p { text-indent: 2em; }

2、line-height

设置段落行与行之间的垂直间距,即行高。可以是数字、长度值或百分比。数字表示相对于字体大小的倍数;长度值直接指定行高的具体尺寸;百分比是相对于字体大小的比例。

p { line-height: 1.5; }

3、text-align

设置段落文本的水平对齐方式,left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)等。

p { text-align: center; }

4、letter-spacing

设置字符之间的水平间距,长度值,正值会增加字符间距,负值会减小字符间距。

p { letter-spacing: 2px; }

5、word-spacing

设置单词之间的水平间距,长度值,用于调整单词之间的间隔距离。

p { word-spacing: 5px; }
字体文本属性

1、font-family

指定文本使用的字体族。可以设置多个字体,按优先级排列,浏览器会依次尝试使用这些字体,直到找到可用的字体。

p {font-family: "微软雅黑", Arial, sans-serif;
}

2、font-size

设置字体的大小。可以使用多种单位,如 px(像素)、em 、rem、% 等,网页文字正文字号通常是16px,浏览器最小支持10px字号。

3. font-weight

设置字体的粗细程度。常见取值有 normal(正常粗细)、bold(粗体),还可以使用数字值,范围从 100 - 900,数字越大字体越粗。

strong {font-weight: bold;
}
span {font-weight: 600;
}

4、font-style

设置字体的样式,主要用于指定文本是否为斜体。取值有 normal(正常样式)、italic(斜体)。

5、text-decoration

text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)

p.red-underline {text-decoration-line: underline;text-decoration-color: red;
}

盒子模型

在 CSS3 中,有多种方法可以隐藏元素,每种方法都有其特点和适用场景:

元素的隐藏

1、display

该属性值会让元素完全从文档流中移除,就好像这个元素在 HTML 文档中不存在一样。它不会占据页面的空间,也不会响应任何用户交互事件。

.hidden-element {display: none;
}

2、visibility

元素虽然在页面上不可见,但它仍然占据原来的空间,并且保留其布局位置。也就是说,它会影响页面的布局,但不会显示内容,同时也不会响应鼠标事件等交互操作。

行内元素和块元素的相互转换

在 CSS3 中,可以使用display属性来实现行内元素和块元素的相互转换。

1、行内元素转换为块元素

span {display: block;
}

2、块元素转换为行内元素

块元素如<div><p>等,默认会独占一行。若要将块元素转换为行内元素,需将display属性值设置为inline。

div {display: inline;
}

3、转换为行内块元素

还有一种常见的情况是将元素转换为行内块元素,即display属性值设置为inline-block。这种方式结合了行内元素和块元素的部分特点,元素既可以在一行内显示,又可以设置宽度、高度等块级元素的属性。

p {display: inline-block;
}
盒子模型

所有的html标签都可以看成柜型盒子,由width、height、padding、border构成,成为盒模型。

需要注意的是:++width、height不是盒子的总宽高,盒子的总宽度 = width + 左右padding + 左右border,盒子的总高度 = height + 上下padding + 上下border++

1、box-sizing

在 CSS3 中,box-sizing 属性用于定义元素在计算宽度和高度时所采用的盒模型类型,它可以改变元素的宽度和高度的计算方式。

2、margin

margin是盒子的外边距,即盒子其他盒子的距离,竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准。

一些元素比如body、ul、p,都有默认的margin,在开始制作网页的时候,要将他们清除。

盒子的水平居中,将盒子的左右两边的margin都设置成auto,盒子将水平居中。盒子的垂直居中,需要使用绝对定位技术实现。

3、padding

padding是盒子的内边距,即盒子边框内壁到文字的距离

4、width属性

width属性表示盒子内容的宽度,单位属性通常是px,移动端开发也会涉及百分数、rem等单位。

当块级元素div、h、li等没有设置width属性时,它将自动撑满,但这不意味着width属性可以继承。

5、height属性

height属性表示盒子的内容高度,height属性的单位通常是px,移动端开发也会涉及到百分数、rem等单位。

盒子的height属性如果不设置,它将自动被其内容撑开,如果没有内容,则height默认是0。


http://www.ppmy.cn/server/165250.html

相关文章

用 cv2.rectangle 为图像加框,轻松实现目标标注与检测

前言 图像处理,有时候就像艺术创作:一笔简单的勾画,瞬间让世界焕然一新。今天,我们不画风景画,专注在如何用 OpenCV 的 cv2.rectangle 给图像加个矩形框。看似简单,实则这一小步往往能为后续的图像处理带来意想不到的便利。准备好迎接这段“小小框框”的探索之旅吗?让我…

(十一)机器人系统的仿真——建造机器人模型

前言 对于ROS新手而言&#xff0c;可能会有疑问:学习机器人操作系统&#xff0c;实体机器人是必须的吗&#xff1f;答案是否定的&#xff0c;机器人一般价格不菲&#xff0c;为了降低机器人学习、调试成本&#xff0c;在ROS中提供了系统的机器人仿真实现&#xff0c;通过仿真&…

《深入理解HTTP交互与数据监控:完整流程与优化实践》

文章目录 &#x1f310; 全链路解析&#xff1a;HTTP请求响应与数据可视化监控一、HTTP请求响应全流程解析1. 全链路交互流程图2.关键技术实现2.1 前端请求构造&#xff08;ES6语法示例&#xff09;2.2 服务端处理架构&#xff08;Node.js/Express&#xff09; 二、数据可视化监…

《chatwise:DeepSeek的界面部署》

ChatWise&#xff1a;DeepSeek的界面部署 摘要 本文详细描述了DeepSeek公司针对其核心业务系统进行的界面部署工作。从需求分析到技术实现&#xff0c;再到测试与优化&#xff0c;全面阐述了整个部署过程中的关键步骤和解决方案。通过本文&#xff0c;读者可以深入了解DeepSee…

一、TensorFlow的建模流程

1. 数据准备与预处理&#xff1a; 加载数据&#xff1a;使用内置数据集或自定义数据。 预处理&#xff1a;归一化、调整维度、数据增强。 划分数据集&#xff1a;训练集、验证集、测试集。 转换为Dataset对象&#xff1a;利用tf.data优化数据流水线。 import tensorflow a…

H3CNE-31-BFD

Bidirectional Forwarding Dection&#xff0c;双向转发检查 作用&#xff1a;毫秒级故障检查&#xff0c;通常结合三层协议&#xff08;静态路由、vrrp、ospf、BGP等&#xff09;&#xff0c;实现链路故障快速检查。 BFD配置示例 没有中间的SW&#xff0c;接口down&#xff…

人工智能专业术语详解(A)

人工智能不仅是指寻求如何替代人类的机器人或人类寻求自我挑战的游戏&#xff0c;更是指运用复杂的程序化数学&#xff0c;其结果与高质量的训练数据相结合&#xff0c;推动了我们在日常生活中所看到的技术进步。从无人驾驶汽车到寻找癌症的治疗方法&#xff0c;人工智能正在逐…

【ComfyUI专栏】如何使用Git命令行安装非Manager收录节点

当前的ComfyUI的收录的自定义节点很多&#xff0c;但是有些节点属于新出来&#xff0c;或者他的应用没有那么广泛&#xff0c;Manager管理节点 有可能没有收录到&#xff0c;这时候 如果我们需要安装需要怎么办呢&#xff1f;这就涉及到我们自己安装这些节点了。例如下面的内容…