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

news2024/11/23 21:48:19

1、CSS了解

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

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

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

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.coloradmin.cn/o/1620600.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

谷歌搜索SEO优化需要做什么?

最基本的要求&#xff0c;网站基础要优化好&#xff0c;让你的网站更加友好地服务于用户和搜索引擎&#xff0c;首先你要保证你的网站也适配手机端&#xff0c;现在手机端&#xff0c;如果你的网站在手机上打开慢&#xff0c;或者没有适配手机端&#xff0c;让用户用手机看着电…

Git merge的版本冲突实验

实验目的 发现 两个分支的 相同文件 怎样被修改 才会发生冲突&#xff1f; 实验过程 1.初始状态 现在目前有1.py、2.py两个文件&#xff0c;已经被git管理。现在我想制造冲突&#xff0c;看怎样的修改会发生冲突&#xff0c;先看怎么不会发生冲突。 目前仓库里的版本是这样…

【MySQL】A01、性能优化-参数监控分析

1、参数监控 1.1、MySQL command 查看 mysql>SHOW STATUS; &#xff08;服务器状态变量&#xff0c;运行服务器的统计和状态指标&#xff09; mysql> SHOW VARIABLES;&#xff08;服务器系统变量&#xff0c;实际上使用的变量的值&#xff09; mysql> SHOW STATUS …

2024年 团体程序设计天梯赛个人总结

前言&#xff1a; 这是一个悲伤的故事~ &#x1f3c6;题目传送门 ⭐L1一阶题⭐L1-097 编程解决一切&#xff08;5分&#xff09;⭐L1-098 再进去几个人&#xff08;5分&#xff09;⭐L1-099 帮助色盲&#xff08;10分&#xff09;⭐L1-100 四项全能&#xff08;10 分&#xff0…

做大模型产品,如何设计prompt?

做GenAI产品&#xff0c;除了要设计好的AI任务流程&#xff0c;合理的拆分业务以外&#xff0c;最重要的就是写好prompt&#xff0c;管理好prompt&#xff0c;持续迭代prompt。 prompt一般有两种形式&#xff1a;结构化prompt和对话式prompt。 结构化prompt的优点是通过规范的…

C++:二叉树进阶

二叉搜索树 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树 &#xff0c;或者是具有以下性质的二叉树 : 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 它的左右子…

超分中使用的损失函数和经典文章

损失函数 https://towardsdatascience.com/super-resolution-a-basic-study-e01af1449e13 在GAN出现之前&#xff0c;使用的更多是MSE&#xff0c;PSNR,SSIM来衡量图像相似度&#xff0c;同时也使用他们作为损失函数。 MSE 表面上MSE直接决定了PSNR&#xff0c;MSE&#xff…

路径规划算法 | A* 搜索算法

作者&#xff1a;Rachit Belwariar 编译&#xff1a;东岸因为一点人工一点智能 路径规划算法 | A* 搜索算法https://mp.weixin.qq.com/s/lTVkknLWZ4ERYnv8m0JCGQ 动机&#xff1a;为了在现实生活中近似求解最短路径&#xff0c;例如地图、游戏等存在许多障碍物的情况。我们可…

Linux命令超详细介绍

目录 安装 Linux的目录结构&#xff1a; Linux命令入门&#xff1a; Linux命令的基础格式&#xff1a; 例子&#xff1a; ls 参数 选项 注意&#xff1a; 目录切换命令&#xff1a;cd/pwd cd: pwd: 相对路径和绝对路径&#xff1a; mkdir 不用参数&#xff1a; …

非Root用户编译C程序如何生成Core文件

非Root用户编译C程序如何生成Core文件 一.生成core文件的步骤1.设置核心转储文件大小为不限制2.**修改核心转储文件生成路径**3.指定core的生成目录为当前目录下4.测试程序 二.核心转储相关设置文件 一.生成core文件的步骤 1.设置核心转储文件大小为不限制 #查询生成core文件…

云上如何实现 Autoscaling: AutoMQ 的实战经验与教训

01 背景 弹性是云原生、Serverless 的基础。AutoMQ 从软件设计之初即考虑将弹性作为产品的核心特质。对于 Apache Kafka 而言&#xff0c;由于其存储架构诞生于 IDC 时代&#xff0c;针对物理硬件设计&#xff0c;存储层强依赖本地存储&#xff0c;已不能很好地适应现在云的时…

【网络】:高级IO(一)

高级IO 一.五种IO模型二.多路转接&#xff08;select&#xff09;三.非阻塞IO&#xff08;funcl&#xff09;四.POLL IO等待拷贝。单位时间内&#xff0c;IO过程中&#xff0c;等的比例越小&#xff0c;IO就越高效。几乎所有提高IO效率的方式本质都是基于此。 一.五种IO模型 举…

深入解析:前端跨域问题及其CORS、代理、JSONP、Nginx反向代理等解决方案

前端跨域是指在浏览器环境下&#xff0c;当一个网页&#xff08;源&#xff09;尝试访问与自身源不同的服务器资源&#xff08;目标源&#xff09;时&#xff0c;由于浏览器的同源策略限制而产生的访问限制现象。同源策略&#xff08;Same-Origin Policy&#xff09;是浏览器实…

芜湖市夜间景区、文娱主题活动、夜读空、精品文艺演出、数字促销补助等夜间经济奖励政策申报条件、材料

芜湖市示范街区、示范门店、夜间景区、文娱主题活动、体育赛事、夜读空、精品文艺演出、数字促销补助等夜间经济奖励政策申报条件、材料及补贴标准整理如下 芜湖市2023年促进夜间经济发展若干政策申报时间&#xff1a; 针对2023年度促进夜间经济发展若干政策&#xff08;商务局…

❤️新版Linux零基础快速入门到精通——第一部分❤️

❤️新版Linux零基础快速入门到精通——第一部分❤️ 非科班的我&#xff01;Ta&#xff01;还是来了~~~1. 来认识一下Linux吧!1.1 操作系统概述1.1.1 操作系统概述1.1.2 操作系统的发展史1.1.2.1 Unix1.1.2.2 Minix1.1.2.3 Linux 1.1.3 操作系统的发展 1.2 Linux初识1.2.1 Lin…

二叉检索树的实现——增删改查、读取命令文件、将结果写入新文件

看这篇文章前的知识储备 链接: 二叉树的性质和分类 链接: 二叉检索树的概念 、insert方法的图解、实现、时间代价分析 链接: 二叉检索树的search、remove方法的图解、实现、时间代价分析 1、中序遍历及中序遍历写进文件的区别 两者思路一致&#xff0c;将二叉树分为三部分&…

Linux信号(产生)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 信号是什么&#xff1f; 为什么要有信号&#xff1f; 信号是如何产生的&#xff1f; kill命令 键盘产生信号 系统调用 kill系统调用 raise函数 abort函数 自制kill命令 ​编辑 软件条件 举例一&#xff1…

C++ :设计模式实现

文章目录 原则单一职责原则开闭原则依赖倒置原则接口隔离原则里氏替换原则 设计模式单例模式观察者模式策略模式代理模式 原则 单一职责原则 定义&#xff1a; 即一个类只负责一项职责 问题&#xff1a; 类 T 负责两个不同的职责&#xff1a;职责 P1&#xff0c;职责 P2。当…

大数据第六天

这里写目录标题 问题解决问题查询插入(时间慢)练习sql数据清理 问题 FAILED: ParseException line 1:16 mismatched input ‘input’ expecting INPATH near ‘local’ in load statement MismatchedTokenException(24!155) 加载数据的时候出现了这个错误&#xff0c;我们解释…