目录

  • 一、行内样式
  • 二、内部样式
  • 三、外部样式
  • 四、结合选择器
  • 五、属性选择器
  • 六、包含选择器
  • 七、子选择器
  • 八、兄弟选择器
  • 九、选择器组合
  • 十、伪元素选择器
  • 十一、伪类选择器
  • 十二、盒子模型

相关文章

  • 学习标签、属性、选择器和外部加样式
  • 积累CSS样式属性：padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius

一、行内样式

  • 在html文件中，直接加在元素标签后面
  • 缺点：耦合度太高

基本格式

<元素 style="属性1:属性值1;属性2:属性值2"></元素>

示例

<body><div style="color: red;background: blue;">demo</div><div style="color: red;background: blue;">demo</div><div style="color: red;background: blue;">demo</div>
</body>

效果图：
行内样式

二、内部样式

  • 在<head></head>中写内部样式
  • 写在<style>标签里
  • 需要使用选择器

基本格式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>选择器{属性1:属性值1;属性2:属性值2;}</style>
</head>

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{background: blue;color: red;}</style>
</head>
<body><div>demo</div><div>demo</div><p>标签</p><p>标签</p><p>标签</p>
</body>
</html>

效果图：
内部样式

三、外部样式

  • 在css文件中写样式
  • 在<head></head>中写外部样式的地址，写相对应的css文件地址
  • 使用<link>标签链接

基本格式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css文件地址">
</head>

选择器{属性1:属性值1;属性2:属性值2;
}

<link>标签的属性

  • rel：角色
    • stylesheet：样式单
  • href：写css文件地址
    • 使用相对路径

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css/css选择器.css">
</head>
<body><div>demo</div><div>demo</div><p>标签</p><p>标签</p><p>标签</p>
</body>
</html>

p{background: gold;color: red;
}

效果图：
外部样式

三种样式可以相互合作。
相互合作中，如果样式相同，但是属性值不同，会按照优先级高的执行。
三种样式的优先级：行内样式>内部样式=外部样式
示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{background: blue;color: red;}</style><link rel="stylesheet" href="../css/css选择器.css">
</head>
<body><div>demo</div><div>demo</div><p style="background: gold;color: green;">标签</p><p>标签</p><p>标签</p>
</body>
</html>

div{background: gold;color: red;
}

效果图：
样式
可以从上面代码中看出：行内样式和内部样式有些冲突，根据优先级高的先执行，所有先执行行内样式，在执行其他的样式。

通用选择器、元素选择器、class选择器、id选择器可以查看学习标签、属性、选择器和外部加样式的相关内容。
选择器写的越长（越准确），优先级越高。
id选择器>class选择器>元素选择器
优先级相同，css按照diamagnetic顺序执行
特殊场景不适用自行测试

四、结合选择器

  • 两个选择器紧紧的挨在一起，中间没有空格
  • 注意：不能两个元素选择器使用

基本格式

选择器1选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="aa">demo</div><div>demo</div><div>demo</div><p class="aa">标签</p><p>标签</p><p>标签</p>
</body>

div.aa{background: gold;color: red;
}
/* 只找div元素并且是.aa的选择器的元素，进行样式添加 */

效果图：
结合选择器

五、属性选择器

  • 可以针对任何属性
  • 使用中括号[]

属性选择器的类型

  • 根据属性添加：[属性]
  • 根据属性值添加：[属性=属性值]
  • 根据属性值开头添加：[属性^=属性值]
  • 根据属性值结尾添加：[属性$=属性值]
  • 根据属性值包含添加：[属性*=属性值]

根据属性添加

  • 中括号[]中是属性

基本格式

[属性]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id]{background: gold;color: red;
}
/* 只找有id属性的元素，进行样式添加 */

效果图：
属性选择器

根据属性值添加

  • 中括号[]中是属性=属性值，是跟随在元素后面属性和属性值

基本格式

[属性=属性值]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id=demo]{background: gold;color: red;
}
/* 只找属性是id，且属性值是demo的元素，进行样式添加 */

效果图：
属性选择器2

根据属性值开头添加

  • 中括号[]中是属性^=属性值，是跟随在元素后面属性和属性值

基本格式

[属性^=属性值]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id^=aa]{background: gold;color: red;
}
/* 只找属性是id，且属性值以aa开头的元素，进行样式添加 */

效果图：
属性选择器3

根据属性值结尾添加

  • 中括号[]中是属性$=属性值，是跟随在元素后面属性和属性值

基本格式

[属性$=属性值]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id$=aa]{background: gold;color: red;
}
/* 只找属性是id，且属性值以aa结尾的元素，进行样式添加 */

效果图：
属性选择器4

根据属性值包含添加

  • 中括号[]中是属性*=属性值，是跟随在元素后面属性和属性值

基本格式

[属性*=属性值]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id*=aa]{background: gold;color: red;
}
/* 只找属性是id，且属性值只要包含aa的元素，进行样式添加 */

效果图：
属性选择器5

六、包含选择器

  • 两个选择器之间有空格
  • 在符合选择器1元素的后代中找符合选择器2的元素
  • 后代中不光是‘儿子’，‘孙子’等后辈也会被找到

基本格式

选择器1 选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="container"><p>demo</p></div><div class="demo"><p>标签</p></div>
</body>

.container p{background: gold;color: red;
}

效果图：
包含选择器

七、子选择器

  • 两个选择器之间使用的是>
  • 在符合选择器1元素的子元素中找符合选择器2的元素

基本格式

选择器1>选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="container"><p>demo</p><div class="demo"><p>标签</p></div></div>
</body>

.container>p{background: gold;color: red;
}

效果图：
子选择器

八、兄弟选择器

  • 两个选择器之间使用的是~
  • 在符合选择器1元素的弟弟中找符合选择器2的元素
  • 选择器1与选择器2拥有同一个父级

基本格式

选择器1~选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="container"><p>demo</p><p class="aa">demo</p><p>demo</p><span>xxx</span><br><span>xxx</span><p>demo</p></div>
</body>

.aa~span{background: gold;color: red;
}

效果图：
兄弟选择器

九、选择器组合

  • 两个选择器之间使用的是逗号,
  • 在符合选择器1元素的或者符合选择器2的元素

基本格式

选择器1,选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="container"><p>demo</p><p class="aa">demo</p><p>demo</p><span>xxx</span><br><span>xxx</span><p>demo</p></div>
</body>

p,span{background: gold;color: red;
}

效果图：
选择器组合

十、伪元素选择器

  • 在html中没有添加，但是根据伪元素选择器进行添加
  • 不能设置宽高

伪元素选择器的类型

  • 元素后追加：::after
  • 元素前追加：::before
  • 内容中首字母加样式：::first-letter
  • 内容中首行母加样式：::first-line

元素后追加：::after

基本格式

选择器::after{content: "";属性1: 属性值1;属性2: 属性值2;
}
示例
<body><div>demo</div>
</body>

div::after{content: "xxx";background: gold;color: red;
}

效果图：
元素后追加

元素前追加：::before

基本格式

选择器::before{content: "";属性1: 属性值1;属性2: 属性值2;
}
示例
<body><div>demo</div>
</body>

div::before{content: "xxx";background: gold;color: red;
}

效果图：
元素前追加

内容中首字母加样式：::first-letter

  • 只能用在第一个字母
  • 只适用于块级元素，能够对宽高识别的元素

基本格式

选择器::first-letter{属性1: 属性值1;属性2: 属性值2;
}
示例
<body><div>demo</div>
</body>

div::first-letter{font-size: 20px;color: red;
}

效果图：
首字母加样式

内容中首行母加样式：::first-line

  • 首行的样式会随着浏览器窗口的缩放而变化
  • 只适用于块级元素，能够对宽高识别的元素
  • 如果是英文，要么空格，要么中间加~，使用work-break：break-all英文会断开

基本格式

选择器::first-line{属性1: 属性值1;属性2: 属性值2;
}
示例
<body><div>demo首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果</div>
</body>

div::first-line{font-size: 20px;color: red;
}

效果图：
首行加样式

十一、伪类选择器

  • 结构性伪类选择器
  • UI元素状态伪类选择器
  • 其他伪类选择器

结构性伪类选择器

伪类选择器类型基本格式顺序
:nth-child()选择器:nth-child(){属性1: 属性值1;}正着数只认数字，不认类型
:first-child第一个选择器:first-child{属性1: 属性值1;}正着数的第一个只认数字，不认类型
:last-child最后一个选择器:last-child{属性1: 属性值1;}正着数的最后一个只认数字，不认类型
:nth-last-child()选择器:nth-last-child(){属性1: 属性值1;}倒着数只认数字，不认类型
:nth-of-type()选择器:nth-of-type(){属性1: 属性值1;}正着数同类型下的某个元素
:first-of-type第一个选择器:first-of-type{属性1: 属性值1;}正着数的第一个同类型下的某个元素
:last-of-type最后一个选择器:last-of-type{属性1: 属性值1;}正着数的最后一个同类型下的某个元素
:nth-last-of-type()最后一个选择器:nth-last-of-type(){属性1: 属性值1;}倒着数同类型下的某个元素

括号中可以写的参数：

  • 数值：从一开始
  • odd：奇数个，even：偶数个
  • 表达式：3n+1，2n+4，需要有规律

示例1

<body><ul><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>
</body>

ul li:nth-child(3){background: gold;color: red;
}

效果图：
nth1

示例2

<body><ul><div>demo</div><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>
</body>

ul li:nth-of-type(){background: gold;color: red;
}

效果图：
nth-of

UI元素状态伪类选择器

类型
:hover鼠标悬停状态
:checked选中状态
:focus焦点状态

示例

<body><ul><div>demo</div><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>
</body>

li:hover{font-size: 15px;background: gold;color: red;
}

效果图：
hover

其他伪类选择器

:not()排除选择器

示例

<body><ul><li>demo1</li><li class="aa">demo2</li><li>demo3</li><li class="aa">demo4</li><li class="bb">demo5</li></ul>
</body>

li:not(.aa):not(.bb){font-size: 15px;background: gold;color: red;
}

效果图：
排除选择器

十二、盒子模型

  • 块级元素：独占一行，对宽高支持
  • 内联级元素：不独占一行，对换宽高不支持
  • 内联块级元素：不独占一行，对宽高支持

修改对宽高的支持：

  • display:inline：修改为内联级元素
  • display:block：修改为块级元素
  • display:inline-block：修改为内联块级元素

弹性盒子

还可以查看积累CSS样式属性：padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius的相关内容。

  • 如果一个元素是弹性盒子，那么子元素默认始终横向布局。
  • 使用的是dispay:flex

盒子结构

盒子组成
有里往外设置

border：复合属性

  • border-color：边框的颜色
  • border-width：边框的宽度
  • border-style：边框的样式
    注意： 这三个一个都不能少，否则，设置不成边框。

简写

border:plum dotted 5px;/* 不分先后顺序 */

方位词

  • border-top：上边框的设置
  • border-bottom：下边框的设置
  • border-left：左边框的设置
  • border-right：右边框的设置

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/89651.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/89651.shtml
英文地址，请注明出处：http://en.pswp.cn/pingmian/89651.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

关于基于lvgl库做的注册登录功能的代码步骤：

关于基于lvgl库做的注册登录功能的代码步骤：

以下是完整的文件拆分和代码存放说明&#xff0c;按功能模块化划分&#xff0c;方便工程管理&#xff1a;一、需要创建的文件清单 文件名 作用 类型 main.c 程序入口&#xff0c;初始化硬件和LVGL 源文件 ui.h 声明界面相关函数 头文件 ui.c 实现登录、注册、主页面的UI 源文…
阅读更多...
RAII机制以及在ROS的NodeHandler中的实现

RAII机制以及在ROS的NodeHandler中的实现

好的&#xff0c;这是一个非常核心且优秀的设计问题。我们来分两步详细解析&#xff1a;先彻底搞懂什么是 RAII&#xff0c;然后再看 ros::NodeHandle 是如何巧妙地运用这一机制的。1. 什么是 RAII 机制&#xff1f; RAII 是 “Resource Acquisition Is Initialization” 的缩写…
阅读更多...
Linux LVS集群技术

Linux LVS集群技术

LVS集群概述1、集群概念1.1、介绍集群是指多台服务器集中在一起&#xff0c;实现同一业务&#xff0c;可以视为一台计算机。多台服务器组成的一组计算机&#xff0c;作为一个整体存在&#xff0c;向用户提供一组网络资源&#xff0c;这些单个的服务器就是集群的节点。特点&…
阅读更多...
spring-ai-alibaba如何上传文件并解析

spring-ai-alibaba如何上传文件并解析

问题引出 在我们日常使用大模型时&#xff0c;有一类典型的应用场景&#xff0c;就是将文件发送给大模型&#xff0c;然后由大模型进行解析&#xff0c;提炼总结等&#xff0c;这一类功能在官方app中较为常见&#xff0c;但是在很多模型的api中都不支持&#xff0c;那如何使用…
阅读更多...
「双容器嵌套布局法」：打造清晰层级的网页架构设计

「双容器嵌套布局法」：打造清晰层级的网页架构设计

一、命名与核心概念 “双容器嵌套布局法”&#xff0c;核心是通过两层容器嵌套构建网页结构&#xff1a;外层容器负责控制布局的“宏观约束”&#xff08;如页面最大宽度、背景色等&#xff09;&#xff0c;内层容器聚焦“微观排版”&#xff08;内容居中、内边距调整、红色内容…
阅读更多...
基于深度学习的自然语言处理：构建情感分析模型

基于深度学习的自然语言处理：构建情感分析模型

前言 自然语言处理&#xff08;NLP&#xff09;是人工智能领域中一个非常活跃的研究方向&#xff0c;它致力于使计算机能够理解和生成人类语言。情感分析&#xff08;Sentiment Analysis&#xff09;是NLP中的一个重要应用&#xff0c;其目标是从文本中识别和提取情感倾向&…
阅读更多...
JWT原理及利用手法

JWT原理及利用手法

JWT 原理 JSON Web Token (JWT) 是一种开放的行业标准&#xff0c;用于在系统之间以 JSON 对象的形式安全地传输信息。这些信息经过数字签名&#xff0c;因此可以被验证和信任。其常用于身份验证、会话管理和访问控制机制中传递用户信息。 与传统的会话令牌相比&#xff0c;JWT…
阅读更多...
DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_睡眠记录日历示例（CalendarView01_30）

DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_睡眠记录日历示例（CalendarView01_30）

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录DeepS…
阅读更多...
git的diff命令、Config和.gitignore文件

git的diff命令、Config和.gitignore文件

diff命令&#xff1a;比较git diff xxx&#xff1a;工作目录 vs 暂存区&#xff08;比较现在修改之后的工作区和暂存区的内容&#xff09;git diff --cached xxx&#xff1a;暂存区 vs Git仓库&#xff08;现在暂存区内容和最一开始提交的文件内容的比较&#xff09;git diff H…
阅读更多...
Linux中的LVS集群技术

Linux中的LVS集群技术

一、实验环境&#xff08;RHEL 9&#xff09;1、NAT模式的实验环境主机名IP地址网关网络适配器功能角色client172.25.254.111/24&#xff08;NAT模式的接口&#xff09;172.25.254.2NAT模式客户机lvs172.25.254.100/24&#xff08;NAT模式的接口&#xff09;192.168.0.100/24&a…
阅读更多...
【数据结构】「队列」（顺序队列、链式队列、双端队列）

【数据结构】「队列」（顺序队列、链式队列、双端队列）

- 第 112篇 - Date: 2025 - 07 - 20 Author: 郑龙浩&#xff08;仟墨&#xff09; 文章目录队列&#xff08;Queue&#xff09;1 基本介绍1.1 定义1.2 栈 与 队列的区别1.3 重要术语2 基本操作3 顺序队列(循环版本)两种版本两种版本区别版本1.1 - rear指向队尾后边 且 无 size …
阅读更多...
Java行为型模式---解释器模式

Java行为型模式---解释器模式

解释器模式基础概念解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为型设计模式&#xff0c;其核心思想是定义一个语言的文法表示&#xff0c;并定义一个解释器&#xff0c;使用该解释器来解释语言中的句子。这种模式将语法解释的责任分开&#xff0c;使得语法…
阅读更多...
[spring6: PointcutAdvisor MethodInterceptor]-简单介绍

[spring6: PointcutAdvisor MethodInterceptor]-简单介绍

Advice Advice 是 AOP 联盟中所有增强&#xff08;通知&#xff09;类型的标记接口&#xff0c;表示可以被织入目标对象的横切逻辑&#xff0c;例如前置通知、后置通知、异常通知、拦截器等。 package org.aopalliance.aop;public interface Advice {}BeforeAdvice 前置通知的标…
阅读更多...
地图定位与导航

地图定位与导航

定位 1.先申请地址权限(大致位置精准位置) module.json5文件 "requestPermissions": [{"name": "ohos.permission.INTERNET" },{"name": "ohos.permission.LOCATION","reason": "$string:app_name",&qu…
阅读更多...
【数据结构】揭秘二叉树与堆--用C语言实现堆

【数据结构】揭秘二叉树与堆--用C语言实现堆

文章目录1.树1.1.树的概念1.2.树的结构1.3.树的相关术语2.二叉树2.1.二叉树的概念2.2.特殊的二叉树2.2.1.满二叉树2.2.2.完全二叉树2.3.二叉树的特性2.4.二叉树的存储结构2.4.1.顺序结构2.4.2.链式结构3.堆3.1.堆的概念3.2.堆的实现3.2.1.堆结构的定义3.2.2.堆的初始化3.2.3.堆…
阅读更多...
区间树：多维数据的高效查询

区间树：多维数据的高效查询

区间树&#xff1a;多维数据的高效查询 大家好&#xff0c;今天我们来探讨一个在计算机科学中非常有趣且实用的数据结构——区间树。想象一下&#xff0c;你是一位城市规划师&#xff0c;需要快速找出某个区域内所有的医院、学校或商场。或者你是一位游戏开发者&#xff0c;需要…
阅读更多...
SQL 魔法：LEFT JOIN 与 MAX 的奇妙组合

SQL 魔法：LEFT JOIN 与 MAX 的奇妙组合

一、引言 在数据库操作的领域中&#xff0c;数据的关联与聚合处理是核心任务之一。LEFT JOIN作为一种常用的连接方式&#xff0c;能够将左表中的所有记录与右表中满足连接条件的记录进行关联&#xff0c;即便右表中没有匹配的记录&#xff0c;左表的记录也会被保留&#xff0c;…
阅读更多...
手写tomcat

手写tomcat

package com.qcby.annotation;import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;Target(ElementType.TYPE)// 表示该注解只能用于类上 Retention(Retentio…
阅读更多...
Android平台下openssl动态库编译

Android平台下openssl动态库编译

1. 下载Linux平台下的NDK软件包 NDK 下载 | Android NDK | Android Developers 下载完成后执行解压命令 # unzip android-ndk-r27d-linux.zip 2. 下载openssl-1.1.1w源码包&#xff0c;并解压 # tar -xzvf openssl-1.1.1w.tar.gz 3. 进入解压后的openssl-1.1.1w目录 …
阅读更多...
【C++基础】面试高频考点解析：extern “C“ 的链接陷阱与真题实战

【C++基础】面试高频考点解析：extern “C“ 的链接陷阱与真题实战

名称修饰&#xff08;Name Mangling&#xff09;是C为支持重载付出的代价&#xff0c;而extern "C"则是跨越语言边界的桥梁——但桥上的陷阱比桥本身更值得警惕 一、extern "C" 的核心概念与高频考点1.1 链接规范与名字改编机制C 为支持函数重载&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023