CSS学习(选择器、盒子模型)

1、CSS了解

CSS:层叠样式表,一种标记语言,用于给HTML结构设置样式。

样式:文字大小、背景颜色等

p标签内不能嵌套标题标签。

px是相对于分辨率而言的,

em是相对于浏览器的默认字体,

rem是相对于HTML根元素的。

2、CSS编写位置

1、行内样式(内联样式):在标签里添加样式,使用style进行添加。只能控制当前标签的样式。

2、内部样式:在head标签中添加style标签进行编写,head标签里,style标签中。

3、外部样式:写在.css文件中,在html文件使用link标签进行引用。link标签写在head标签中。

        link标签的属性说明:

                href:引入的文档来自哪里。

                rel:说明引入的文档与当前文档的关系。

样式表的优先级(同名的属性):行内样式优先级高于内部样式和外部样式,内部样式的优先级与外部样式的优先级相同,同名属性的值与书写顺序有关,后写的有效(后来者居上)。后写的覆盖前面写的。

 3、语法规范

选择器 {声明块表列}

4、CSS选择器 

(1)通配选择器

/* 选中所有的HTML元素 */
* {
}

(2)元素选择器

/* 元素名,即是标签名,不能差异化设置样式 */
元素名 {
}

(3)类选择器 

/* 根据类名,设置样式,不同的元素,可以是一个分类,一个元素,不能有多个class属性,可以写在一个class中,用空格隔开 */
.类名 {
}

(4)id选择器 

/* id不能数字开头,一个元素不能有多个id,一个标签可以同时有id和class,id属性不包含空格 */
#id名 {
}

(5)交集选择器

/* p标签且类名为people */
p.people {
}
/* p标签,类名为beauty且id为wc */
p.beauty#wc {}

 (6)并集选择器

/* 类名为r1、r2、r3,id为users的元素,添加相同属性,使用逗号隔开就行 */
.r1,
.r2,
#users,
.r3 {}

元素之间的关系: 

        父元素:直接包裹某个元素的元素,就是该元素的父元素。

        子元素:被父元素直接包裹的元素。

        祖先元素:父亲的父亲的........,一直向外找,都是祖先。(父元素也算祖先的一种)

        后代元素:儿子的儿子的........,一直往里找,都是后代。(子元素也算后代的一种)

        兄弟元素:具有相同父元素的元素,互为兄弟元素。

(7)后代选择器 

/* 对ul中的li设置属性  li为ul的后代(不止儿子元素,孙子也算) */
ul li {}/* id、类都可以进行后代选择 */

 (8)子代选择器

/* div标签的儿子a标签,子元素,先写父,再写子 */
div>a {}
/* 最终选中的是子代 */

(9) 兄弟选择器

/* (相邻兄弟选择器)选中与div标签紧紧相邻的一个兄弟p标签 */
div+p {}/* (通用兄弟选择器)选中与div标签的所有兄弟p标签 */
div~p {}

(10)属性选择器 

/* 选中具有title属性的元素 */
[title] {}/* 具有title属性且属性值为a1的元素 */
[title="a1"]{}/* 模糊写法:具有title属性且以a开头的元素 */
[title^="a"] {}/* 模糊写法:具有title属性且以a结尾的元素 */
[title$="a"] {}/* 模糊写法:具有title属性且包含有a的元素 */
[title*="a"] {}

(11)伪类选择器 

什么是伪类?

——很像类,但不是类,是元素特殊状态的一种描述。

伪类选择器的作用

——选中特殊状态的元素

/* 选中未被访问过的a标签 */
a:link {}/* 选中访问过的a标签 */
a:visited {}/* 选中元素鼠标悬浮 */
a:hover {}/* 选中元素激活 */
a:active {}/* 有顺序的 link -> visited -> hover -> active */
/* link 和 visited 是a标签独有的 *//* 获取焦点(表单元素,需要输入的元素:input、select) */
input:focus {}
<1>结构伪类 
/* 选中div的子元素p的第一个儿子 */
div>p:first-child {}/* 选中div的第n个儿子p元素 */
div>p:nth-child(n) {}
/* 2n选中偶数(even)2n+1选中奇数(odd) *//* 选中前五个元素 */
div>p:nth-child(-n+5) {}
/* nth-child(),括号中形式必须为an+b *//* 无论p元素前有多少其他标签都选中第一个p标签 */
div>p:first-of-type {}/* 选中div中倒数第n个儿子p元素(所有兄弟) */
div>p:nth-last-child(n) {}/* 选中div中倒数第n个儿子p标签(所有同类型的兄弟) */
div>p:nth-last-of-type(n) {}/* 选中没有同类型兄弟的span元素 */
span:only-of-type {}/* 选中HTML根元素 */
:root {}/* 选中没有内容的div元素 */
div:empty {}
<2>否定伪类 

否定伪类:

        :not(选择器) 排除满足括号中条件的元素。

/* 选中div的儿子p元素,排除类名为fail的元素 */
div>p:not(.fail) {}
<3>UI伪类
/* 复选框勾选或单选按钮,选中状态 */
input:checked {}/* 选中被禁用的input元素 */
input:disabled {}/* 选用可用的input元素 */
input:enabled {}
<4>目标伪类

:target        选中锚点指向的元素

/* 选中锚点所指向的元素 */
div:target {}
<5>语言伪类

:lang()        根据指定的语言选择元素(本质是看lang属性的值)

/* 选择语言为cn的div元素 */
div:lang(cn) {}

(12)伪元素选择器

伪元素的作用:选中元素的一些特殊位置

/* lorem    随机生成一串英文(VS Code中使用) *//* 将第一个单词的第一个字母改变样式 */
div::first-letter {}/* 选中第一行元素 */
div::first-line {}/* 选中被鼠标选择的文字 */
div::selection {}/* 选择input元素中的提示文字 */
input::placeholder {}/* 选中的p元素最开始的位置,随后创建一个子元素 */
p::before {content:"¥";
}/* 选中的p元素最后的位置,随后创建一个子元素 */
p::after {content:"¥";
}

5、选择器的优先级

通过不同的选择器选中相同的元素,并且为相同的样式名设置不同的值,优先级如下:

        行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 

        同类型选择器遵循后来者居上规则

 6、盒子模型

 什么是盒子?

        所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

默认宽度:不设置width属性时,元素所呈现出的宽度。

/* 复合属性padding的书写方式 */
/* 复合属性写一个值,含义:四个方向的内边距是一样的 */
padding:20px;/* 复合属性写两个值,含义:上下、左右 */
padding:20px 10px;/* 复合属性写三个值,含义:上、左右、下 */
padding:20px 10px 5px;/* 复合属性写四个值,含义:上、右、下、左 */
padding:20px 15px 10px 5px;/* padding的值不能为负数 */
/* 行内元素的上下内边距不能完美设置,左右内边距没问题 */
/* 块级元素、行内块元素,四个方向内边距可以完美设置 */

7、内容溢出 

/* 处理溢出 */
overflow:auto/* 分为x、y两个方向上处理溢出 */
overflow-x:hidden;
overflow-y:visible;

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nvm的下载与安装

nvm&#xff08;Node Version Manager&#xff09;是一个用于管理 Node.js 版本的工具&#xff0c;它允许您在同一台计算机上安装和切换不同的 Node.js 版本。 一、下载地址 https://github.com/coreybutler/nvm-windows/releases 二、安装nvm 三、设置环境变量 在命令提示…

一、Django 初识

简介 Django 是一个用于构建 Web 应用程序的高级 Python Web 框架。 版本对应 不同版本的django框架是基于特定的不同的python版本开发的&#xff0c;所以不同版本的django框架要正常执行功能只能安装特定的python版本 Django安装 安装 Django # 全局安装 pip install dj…

频率分析和离散傅里叶变换——DSP学习笔记四

背景知识 四种基本的傅里叶变换 基本思想&#xff1a;将信号表示为不同频率 正弦分量的线性组合 正弦信号和复指数时间信号的有用特性 相同频率但不同相位的正弦信号的任何线性组合&#xff0c;都是有着相同频率但不同相位&#xff0c;且幅度可能受改变的正弦信号。 复指数时…

软件物料清单(SBOM)生成指南 .pdf

如今软件安全攻击技术手段不断升级&#xff0c;攻击数量显著增长。尤其是针对软件供应链的安全攻击&#xff0c;具有高隐秘性、追溯难的特点&#xff0c;对企业软件安全威胁极大。 同时&#xff0c;软件本身也在不断地更新迭代&#xff0c;软件内部成分安全性在持续变化浮动。…

【算法】人工蜂群算法,解决多目标车间调度问题,柔性车间调度问题

文章目录 复现论文什么是柔性作业车间调度问题&#xff1f;数据处理ABC算法编码解码种群初始化雇佣蜂操作IPOX交叉多点交叉 观察蜂操作侦察蜂操作算法流程 结果程序截图问询、帮助 复现论文 什么是柔性作业车间调度问题&#xff1f; 也叫多目标车间调度问题。 柔性作业车间调…

为什么有的晶圆厂叫特色工艺晶圆厂?

知识星球&#xff08;星球名&#xff1a; 芯片制造与封测社区&#xff09;里的学员问&#xff1a; 经常看看到某某晶圆厂是12英寸特色工艺晶圆厂&#xff0c;特色工艺是指什么&#xff1f; 芯片的种类&#xff1f; 芯片分为四大类:mems,IC,光电器件&#xff0c;分立器件。 …

web(微博发布案例)

示例&#xff1a; 1、检测空白内容 2、发布内容 html: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta …

科蓝尔环保 | 成都2024全国水科技大会暨技术装备成果展览会

2024年5月13日一15日中华环保联合会、福州大学、上海大学在四川省成都市联合举办“2024全国水科技大会暨技术装备成果展览会”。 大会主题&#xff1a;加快形成新质生产力 增强水业发展新动能 大会亮点&#xff1a;邀请6位院士&#xff0c;100余位行业专家&#xff0c;15场专…

Redis缓存问题:穿透,击穿,雪崩等

Redis缓存问题:穿透,击穿,雪崩等 在高并发场景下,数据库往往是最薄弱的环节,我们通常选择使用redis来进行缓存,以起到缓冲作用,来降低数据库的压力,但是一旦缓存出现问题,也会导致数据库瞬间压力过大甚至崩溃,从而导致整个系统崩溃.今天就聊聊常见的redis缓存问题. 缓存击穿 …

了解HTTP代理服务器:优势、分类及应用实践

在我们日常的网络使用中&#xff0c;我们经常听到HTTP代理服务器这个术语。那么&#xff0c;HTTP代理服务器到底是什么&#xff1f;它有什么优势和分类&#xff1f;又如何应用于实践中呢&#xff1f;让我们一起来了解一下。 HTTP代理服务器是一种位于客户端和服务器之间的中间…

qml和c++结合使用

目录 文章简介1. 创建qml工程2. 创建一个类和qml文件&#xff0c;修改main函数3. 函数说明&#xff1a;4. qml 文件间的调用5. 界面布局6. 代码举例 文章简介 初学qml用来记录qml的学习过程&#xff0c;方便后面归纳总结整理。 1. 创建qml工程 如下图&#xff0c;我使用的是…

数字IC后端先进工艺设计实现之TSMC 12nm 6Track工艺数字IC后端实现重点难点盘点

大家知道咱们社区近期TSMC 12nm ARM Cortexa-A72(1P9M 6Track Metal Stack)已经开班。这里小编要强调一点:不要认为跑了先进工艺的项目就会很有竞争力&#xff01;如果你仅仅是跑个先进工艺的flow&#xff0c;不懂先进工艺在数字IC后端实现上的不同点&#xff0c;为何有这样的不…

【笔记】应对Chrome更新导致Chromedriver失效的解决方案:Chrome For Test

随着网络应用和网站的不断发展&#xff0c;自动化测试变得越来越重要&#xff0c;而Selenium成为了许多开发者和测试人员的首选工具之一。然而&#xff0c;对于使用Selenium来进行网站测试的人来说&#xff0c;Chrome浏览器的频繁更新可能会成为一个头疼的问题。每当Chrome更新…

论文速览 | IEEE TIFS, 2021 | 对车载毫米波雷达的物理层攻击及其防御方法的研究

注1:本文系"计算成像最新论文速览"系列之一,致力于简洁清晰地介绍、解读非视距成像领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; CVPR, ICCV, ECCV, SIGGRAPH, TPAMI; Light‑Science & Applications, Optica 等)。 本次介绍的论文是:<2…

iOS——NSCache

什么是NSCache NSCache是Foundation框架中的一个类&#xff0c;用于在iOS和macOS应用程序中进行临时性的内存缓存。它提供了一种轻量级的缓存机制&#xff0c;可以用于存储临时性的数据&#xff0c;例如图片、对象等。NSCache的主要特点和用法包括&#xff1a; 临时性缓存&…

汽车纵染压制专用液压机比例阀放大器

汽车纵染压制专用液压机比例阀放大器是一种专门用于汽车纵梁拉伸工艺的设备&#xff0c;它也可以用于其他金属薄板的压制成型及校正工艺。该类型的液压机通常具备独立的动力机构和电气系统&#xff0c;采用PLC技术进行控制&#xff0c;以确保操作的准确性和稳定性。除了纵梁拉伸…

openEuler-22.03安装redis6.2.7

前言&#xff1a;redis一开始是安装5.0.7&#xff0c;一直安装失败 gcc安装版本是 10.3.1 make报错 参考博客&#xff1a;https://blog.51cto.com/flyfish225/10596050 将redis版本换成 6.2.7 1、下载地址 https://download.redis.io/releases/redis-6.2.7.tar.gz 2、解压…

OpenHarmony硬件合成方案解析

本文档主要讲解在OpenHarmony中&#xff0c;硬件合成适配的方法及原理说明。 环境说明&#xff1a; OHOS版本&#xff1a;3.1-Release及以上 一、背景介绍 1.1 什么是合成 要理解什么是合成&#xff0c;合成做了什么&#xff1f;我们先通过分解设置界面来回答这个问题: 在…

删除二叉搜索树中的节点

题目链接 删除二叉搜索树中的节点 题目描述 注意点 节点值唯一root 是合法的二叉搜索树节点数的范围 [0, 10000] 解答思路 可以根据二叉搜索树的性质找到要删除的节点&#xff0c;关键是删除节点后怎么重新构建成一棵新的二叉搜索树首先要找到的是删除节点node的父节点nod…

数智时代的AI人才粮仓模型解读白皮书(2024版)

来源&#xff1a;极客邦科技 自 2023 年上半年起&#xff0c;ChatGPT 等大模型技术蓬勃发展&#xff0c;AI 技术不断突破边界&#xff0c;展现 出惊人的潜力和发展速度。从早期的逻辑推理、专家系统&#xff0c;到如今的深度学习、神经网络&#xff0c; AI 技术显著缩小了科学…