【CSS Zoro 01】说在前面 CSS概念 CSS语法 CSS选择器 元素 id 类 组合 通用 分组 属性 后代 子元素 相邻兄弟

news2024/11/25 20:23:35

CSS

      • 说在前面
      • 概念
      • 语法 syntax
      • CSS选择器

说在前面

最近挺喜欢看One Piece的,并且发现前端三剑客如果对应上Sanji,Zoro和Luffy的话会很有趣,所以说非常想在博客里面对应上小彩蛋,即使会损失一些SEO,但是这样做对我来说很酷,那么现在我们就开始学习CSS吧!
[ 本系列博客主要参考于w3school,是对其中详细教程的总结 ]


概念

CSS之前学习过程中给我的感觉是非常的美,样式可以做的非常酷,但是总体难度相对于HTML要难上许多,但是学习起来非常有意思

首先 CSS 是描述 HTML 文档样式的语言

  1. Cascading Style Sheets 层叠样式表/级联样式表
  2. 描述如何在屏幕、纸张或其他媒体上显示 HTML 元素(针对不同设备和屏幕尺寸的设计和布局)
  3. 节省大量工作,可以同时控制多张网页的布局
  4. 外部样式表存储在 CSS 文件中

语法 syntax

CSS 规则集(rule-set)由选择器和声明块组成
在这里插入图片描述选择器指向需要设置样式的 HTML 元素
声明块包含一条或多条用分号分隔的声明
每条声明都包含一个 CSS 属性名和一个属性值,以冒号分隔
多条 CSS 声明用分号分隔,声明块用花括号括起来


CSS选择器

CSS 选择器大致分为5类

  1. 简单选择器:名称,id,类
  2. 组合选择器:特定关系
  3. 伪类选择器:特定状态
  4. 伪元素选择器:选取元素部分并设置样式
  5. 属性选择器:属性or属性值
CSS 元素选择器
在 W3C 标准中,元素选择器又称为类型选择器 type selector
p {
	text-align: center;
	color: red;
}

CSS id 选择器
元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素
注意 id 名称不能以数字开头
#para1 {
	text-align: center;
	color: red;
}

CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素
.class {
	text-align: center;
	color: red;
}
注意类名不能以数字开头


组合
p.center {
	text-align: center;
	color
}

引用多个类
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
	text-align: center;
	color: red;
}

p.large {
	font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">此标题不受影响</h1>
<p class="center">红色并居中对齐</p>
<p class="center large">红色并居中对齐并放大字体</p>

</body>
</html>

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background: silver;}
通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限,再包含其他类名也可)


通用选择器
universal selector
* {
	text-align: center;
	color:blue;
}

分组选择器
h1, h2, p {
	text-align: center;
	color: red;
}
通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表

声明分组
h1 {font: 28px Verdana; color: white; background: black;}

与选择器分组一样,声明分组也是一种便利的方法,可以缩短样式表,使之更清晰,也更易维护

提示:在规则的最后一个声明后也加上分号是一个好习惯
在向规则增加另一个声明时,就不必担心忘记再插入一个分号

结合选择器分组和声明分组
利用很少的语句即可定义复杂的样式
h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
[title] {color:red;}
a[href] {color:red;}

还可以根据多个属性进行选择,只需将属性选择器链接在一起即可
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] {color: red;}

可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像
img[alt] {border: 5px solid red;}
上面这个特例更适合用来诊断而不是设计,即用来确定图像是否确实有效

除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

p[class="important warning"] {color: red;}
p[class~="important"] {color: red;}
如果忽略了波浪号,则说明需要完成完全值匹配

p.important 和 p[class="important"] 应用到 HTML 文档时是等价的

子串匹配属性选择器
[abc^="def"]  选择abc属性值以"def"开头的所有元素
[abc$="def"]  选择abc属性值以"def"结尾的所有元素
[abc*="def"]  选择abc属性值中包含子串"def"的所有元素
如:
a[*href="w3school.com.cn"] {color: red;}

后代选择器 descendant selector 又称为包含选择器
后代选择器可以选择作为某元素后代的元素

可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用
若希望只对 h1 元素中的 em 元素应用样式
h1 em {color: red;}

在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器
选择器之间的空格是一种结合符(combinator)

后代选择器的功能极其强大
可以使 HTML 中不可能实现的任务成为可能

div.sidebar {background: blue;}
div.maincontent {background: white;}
div.sidebar a:link {color: white;}
div.maincontent a:link {color: blue;}

a含有四种状态:
1. link: a对象在未被访问前的样式
2. visited: a对象访问过后的样式
3. hover: a对象当有鼠标悬停其上的样式
4. active: a对象点击时的样式
a:hover一定要定义在a:link,a:visited的后面

后代选择器中两个元素之间的层次间隔可以是无限的

子元素选择器 Child selectors只能选择子元素
h1 > strong {color: red;}

相邻兄弟选择器 Adjacent sibling selector 可以选择紧接在另一元素后的元素,且二者具有相同父元素
例如增加紧接在h1元素后出现的段落的上边距
h1 + p {margin-top: 50px;}
选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素

+ 是 相邻兄弟结合符  Adjacent sibling combinator

相邻兄弟结合符还可以结合其他结合符
html > body table + ul {margin-top: 20px}
选择紧接在table元素后面出现的所有兄弟ul元素,table元素包含在body元素中,body元素本身是html元素的子元素

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

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

相关文章

算法修炼之筑基篇——筑基一层(解决01背包问题)

✨博主&#xff1a;命运之光 ✨专栏&#xff1a;算法修炼之练气篇​​​​​ ✨博主的其他文章&#xff1a;点击进入博主的主页 前言&#xff1a;学习了算法修炼之练气篇想必各位蒟蒻们的基础已经非常的扎实了&#xff0c;下来我们进阶到算法修炼之筑基篇的学习。筑基期和练气期…

raise AssertionError(“Torch not compiled with CUDA enabled“)

1、运行代码可知&#xff0c;当前cuda不可用。 import torch print(torch.cuda.is_available()) # False 2、打开power shell or cmd&#xff0c;输入nvidia-smi命令&#xff0c;检查当前英伟达显卡信息。 可知当前驱动版本512.78&#xff0c;支持的cuda最高版本为11.6&…

时间序列教程 六、深度学习与时间序列分析结合

一、深度学习方法 与传统的时间序列预测模型相比,神经网络有以下几个好处: 1、自动学习如何将趋势、季节性和自相关等系列特征纳入预测。 2、能够捕捉非常复杂的模式。 3、可以同时建模许多相关的系列,而不是单独处理每个系列。 但是神经网络有一些劣势: 1、模型的构建可能…

PyCharm开发工具的安装与使用

PyCharm集成开发工具(IDE),是当下全球python开发者&#xff0c;使用最频繁的工具软件。绝大多数的python程序&#xff0c;都是在PyCharm工具内完成的开发。 1.先进行下载并安装它 下载官网地址&#xff1a;https://www.jetbrains.com/pycharm/download/#sectionwindows 宝子…

SpringBoot自定义拦截器实现权限过滤功能(基于责任链模式)

前段时间写过一篇关于自定义拦截器实现权限过滤的文章&#xff0c;当时是用了自定义mybatis拦截器实现的&#xff1a;SpringBoot自定义Mybatis拦截器实现扩展功能(比如数据权限控制)。最近学习设计模式发现可以用责任链模式实现权限过滤&#xff0c;因此本篇采用责任链模式设计…

Docker(概述、安装、配置、镜像操作)

一、docker是什么&#xff1f; docker是一种go语言开发的应用容器引擎&#xff0c;运行容器里的应用。docker是用来管理容器和镜像的一种工具。 容器引擎&#xff1a;docker、rocket、podman、containerd 容器与虚拟机的区别 容器&#xff1a;所有容器共享宿主机内核。使用…

【手撕Spring源码】AOP

文章目录 AOP 实现之 ajc 编译器AOP 实现之 agent 类加载AOP 实现之 proxyJDK代理CGLIB代理JDK动态代理进阶CGLIB代理进阶MethodProxy JDK 和 CGLIB 在 Spring 中的统一切点匹配从 Aspect 到 Advisor通知转换调用链执行静态通知调用动态通知调用 AOP 底层实现方式之一是代理&am…

Java/Compose Desktop项目中进行python调用

写在前面 开发compose desktop项目爬网站时遇到验证码处理不方便需要借助python庞大的处理能力&#xff0c;这时需要再项目中调用python去执行获取结果&#xff0c;这里记录一下使用过程。 本次开发记录基于&#xff1a;python 3.9&#xff0c;compose 1.3 java17 工具&#x…

2年测试我迷茫了,软件测试大佬都会哪些技能?我的测试进阶之路...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 Python自动化测试&…

【MCS-51单片机汇编语言】期末复习总结④——求定时器初值(题型四)

文章目录 重要公式T~机器~ 12 / ∫~晶振~(2^n^ - X) * T~机器~ T~定时~ 工作方式寄存器TMOD常考题型例题1题解方式0方式1 关于定时器的常考题目为已知晶振 ∫ 、定时时间&#xff0c;求定时器初值。 重要公式 T机器 12 / ∫晶振 (2n - X) * T机器 T定时 其中n为定时器位数…

线性代数2:矩阵(1)

目录 矩阵&#xff1a; 矩阵的定义&#xff1a; 0矩阵 方阵 同型矩阵&#xff1a; 矩阵相等的判定条件 矩阵的三则运算&#xff1a; 乘法的适用条件 矩阵与常数的乘法&#xff1a; 矩阵的乘法&#xff1a; 矩阵的乘法法则&#xff1a; Note1&#xff1a; Note2&…

【数据库】表数据delete了,表文件大小不变

背景 在本周的时候&#xff0c;接到了短信数据空间报警短信&#xff0c;提示的是磁盘空间占用80以上&#xff0c;而这个数据库总体的存储量一共100G&#xff0c;商量之后决定在不升配置的前提下&#xff0c;删除一些不需要的数据表。比如针对A表删除1000W数据。但是和DBA沟通后…

FAST-LIO2论文阅读

目录 迭代扩展卡尔曼滤波增量式kd-tree&#xff08;ikd-tree&#xff09;增量式维护示意图ikd-tree基本结构与构建ikd-tree的增量更新&#xff08;Incremental Updates&#xff09;逐点插入与地图下采样使用lazy labels的盒式删除属性更新 ikd-tree重平衡平衡准则重建及并行重建…

SMTP简单邮件传输协议(C/C++ 发送电子邮件)

SMTP是用于通过Internet发送电子邮件的协议。电子邮件客户端&#xff08;如Microsoft Outlook或macOS Mail应用程序&#xff09;使用SMTP连接到邮件服务器并发送电子邮件。邮件服务器还使用SMTP将邮件从一个邮件服务器交换到另一个。它不用于从服务器下载电子邮件&#xff1b;相…

jmeter安装及使用

jmeter安装及使用 一、说明二、安装2.1 目录结构 三、使用3.1 运行jmeter3.2 设置语言3.3 设置线程组3.3.1 设置压测请求3.3.2 设置汇总报告3.3.3 设置结果树 3.4 开始压测 四、导出执行报告4.1 保存配置4.2 执行命令4.3 生成报告常见问题 一、说明 最近需要对项目接口进行压测…

vue简单实现一个类似微信左右滑动更多功能

1、需求背景 产品需要在购物车加一个左右滑动更多的功能&#xff0c;由于是PC端&#xff0c;大致扫描了下使用的UI库&#xff0c;貌似没有单独提供此类组件&#xff0c;反正有时间&#xff0c;就自己造一个轮子试试 2、先看效果 大致有一个橡皮筋的效果&#xff0c;可能没那…

分布式锁方案学习

很久没有写文章了&#xff0c;前些天的面试被问到了分布式锁的解决方案&#xff0c;回答的比较简单&#xff0c;只知道Redis&#xff0c;Mysql&#xff0c;Zookeeper能够作为分布式锁应用&#xff0c;今天就来详细的学习一下这三种分布式锁的设计思想及原理。 能够来看这篇文章…

05WEB系统的通信原理图

WEB系统的通信原理 名称作用URL统一资源定位符, 例如:http://www.baidu.com域名在https://www.baidu.com/这个网址中www.baidu.com 是一个域名IP地址计算机在网络当中的一个身份证号, 在同一个网络当中IP地址是唯一的, 有了IP地址两台计算机直接才能建立连接通信端口号一个计算…

如何让你的汇报更有说服力?数据监控是关键!

第5讲中玩过一个扫雷游戏&#xff0c;目标是排除计划中的“延期地雷”&#xff0c;但是&#xff0c;总有些“雷”防不胜防。我们在做计划的时候&#xff0c;明明已经想得非常周全了&#xff0c;可是&#xff0c;真正开工几天之后才发现&#xff0c;很多事情并没有那么简单。 1…

4-1 活动安排问题

1.什么是贪心算法 我的理解&#xff1a; 贪心算法是一种常用的问题求解方法&#xff0c;它在每个步骤上都选择当前看起来最优的解&#xff0c;而不考虑整体的最优解。简单来说&#xff0c;贪心算法采取局部最优的决策&#xff0c;希望通过每个局部最优解的选择&#xff0c;最终…