Web - CSS3基础语法与盒模型

概述

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

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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/964236.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

51单片机入门_05_LED闪烁(常用的延时方法:软件延时、定时器延时;while循环;unsigned char 可以表示的数字是0~255)

本篇介绍编程实现LED灯闪烁&#xff0c;需要学到一些新的C语言知识。由于单片机执行的速度是非常快的&#xff0c;如果不进行延时的话&#xff0c;人眼是无法识别(停留时间要大于20ms)出LED灯是否在闪烁所以需要学习如何实现软件延时。另外IO口与一个字节位的数据对应关系。 文…

JVM的GC详解

获取GC日志方式大抵有两种 第一种就是设定JVM参数在程序启动时查看&#xff0c;具体的命令参数为: -XX:PrintGCDetails # 打印GC日志 -XX:PrintGCTimeStamps # 打印每一次触发GC时发生的时间第二种则是在服务器上监控:使用jstat查看,如下所示&#xff0c;命令格式为jstat -gc…

基于python去除知乎图片水印

基于python去除知乎图片水印 背景&#xff1a;看到知乎技术文章里面的图片非常好&#xff0c;但是下载下来都是带有水印的&#xff0c;并不是不尊重别人的版权和劳动成果&#xff0c;纯粹的是洁癖&#xff0c;总感觉水印打上去很难受~~~ 实在想去掉水印&#xff0c;但是又不会P…

Android学习20 -- 手搓App2(Gradle)

1 前言 昨天写了一个完全手搓的&#xff1a;Android学习19 -- 手搓App-CSDN博客 后面谷歌说不要用aapt&#xff0c;d8这些来搞。其实不想弄Gradle的&#xff0c;不过想着既然开始了&#xff0c;就多看一些。之前写过一篇Gradle&#xff0c;不过是最简单的编译&#xff0c;不涉…

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》051-案例:教务系统学生列表页面

标题详情作者简介愚公搬代码头衔华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xff0c;阿里云签约作者&#xff0c;腾讯云优秀博主&…

毕业设计:基于深度学习的高压线周边障碍物自动识别与监测系统

目录 前言 课题背景和意义 实现技术思路 一、算法理论基础 1.1 卷积神经网络 1.2 目标检测算法 1.3 注意力机制 二、 数据集 2.1 数据采集 2.2 数据标注 三、实验及结果分析 3.1 实验环境搭建 3.2 模型训练 3.2 结果分析 最后 前言 &#x1f4c5;大四是整个大学…

2025.2.1——八、Web_php_wrong_nginx_config

题目来源&#xff1a;攻防世界 Web_php_wrong_nginx_config 目录 一、打开靶机&#xff0c;整理信息 二、解题思路 step 1&#xff1a;找找解题入口 step 2&#xff1a;抓包修改信息&#xff0c;得到配置文件 step 3&#xff1a;找到突破口&#xff0c;进行文件遍历 st…

Netty中用了哪些设计模式?

大家好&#xff0c;我是锋哥。今天分享关于【Netty中用了哪些设计模式&#xff1f;】面试题。希望对大家有帮助&#xff1b; Netty中用了哪些设计模式&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Netty 是一个基于 Java 的高性能网络应用框架&#…

【办公类-99-01】20250201学具PDF打印会缩小一圈——解决办法:换一个PDF阅读器

背景需求&#xff1a; 2024年1月13日&#xff0c;快要放寒假了&#xff0c;组长拿着我们班的打印好的一叠教案来调整。 “前面周计划下面的家园共育有调整&#xff0c;你自己看批注。” “还有你这个教案部分的模版有问题&#xff0c;太小&#xff08;窄&#xff09;了。考虑…

【BUUCTF杂项题】FLAG

一.FLAG 一张图片扔进随波逐流 发现RGB似乎隐藏压缩包 优先考虑RBG中的LSB隐写&#xff0c;用Stegsolve打开文件 1.查看每个颜色通道下的图片&#xff0c;未发现异常 2.LSB最低位提取&#xff0c;用Stegsolve的Data Extrace功能&#xff0c;确实存在一个压缩包&#xff0c;sa…

ros 创建Node

1、使用catkin_create_pkg创建一个软件包 catkin_create_pkg ssr_pkg roscpp rospy std_msgs 2、在软件包的src文件夹下创建一个节点的cpp源码文件 3、在CMakeLists.txt中设置节点源码的编译规则 4.编译运行 编译&#xff1a;shiftctrlB 运行&#xff1a; rosrun ssr_pkg …

给AI用工具的能力——Agent

ReAct框架&#xff1a; Reason Action&#xff0c;推理与行动结合 可以借助思维链&#xff0c;用小样本提示展示给模型一个ReAct框架 推理&#xff1a;针对问题或上一步观察的思考 行动&#xff1a;基于推理&#xff0c;与外部环境的一些交互&#xff08;调用外部工具&…

实验十 Servlet(一)

实验十 Servlet(一) 【实验目的】 1&#xff0e;了解Servlet运行原理 2&#xff0e;掌握Servlet实现方式 【实验内容】 1、参考课堂例子&#xff0c;客户端通过login.jsp发出登录请求&#xff0c;请求提交到loginServlet处理。如果用户名和密码相同则视为登录成功&#xff0c…

PAT甲级1052、Linked LIst Sorting

题目 A linked list consists of a series of structures, which are not necessarily adjacent in memory. We assume that each structure contains an integer key and a Next pointer to the next structure. Now given a linked list, you are supposed to sort the stru…

【BUUCTF杂项题】荷兰宽带数据泄露、九连环

一.荷兰宽带数据泄露 打开发现是一个.bin为后缀的二进制文件&#xff0c;因为提示宽带数据泄露&#xff0c;考虑是宽带路由器方向的隐写 补充&#xff1a;大多数现代路由器都可以让您备份一个文件路由器的配置文件&#xff0c;软件RouterPassView可以读取这个路由配置文件。 用…

【Game】Powerful——The Dragon Hiding in Deep Waters(3)

文章目录 1、规则2、条件——宠物2.1、宠物装备2.1、宠物突破2.2、洗练石 3、条件——符石4、条件——化龙鼎5、附录——星穹 1、规则 寒渊城&#xff0c;神秘老兵处可查看 霜风携雨掠寒江&#xff0c;孤城独影人心凉 贤才此件难相遇&#xff0c;忠骨何日还故乡 宠物、符石、…

差分数组的学习

文章目录 1.差分数组的应用场景2.如何构造一个差分数组2.1 原数组转换为差分数组2.2 差分数组还原为原数组 3.差分数组的特性 1.差分数组的应用场景 需要频繁对某个区间的数组进行增减操作 2.如何构造一个差分数组 2.1 原数组转换为差分数组 # 存在一个数组Nums,求出他的差分…

AES 与 SM4 加密算法:深度解析与对比

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

【C++】线程池实现

目录 一、线程池简介线程池的核心组件实现步骤 二、C11实现线程池源码 三、线程池源码解析1. 成员变量2. 构造函数2.1 线程初始化2.2 工作线程逻辑 3. 任务提交(enqueue方法)3.1 方法签名3.2 任务封装3.3 任务入队 4. 析构函数4.1 停机控制 5. 关键技术点解析5.1 完美转发实现5…

[EAI-023] FAST,机器人动作专用的Tokenizer,提高VLA模型的能力和训练效率

Paper Card 论文标题&#xff1a;FAST: Efficient Action Tokenization for Vision-Language-Action Models 论文作者&#xff1a;Karl Pertsch, Kyle Stachowicz, Brian Ichter, Danny Driess, Suraj Nair, Quan Vuong, Oier Mees, Chelsea Finn, Sergey Levine 论文链接&…