02-CSS3基本样式

news2024/11/20 18:22:41

目录

1. CSS3简介

1.1 CSS3的兼容情况

1.2 优雅降级和渐进增强的开发思想

2. 新增选择器

2.1 选择相邻兄弟

2.2 匹配选择器

2.3 属性选择器(重点)

2.4 结构性伪类选择器（重点）

2.4.1 整体结构类型

2.4.2 标签结构类型

2.4.3 指定子元素的序号（重点）

2.4.4 其他伪类选择器(了解)

2.5 文本选择伪元素(了解)

2.6 表单中使用的状态伪类选择器

我可以:

2.7 内容追加伪元素（重点）

多学一招

2.8 JS新增的选择器（重点）

3. CSS3新增样式属性

3.1 background-image多重背景

3.2 background-image的渐变

3.2.1 线性渐变(重点)

3.2.2 径向渐变

3.3 background-size背景缩放(回顾)

3.4 background-origin背景定位原点

3.5 CSS3的opacity 属性(重点)

3.6 CSS3的filter(滤镜) 属性

3.7 hsla() 函数

3.8 calc() 函数

3.9 box-sizing盒模型属性(回顾)

1. CSS3简介

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

1.1 CSS3的兼容情况

CSS3给开发人员带来了很多有趣的功能，同时也为用户提供了更好的用户体验。但是，这一切并不是所有的浏览器都完全支持。目前主流的浏览器都采用了私有属性的形式来支持CSS3属性，以便让用户体验CSS3的新特性。

下面介绍这些私有属性：

  • Webkit引擎浏览器使用“-webkit-”作为私有属性，像Safari和Chrome浏览器。

  • Gecko引擎浏览器使用“-moz-”作为私有属性，像Firefox浏览器。

  • Presto引擎浏览器使用“-o-”作为私有属性,像Opera浏览器。

  • Trident引擎浏览器使用“-ms-”作为私有属性，只有IE8以上支持,像IE浏览器。

css:

-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
transition:1s;

这些专用私有属性虽然可以避免不同浏览器在解析相同属性时出现冲突，但是却给开发人带来了诸多不便。因为，开发人员不仅需要写更多的代码，而且还非常容易导致同一个页面在不同的浏览器之间表现不一致。当然随着CSS3的普及，这种情况一定会得到改善。

1.2 优雅降级和渐进增强的开发思想

优雅降级:一开始就针对比较完整,兼容性比较好的版本进行开发,然后在项目后期对低版本进行兼容。

举例子：我们前端在开发项目的时候一开始可能不会再ie上进行开发测试,一般是现在谷歌上跑通,然后再去兼容低版本的ie浏览器。

渐进增强:则是和优雅降级相反,一开始我们就针对ie浏览器进行开发,然后逐步完善提升版本去适配高级浏览器。

举例子：我们一开始就在ie低版本浏览器上进行开发测试,走通之后我们再去谷歌,火狐浏览器上进行测试开发。

2. 新增选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。

2.1 选择相邻兄弟

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器,

h1 + p {
    margin-top:50px;
}

2.2 匹配选择器

匹配所有在#div元素之后的同级p元素。

 div ~ p {
    background-color: #f00;
 }

2.3 属性选择器(重点)

CSS3新增加了属性选择器，使选择器引入了通配符的概念。这3中常用的属性选择器如下所示：

选择器描述
[attribute]用于选取带有指定属性的元素。
[attribute=value]用于选取带有指定属性和值的元素。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。
[attribute~=value]用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。
[attribute|=value]用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。

2.4 结构性伪类选择器（重点）

结构性伪类选择器是CSS3中新增加的类型选择器。常用的的结构性伪类选择器如下所示：

2.4.1 整体结构类型

  • :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

  • :last-child 匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素。

2.4.2 标签结构类型

  • :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

  • :last-of-type 匹配某个父元素中最后一个某一类型的元素。

2.4.3 指定子元素的序号（重点）

  • :nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以使数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3 :使用公式时,n从0开始），参数的索引起始值时1，而不是0。

  • :nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。

  • :nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。

  • :nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上。

2.4.4 其他伪类选择器(了解)

  • :root：将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。

  • :empty 指定当元素内容为空白时使用的样式。

  • :not(selector)排除selector选择器选中的元素，不对它们应用样式解析。

  • :target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效。

2.5 文本选择伪元素(了解)

  • ::selection指定当前元素处于选中状态部分的样式。只能向选择器应用少量CSS属性：color、background等。

2.6 表单中使用的状态伪类选择器

  • :disabled 指定当前元素处于不可用状态时的样式。

  • :enabled 指定当前元素处于可用状态时的样式。

  • :checked 指定表单中单选框或复选框处于选中状态时的样式。

我可以:

0,0,0,0

css的权重:行内样式,ID选择器,类选择器,标签

!important > 行内样式>ID选择器 > 类选择器|伪类|属性选择器 > 标签> 通配符 > 继承 > 浏览器默认属性

2.7 内容追加伪元素（重点）

  • ::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)

  • ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素)

    //在每个 <p> 元素前面插入内容，并设置所插入内容的样式：
​

    p:before
{ 
    content:"开心";
    background-color:yellow;
    color:red;
    font-weight:bold;
}
a::after {
  content: "每一天";
}

多学一招

注意

:before和::before写法的区别

  • 相同点

1.都可以用来表示伪类对象，用来设置对象前的内容，:before和::before写法是等效的

2.伪类对象要配合content属性一起使用

3.伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

4.所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，

  • 不同点

    :before是css2的写法，::before是css3的写法，在H5开发中建议使用::before比较好。

多学一招:

伪元素和伪类区别

  • 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

  • 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。

2.8 JS新增的选择器（重点）

querySelector();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function() {
            var div1 = document.querySelector("[myselect=hello]");
            div1.style.background = "red";
        }
    </script>
</head>
<body>
    <div id="div1" myselect="hello">哈哈哈</div>
</body>
</html>
querySelectorAll();

window.onload = function() {
        var boxs = document.querySelectorAll(".box");
        console.log(boxs);
}

3. CSS3新增样式属性

3.1 background-image多重背景

在CSS3中可以在一个元素里显示多个背景图像，还可以将多个背景图像进行重叠显示。（最后写在最下面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            background-image: url(img/1.jpg),url(img/3.jpg),url(img/2.jpg);
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-position: 5% 100%, 95% 0%, top;
            padding: 300px 0;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.2 background-image的渐变

渐变配色推荐网站:Fresh Background Gradients | WebGradients.com 💎

CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

  • 径向渐变（Radial Gradients）- 由它们的中心定义

3.2.1 线性渐变(重点)

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

  • direction:预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

  • 定义一个角度

如果不设置direction,那么从头部开始的线性渐变，从红色开 始，转为黄色，再到蓝色：

#grad {
	width:200px;
	height: 200px;
    background-image: linear-gradient(red, yellow, blue);
}

其他线性渐变：

#grad {
  background-image: linear-gradient(to bottom right, red , yellow);
}
#grad {
  background-image: linear-gradient(to right, red , yellow);
}

3.2.2 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）。

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

#grad {
  background-image: radial-gradient(red, yellow, green);
}
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

3.3 background-size背景缩放(回顾)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)（img大小一样）或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

温馨提示：background-size属性一定要写在background属性后面。

3.4 background-origin背景定位原点

到目前为止，如果要给图像定位，可以使用background-position属性，但是这个属性总是以元素的左上角为坐标原点进行图像定位。background-origin属性是用来指定绘制背景图像时的起点，使用此属性可以任意定位图像的起始位置。它的语法如下：

background-origin: padding-box|border-box|content-box;

其中比较常用的参数如下所示：

  • padding-box： 默认值, 从padding区域开始显示背景。

  • border-box： 从border区域开始显示背景。

  • content-box： 从content区域开始显示背景。

div {
		width:400px;    

		height:200px; 

		border: 10px dotted #f00;

		padding: 20px;

		background: url(img/2.jpg) no-repeat;   

		/*background-size: contain;*/

		background-origin: content-box;

}

3.5 CSS3的opacity 属性(重点)

opacity 属性是设置元素的不透明级别

语法

opacity: value|inherit;
值描述
value规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit应该从父元素继承 opacity 属性的值。

3.6 CSS3的filter(滤镜) 属性

filter 属性定义了元素(通常是<img>)的可视效果

语法

 filter: grayscale(100%) | blur(px);
值描述
grayscale将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

3.7 hsla() 函数

表示色相-饱和度-亮度（Hue-saturation-lightness）模式。

  • h：表示色相，就是颜色，只不过这个颜色是用单个值来表示的

    整个颜色用圆形来表示的话，每个度数都对应一个颜色。 比如red = 0deg = 360deg green = 120deg blue = 240deg

  • s和l都用百分比表示 s 的100%就是完全饱和，偏向于原色，而0%就是完全不饱和，偏向于灰色 l 的100%就是亮度最大，偏向于白色，而0%就是没有亮度，偏向于黑色。

.box {
    width: 200px;
    height: 200px;
    background-color: hsla(120, 50%, 50%, 1);
}

3.8 calc() 函数

calc() 函数用于动态计算长度值。

calc(expression)
值描述
expression必须，一个数学表达式，结果将采用运算后的返回值。

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

  • 任何长度值都可以使用calc()函数进行计算；

  • calc()函数支持 "+", "-", "*", "/" 运算；

  • calc()函数使用标准的数学运算优先级规则

3.9 box-sizing盒模型属性(回顾)

盒模型分为 ： W3C标准盒模型 和 IE盒模型

1.W3C标准盒子（content-box）：

在这种盒模型下，是指块元素box-sizing属性为content-box的盒模型。

我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

2.IE盒子（border-box）：

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

盒子总宽度= margin + width

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

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

相关文章

Python——Selenium快速上手+方法（一站式解决问题）

Python——Selenium快速上手+方法（一站式解决问题）

目录 前言 一、Selenium是什么 二、Python安装Selenium 1、安装Selenium第三方库 2、下载浏览器驱动 3、使用Python来打开浏览器 三、Selenium的初始化 四、Selenium获取网页元素 4.1、获取元素的实用方法 1、模糊匹配获取元素 & 联合多个样式 2、使用拉姆达表达式 3、加上…
阅读更多...
汇总区间，合并区间

汇总区间，合并区间

题目一&#xff1a; 代码如下&#xff1a; vector<string> summaryRanges(vector<int>& nums) {vector<string> ret;if (nums.size() 0)return ret;int n nums.size();int i 0;while (i < n){int prev i;i;while (i < n && nums[i] n…
阅读更多...
汽车MCU虚拟化--对中断虚拟化的思考(1)

汽车MCU虚拟化--对中断虚拟化的思考(1)

目录 1.中断虚拟化的困惑 2.从R52入手 3.小结 1.中断虚拟化的困惑 在车控类控制器里&#xff0c;中断对于我们来说是非常宝贵的资源&#xff0c;可大幅提高系统实时性。 这些中断基本都属于实际物理硬中断(软中断另说)&#xff0c;例如对一个按键按下的中断响应&#xff0…
阅读更多...
HR人才测评，企业人才综合素质测评?

HR人才测评，企业人才综合素质测评?

HR企业人才综合素质测评是一种评估企业人才综合素质的方法。该测评方法通过对人才的综合能力、专业技能、沟通协调能力、团队合作能力、领导管理能力等方面进行评估&#xff0c;以期为企业提供更全面、更客观、更科学的人才选拔和管理的依据。 点击这里了解&#xff1a;『企业…
阅读更多...
Usage - hackthebox

Usage - hackthebox

简介 靶场&#xff1a;hackmyvm 靶机&#xff1a;Usage(10.10.11.18) 难度&#xff1a;Easy 靶机链接:https://app.hackthebox.com/machines/Usage 攻击机1&#xff1a;ubuntu22.04 (10.10.16.21) 攻击机2&#xff1a;windows11(10.10.14.33) 扫描 nmap起手 nmap -sT …
阅读更多...
云原生架构相关技术_1.容器技术

云原生架构相关技术_1.容器技术

1.容器技术的背景与价值 容器作为标准化软件单元&#xff0c;它将应用及其所有依赖项打包&#xff0c;使应用不再受环境限制&#xff0c;在不同计算环境间快速、可靠地运行。容器部署模式与其他模式的比较如下图1所示。 图1 传统、虚拟化、容器部署模式比较 Docker容器基于操作…
阅读更多...
四汇聚荣科技是靠谱的吗？

四汇聚荣科技是靠谱的吗？

在当今这个科技飞速发展的时代&#xff0c;新兴科技公司如同雨后春笋般涌现。其中&#xff0c;四汇聚荣科技引起了人们的关注。许多人好奇&#xff0c;这家公司是否靠谱?它能否在激烈的市场竞争中站稳脚跟?接下来&#xff0c;让我们从四个不同的方面来深入探讨这个问题。 一、…
阅读更多...
远程工作/线上兼职网站整理(数字游民友好)

远程工作/线上兼职网站整理(数字游民友好)

文章目录 国外线上兼职网站fiverrupwork 国内线上兼职网站甜薪工场猪八戒网云队友 国外线上兼职网站 fiverr https://www.fiverr.com/start_selling?sourcetop_nav upwork https://www.upwork.com/ 国内线上兼职网站 甜薪工场 https://www.txgc.com/ 猪八戒网 云队友 …
阅读更多...
首创十八道工艺，口味王引领槟榔产业高质量发展

首创十八道工艺，口味王引领槟榔产业高质量发展

说到槟榔&#xff0c;相信大伙都不会陌生&#xff0c;槟榔的历史可以追溯到汉代&#xff0c;不少文献有过记载&#xff0c;如汉代的沈约著的《咏竹槟榔盘》中提到“荐羞虽百品&#xff0c;所贵浮天实”&#xff1b;唐朝“诗仙”李白更是写道“何时黄金盘&#xff0c;一斛荐槟榔…
阅读更多...
信号与槽函数的魔法：QT 5编程中的核心机制

信号与槽函数的魔法：QT 5编程中的核心机制

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、信号与槽函数的基本概念 二、信号与槽函数的实现原理 三、信号与槽函数的代码实例 四…
阅读更多...
使用Redis缓存实现短信登录逻辑，手机验证码缓存，用户信息缓存

使用Redis缓存实现短信登录逻辑，手机验证码缓存，用户信息缓存

引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency> 加配置 spring:redis:host: 127.0.0.1 #redis地址port: 6379 #端口password: 123456 #密码…
阅读更多...
封装了一个iOS对号成功动画

封装了一个iOS对号成功动画

基本思路其实很简单&#xff0c;就是通过贝塞尔曲线画出路径&#xff0c;然后 使用CAShapeLayer 渲染路径&#xff0c;然后通过strokeEnd 动画实现 路径的效果&#xff0c;这里注意&#xff0c;这个过程中过遇到过一个问题&#xff0c;就是 对号动画完成之后&#xff0c;整个对…
阅读更多...
微服务 feign-gateway

微服务 feign-gateway

早期微服务跨集群调用 使用的是Eureka 和RestTemplate&#xff0c;这种写法虽然可以解决服务之间的调用问题 ,但是随着服务的增多&#xff0c;实例变动&#xff0c;早期的写法相当于把请求方式&#xff0c;请求地址&#xff0c;参数写死了&#xff0c;耦合度太高&#xff0c;参…
阅读更多...
C#知识|通用数据访问类SQLHelper的编写

C#知识|通用数据访问类SQLHelper的编写

哈喽，你好啊，我是雷工！ 前面学习了C#操作SQLServer数据库数据的增删改查， 《C#知识|通过ADO.NET实现应用程序对数据库的增、删、改操作。》 其中实现的过程中有很多代码是重复的，此时作为高阶程序员为了使代码更优雅，避免重复， 从而要考虑代码的复用技术，针对此案例中代…
阅读更多...
【稳定检索】2024年心理学与现代化教育、媒体国际会议(PMEM 2024)

【稳定检索】2024年心理学与现代化教育、媒体国际会议(PMEM 2024)

2024年心理学与现代化教育、媒体国际会议 2024 International Conference on Psychology and Modern Education and Media 【1】会议简介 2024年心理学与现代化教育、媒体国际会议即将召开&#xff0c;这是一场汇聚全球心理学、教育及媒体领域精英的学术盛宴。 本次会议将深入探…
阅读更多...
23 vue3面试重难点复习：响应式原理、特点、8大生命钩子、data数据定义、组件、全家桶

23 vue3面试重难点复习：响应式原理、特点、8大生命钩子、data数据定义、组件、全家桶

vue作为用的最为广泛的当前热门框架&#xff0c;总结如下重难点核心知识&#xff1a; 1.vue特点是什么&#xff1f; 1.1优点 渐进式 vue本身只提供数据响应式&#xff0c;需要全局缓存用 vuex&#xff0c;需要路由用 vue-router 组件化 封装组件&#xff0c;利于复用 响应式数…
阅读更多...
美颜插件技术详解：第三方美颜SDK的选择与集成教学

美颜插件技术详解：第三方美颜SDK的选择与集成教学

为了满足用户对美颜的需求&#xff0c;开发者们可以利用第三方美颜SDK来快速、高效地集成美颜功能到他们的应用中。今天&#xff0c;小编将详细解析美颜插件技术&#xff0c;介绍如何选择适合的第三方美颜SDK&#xff0c;并提供集成教学指南。 一、美颜插件技术概述 通过美颜…
阅读更多...
轻兔推荐 —— MyIP

轻兔推荐 —— MyIP

via&#xff1a;轻兔推荐 简介 一个功能全面的IP工具箱。轻松检查你的 IP&#xff0c;IP 地理位置&#xff0c;检查DNS泄漏&#xff0c;检查 WebRTC 连接&#xff0c;速度测试&#xff0c;ping 测试&#xff0c;MTR测试&#xff0c;检查网站可用性&#xff0c;查询 Whois 信…
阅读更多...
QT系列教程(6) 几种标准对话框

QT系列教程(6) 几种标准对话框

几种标准对话框 本文介绍几种标准对话框&#xff0c;都是Qt封装好的&#xff0c;我们先创建一个界面&#xff0c;添加几个按钮&#xff0c;然后分别在几个按钮的回调函数里添加创建不同对话框的逻辑 颜色对话框 颜色对话框用来选择颜色&#xff0c;创建后会显示各种颜色和透明…
阅读更多...
海外高清短视频：四川京之华锦信息技术公司

海外高清短视频：四川京之华锦信息技术公司

海外高清短视频&#xff1a;探索世界的新窗口 在数字化时代的浪潮下&#xff0c;海外高清短视频成为了人们探索世界、了解异国风情的新窗口。四川京之华锦信息技术公司这些短视频以其独特的视角、丰富的内容和高清的画质&#xff0c;吸引了无数观众的目光&#xff0c;让人们足…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023