CSS3基础

CSS3在CSS2的基础上增加了很多功能，如圆角、多背景、透明度、阴影等，以帮助开发人员解决一些实际问题。

1、初次使用CSS

与HTML5一样，CSS3也是一种标识语言，可以使用任意文本编辑器编写代码。下面简单介绍CSS3的基本用法。

1.1、CSS样式

CSS语法单元是样式，每个样式包含两部分内容，即选择器和声明（或称规则），如下图所示。
在这里插入图片描述

  • 选择器(selector)：指定样式作用于哪些对象，这些对象可以是某个标签、指定Class或ID值的元素等。浏览器在解析样式时，根据选择器来渲染对象的显示效果。
  • 声明(declaration)：指定浏览器如何渲染选择器匹配的对象。声明包括两部分，即属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声明被放置在一对大括号内，然后位于选择器的后面。
  • 属性(property)：CSS预设的样式选项。属性名由一个单词或多个单词组成，多个单词之间通过连字符相连，这样能够很直观地了解属性所要设置样式的类型。
  • 属性值(value)：定义显示效果的值，包括值和单位，或者仅定义一个关键字。

【示例】演示如何在网页中设计CSS样式。

  1. 第1步，新建网页文件，保存为test.html。
  2. 第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
  3. 第3步，在<style>标签内输入下面的样式，定义网页字体大小为24px，字体颜色为白色。
    body{font-size: 24px; color: #fff;}
  1. 第4步，输入下面样式代码，定义段落文本的背景色为蓝色。
    p { background-color: #00F; }
  1. 第5步，在标签内输入下面一段话，然后在浏览器中预览，效果如下图所示。
    <p>莫等闲，白了少年头，空悲切。 </p>

完成代码：

<html><head><style type="text/css">body{font-size:24px;color:#fff;}p { background-color: #00F; }</style></head><body><p>莫等闲，白了少年头，空悲切。 </p></body>
</html>

效果如下图所示：
在这里插入图片描述

1.2、引入CSS样式

在网页文档中，如何让浏览器能够识别和解析CSS样式，共有3种方法。

1.2.1、行内样式

把CSS样式代码置于标签的style属性中，例如：

    <span style="color:red;">红色字体</span><div style="border:solid 1px blue; width:200px; height:200px;"></div>

一般不建议使用行内样式，这种用法没有真正把HTML结构与CSS样式分离出来。

1.2.2、内部样式

    <style type="text/css">body {/*页面基本属性*/font-size: 12px;color: #CCCCCC;}/*段落文本基础属性*/p { background-color: #FF00FF; }</style>

把CSS样式代码放在

内部样式一般位于网页的头部区域，目的是让CSS源代码早于页面源代码被下载并解析。

1.2.3、外部样式

把样式放在独立的文件中，然后使用标签或者@import关键字导入。一般网站都采用这种方法来设计样式，真正实现HTML结构和CSS样式的分离，以便统筹规划、设计、编辑和管理CSS样式。

1.3、CSS样式表

样式表是由一个或多个CSS样式组成的样式代码段。样式表包括内部样式表和外部样式表，它们没有本质不同，只是存放位置不同。

内部样式表包含在<style>标签内，一个<style>标签就表示一个内部样式表。而通过标签的style属性定义的样式属性就不是样式表。如果一个网页文档中包含多个<style>标签，就表示该文档包含多个内部样式表。

如果CSS样式被放置在网页文档外部的文件中，则称为外部样式表。一个CSS样式表文档就表示一个外部样式表。实际上，外部样式表就是一个文本文件，其扩展名为.css。当把不同的样式复制到一个文本文件中后，另存为.css文件，则它就是一个外部样式表。

在外部样式表文件顶部可以定义CSS源代码的字符编码。例如，下面代码定义样式表文件的字符编码为中文简体。

    @charset "gb2312";

如果不设置CSS文件的字符编码，可以保留默认设置，则浏览器会根据HTML文件的字符编码解析CSS代码。

1.4、导入外部样式表

外部样式表文件可以通过两种方法导入HTML文档中。

1.4.1、使用<link>标签

使用<link>标签导入外部样式表文件的代码如下：

    <link href="001.css" rel="stylesheet" type="text/css" />

该标签必须设置的属性说明如下：

  • href：定义样式表文件URL。
  • type：定义导入文件类型，同style元素一样。
  • rel：用于定义文档关联，这里表示关联样式表。

1.4.2、使用@import命令

在<style>标签内使用@import关键字导入外部样式表文件的方法如下。

    <style type="text/css">@import url("001.css");</style>

在@import关键字后面，利用url()函数包含具体的外部样式表文件的地址。

1.5、CSS注释

在CSS中增加注释很简单，所有被放在“/*”和“*/”分隔符之间的文本信息都称为注释。

    /* 注释 */

或

    /*注释*/

在CSS源代码中，各种空格是不被解析的，因此可以利用Tab键、空格键对样式表和样式代码进行格式化排版，以方便阅读和管理。

1.6、CSS属性

CSS属性众多，在W3C CSS 2.0版本中共有122个标准属性(http://www.w3.org/TR/CSS2/propidx.html)，在W3C CSS 2.1版本中共有115个标准属性(http://www.w3.org/TR/CSS21/propidx.html)，其中删除了CSS 2.0版本中的7个属性：font-size-adjust、font-stretch、marker-offset、marks、page、size和text-shadow。在W3C CSS 3.0版本中又增加了20多个属性(http://www.w3.org/Style/ CSS/current-work#CSS3)。

1.7、CSS继承性

CSS样式具有两个基本特性：继承性和层叠性。

CSS继承性是指后代元素可以继承祖先元素的样式。继承样式主要包括字体、文本等基本属性，如字体、字号、颜色、行距等，不允许继承的类型属性包括边框、边界、补白、背景、定位、布局、尺寸等。

提示：灵活应用CSS继承性，可以优化CSS代码，但是继承的样式的优先级是最低的。

【示例】在body元素中定义整个页面的字体大小、字体颜色等基本页面属性，这样包含在body元素内的其他元素都将继承该基本属性，以实现页面显示效果的统一。

新建网页文档，在<body>标签内输入如下代码，设计一个多级嵌套结构。

    <div id="wrap"><div id="header"><div id="menu"><ul><li><span>首页</span></li><li>菜单项</li></ul></div></div><div id="main"><p>主体内容</p></div></div>

在<head>标签内添加<style type="text/css">标签，定义内部样式表，然后为body定义字体大小为12px，通过继承性，则包含在body元素的所有其他元素都将继承该属性，并显示包含的字体大小为12px。

完整代码如下：

<html><head><style type="text/css">body{font-size:12px;}</style></head><body><div id="wrap"><div id="header"><div id="menu"><ul><li><span>首页</span></li><li>菜单项</li></ul></div></div><div id="main"><p>主体内容</p></div></div></body>
</html>

在浏览器中预览，显示效果如下图所示：
在这里插入图片描述

1.8、CSS层叠性

CSS层叠性是指CSS能够对同一个对象应用多个样式的能力。

【示例1】新建网页文档，保存为test.html，在<body>标签内输入如下代码。

    <div id="wrap">看看我的样式效果</div>

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，分别添加两个样式。

div {font-size:12px;}
div {font-size:14px;}

两个样式中都声明相同的属性，并应用于同一个元素上。在浏览器中测试，则会发现最后字体显示为14px。也就是说，14px字体大小覆盖了12px的字体大小，这就是样式层叠。

完整代码如下：

<html><head><style type="text/css">div {font-size:12px;}div {font-size:14px;}</style></head><body><div id="wrap">看看我的样式效果</div></body>
</html>

在这里插入图片描述

当多个样式作用于同一个对象，则根据选择器的优先级确定对象最终应用的样式。

  • 标签选择器：权重值为1。
  • 伪元素或伪对象选择器：权重值为1。
  • 类选择器：权重值为10。
  • 属性选择器：权重值为10。
  • ID选择器：权重值为100。
  • 其他选择器：权重值为0，如通配选择器等。

然后，以上面权值数为起点计算每个样式中选择器的总权值数。计算规则如下：

  • 统计选择器中ID选择器的个数，然后乘以100。
  • 统计选择器中类选择器的个数，然后乘以10。
  • 统计选择器中标签选择器的个数，然后乘以1。

以此类推，最后把所有权重值数相加，即可得到当前选择器的总权重值，最后根据权重值来决定哪个样式的优先级大。

【示例2】新建一个网页，保存为test.html，在<body>标签内输入如下代码：

    <div id="box" class="red">CSS选择器的优先级</div>

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，添加如下样式。

    body div#box { border:solid 2px red;}#box {border:dashed 2px blue;}div.red {border:double 3px red;}

完整代码如下：

<html><head><style type="text/css">body div#box { border:solid 2px red;}#box {border:dashed 2px blue;}div.red {border:double 3px red;}</style></head><body><div id="box" class="red">CSS选择器的优先级</div></body>
</html>

对于上面的样式表，可以按如下方式计算它们的权重值。

    body div#box = 1 + 1 + 100 = 102;#box = 100di.red = 1 + 10 = 11

因此，最后的优先级为body div#box大于#box，#box大于di.red。可以看到显示效果为2px宽的红色实线，在浏览器中预览，显示效果如下图所示。
在这里插入图片描述
提示：与样式表中的样式相比，行内样式优先级最高；相同权重值时，样式最近的优先级最高；使用!important命令定义的样式优先级绝对高；!important命令必须位于属性值和分号之间，如#header{color:Red!important;}，否则无效。

1.9、CSS选择器

CSS3选择器是在CSS 2.1选择器的基础上新增了部分属性选择器和伪类选择器，以减少对HTML类和ID的依赖，使编写网页代码更加简单轻松。

根据所获取页面中元素的不同，可以把CSS3选择器分为5大类：元素选择器、关系选择器、伪类选择器、伪对象选择器和属性选择器。

其中，伪选择器包括伪类选择器和伪对象选择器。根据执行任务不同，伪类选择器又分为6种：动态伪类选择器、目标伪类选择器、语言伪类选择器、状态伪类选择器、结构伪类选择器、否定伪类选择器。

注意：CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)，用以区别伪类选择符，但以前的写法仍然有效。

2、元素选择器

元素选择器包括：标签选择器、类选择器、ID选择器和通配选择器。

2.1、标签选择器

标签选择器也称为类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。

  • 优点：使用简单，直接引用，不需要为标签添加属性。
  • 缺点：匹配的范围过大，精度不够。

因此，一般常用标签选择器重置各个标签的默认样式。

【示例】统一定义网页中段落文本的样式为：段落内文本字体大小为12px，字体颜色为红色。为实现该效果，可以考虑选用标签选择器定义如下样式。

    p {font-size:12px;                          /* 字体大小为12px */color:red;                               /* 字体颜色为红色 */}

2.2、类选择器

类选择器以点号(.)为前缀，后面是一个类名。应用方法：在标签中定义class属性，然后设置属性值为类选择器的名称。

  • 优点：能够为不同标签定义相同样式；使用灵活，可以为同一个标签定义多个类样式。
  • 缺点：需要为标签定义class属性，影响文档结构，操作相对麻烦。

【示例】演示如何在对象中应用多个样式类。

第1步，新建文档，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。

第2步，在<style>标签内输入下面样式代码，定义3个类样式：red、underline和italic。

    /* 颜色类  */.red { color: red; }                            /* 红色 *//* 下画线类 */.underline { text-decoration: underline; }      /*下画线 *//* 斜体类 */.italic { font-style: italic; }

第3步，在段落文本中分别引用这些类，其中第2段文本标签引用3个类。

    <p class="underline">问君能有几多愁？恰似一江春水向东流。</p><p class="red italic underline">剪不断，理还乱，是离愁。别是一般滋味在心头。</p><p class="italic">独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>

完整代码如下所示：

<html><head><style type="text/css">/* 颜色类  */.red { color: red; }                            /* 红色 *//* 下画线类 */.underline { text-decoration: underline; }      /*下画线 *//* 斜体类 */.italic { font-style: italic; }</style></head><body><p class="underline">问君能有几多愁？恰似一江春水向东流。</p><p class="red italic underline">剪不断，理还乱，是离愁。别是一般滋味在心头。</p><p class="italic">独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p></body>
</html>

在这里插入图片描述

2.3、ID选择器

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

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

相关文章

pdf 转 word

pdf 转 word

pdf 转 word 一、思路 直接调用LibreOffice 命令进行文档转换的命令行工具 使用的前系统中必须已经安装了 libreofficelibreoffice已翻译的用户界面语言包: 中文 (简体)libreoffice离线帮助文档: 中文 (简体)上传字体 重点&#xff1a;重点&#xff1a;重点&#xff1a; 亲…
阅读更多...
flutter：webview_flutter和flutter_inappwebview的简单使用

flutter：webview_flutter和flutter_inappwebview的简单使用

前言 最近在研究如何在应用程序中嵌入Web视图&#xff0c;发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求&#xff0c;就使用了官方库&#xff0c;实现一些简单功能是完全ok的 webview_flutter 不建议使用&#xff0c;因为效果不怎么样&#xf…
阅读更多...
网站老域名跳转到新域名有哪些方法？内网穿透内网主机让外网访问

网站老域名跳转到新域名有哪些方法？内网穿透内网主机让外网访问

在网站服务器变更及本地主机搭建时&#xff0c;我们经常会遇到老域名地址跳转到新URL的配置&#xff0c;一些朋友还会面对无公网IP让外网访问的问题。今天我们来了解下网站老域名跳转到新域名有哪些方法&#xff0c;以及如何通过内网穿透实现内网主机让外网访问。 网站老域名跳…
阅读更多...
js ajax 国内快速 映像

js ajax 国内快速 映像

ajax 快速 映像 https://www.bootcdn.cn/ axios入门和axios基本请求方式 https://blog.csdn.net/m0_68997646/article/details/127438174 使用 jsDelivr CDN: <script src"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>因为我们国…
阅读更多...
关于vant2 组件van-dropdown-item，在IOS手机上，特定条件下无法点击问题的探讨

关于vant2 组件van-dropdown-item，在IOS手机上，特定条件下无法点击问题的探讨

情景重现 先贴有问题的代码 <template><div :class"showBar ? homeContain : homeContain-nobar"><div class"contant" id"content"><van-dialog v-model"loading" :before-close"onBeforeClose" :…
阅读更多...
git merge规则

git merge规则

参考文档&#xff1a;https://juejin.cn/post/7129333439299321887 丹尼尔&#xff1a;Hi&#xff0c;蛋兄&#xff0c;周杰伦都出新专辑了&#xff0c;你咋还不更新啊&#xff0c;真的打算半年一更啊&#xff1f; 蛋先生&#xff1a;好像确实是这样&#xff0c;要不&#xff0…
阅读更多...
不要着急购买iPhone 15，先看看这5点再做决定吧！

不要着急购买iPhone 15，先看看这5点再做决定吧！

人们对下个月可能推出的iPhone 15感到兴奋，这是有充分理由的——有传言称，新机型正在做出一些重大改变，尤其是在iPhone 15 Pro机型方面。从四款新iPhone都采用USB-C，到iPhone 15 Pro Max采用潜望镜式长焦镜头以实现更好的变焦，听起来有很多功能值得兴奋。 当然，除非你没…
阅读更多...
OpenCV图片校正

OpenCV图片校正

OpenCV图片校正 背景几种校正方法1.傅里叶变换 霍夫变换 直线 角度 旋转3.四点透视 角度 旋转4.检测矩形轮廓 角度 旋转参考 背景 遇到偏的图片想要校正成水平或者垂直的。 几种校正方法 对于倾斜的图片通过矫正可以得到水平的图片。一般有如下几种基于opencv的组合方…
阅读更多...
探索Chevereto图床：使用Docker Compose快速搭建个人图床

探索Chevereto图床：使用Docker Compose快速搭建个人图床

家人们!图片在今天的社交媒体、博客和论坛中扮演着至关重要的角色。然而&#xff0c;随着图片数量的增加&#xff0c;寻找一个可靠的图片托管解决方案变得越来越重要。Chevereto图床是一个备受赞誉的解决方案&#xff0c;而使用Docker Compose搭建它更是一种高效、可维护的方法…
阅读更多...
UE4中关于利用粒子系统做轨迹描绘导致系统流畅性下降的问题

UE4中关于利用粒子系统做轨迹描绘导致系统流畅性下降的问题

UE4中关于利用粒子系统做轨迹描绘导致系统流畅性下降的问题 文章目录 UE4中关于利用粒子系统做轨迹描绘导致系统流畅性下降的问题前言假设及验证1. 过多的粒子发射器影响仿真系统2. 粒子数目太多&#xff0c;降低粒子发射频率&#xff0c;同时增大粒子显示范围3. 把信息输出到屏…
阅读更多...
matlab 点云最小二乘拟合空间直线（方法一）

matlab 点云最小二乘拟合空间直线（方法一）

目录 一、算法原理1、空间直线2、最小二乘法拟合二、代码实现三、结果展示四、可视化参考本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫。 一、算法原理 1、空间直线 x
阅读更多...
基于 Vercel TiDB Serverless 的 chatbot

基于 Vercel TiDB Serverless 的 chatbot

作者&#xff1a; shiyuhang0 原文来源&#xff1a; https://tidb.net/blog/7b5fcdc9 # 前言 TiDB Serverless 去年就有和 Vercel 的集成了&#xff0c;同时还有一个 bookstore template 方便大家体验。但个人感觉 bookstore 不够炫酷&#xff0c;借 2023 TiDB hackthon 的…
阅读更多...
07_缓存预热缓存雪崩缓存击穿缓存穿透

07_缓存预热缓存雪崩缓存击穿缓存穿透

缓存预热&缓存雪崩&缓存击穿&缓存穿透 一、缓存预热 提前将数据从数据库同步到redis。 在程序启动的时候&#xff0c;直接将数据刷新到redis懒加载&#xff0c;用户访问的时候&#xff0c;第一次查询数据库&#xff0c;然后将数据写入redis 二、缓存雪崩 发生情…
阅读更多...
【排排站：探索数据结构中的队列奇象】

【排排站：探索数据结构中的队列奇象】

本章重点 队列的概念及结构 队列的实现方式 链表方式实现栈接口 队列面试题 一、队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出 FIFO(First In First Out) 入队列&#x…
阅读更多...
“RFID与光伏板的完美融合：探索能源科技的新时代！“

“RFID与光伏板的完美融合：探索能源科技的新时代！“

随着科技的不断发展&#xff0c;人类创造出了许多令人惊叹的发明。其中&#xff0c;RFID&#xff08;Radio Frequency Identification&#xff09;技术的应用在各个领域日益广泛。最近的研究表明&#xff0c;将RFID技术应用于光伏板领域&#xff0c;不仅可以提高光伏板的效率&a…
阅读更多...
JVM中分代回收机制

JVM中分代回收机制

为什么要分为新生代和老年代&#xff1f; 分为新生代&#xff08;Young Generation&#xff09;和老年代&#xff08;Old Generation&#xff09;是为了更有效地管理和优化内存的使用。 新生代主要存放生命周期较短的对象&#xff0c;例如方法的局部变量、临时变量等。由于这…
阅读更多...
【Golang系统开发】搜索引擎(2) 压缩词典

【Golang系统开发】搜索引擎(2) 压缩词典

写在前面 这篇文章我们就给出一系列的数据结构&#xff0c;使得词典能达到越来越高的压缩比。当然&#xff0c;和倒排索引记录表的大小相比&#xff0c;词典只占据了非常小的空间。那么为什么要对词典进行压缩呢&#xff1f; 这是因为决定信息检索系统的查询响应时间的一个重…
阅读更多...
李沐pytorch学习-卷积网络及其实现

李沐pytorch学习-卷积网络及其实现

一、卷积概述 1.1 基本定义 卷积计算过程如图1所示&#xff0c;即输入矩阵和核函数&#xff08;filter&#xff09;对应的位置相乘&#xff0c;然后相加得到输出对应位置的数。 图1. 卷积计算过程 该过程可以形象地从图2中展现。 图2. 二维卷积示意图 1.2 实现互相关运算的代…
阅读更多...
Python tkinter Notebook标签添加关闭按钮元素，及左侧添加存储状态提示图标案例，类似Notepad++页面

Python tkinter Notebook标签添加关闭按钮元素，及左侧添加存储状态提示图标案例，类似Notepad++页面

效果图展示 粉色框是当前页面&#xff0c;橙色框是鼠标经过&#xff0c;红色框是按下按钮&#xff0c;灰色按钮是其他页面的效果&#xff1b; 存储标识可以用来识别页面是否存储&#xff1a;例如当前页面已经保存用蓝色&#xff0c;未保存用红色&#xff0c;其他页面已经保存用…
阅读更多...
2023最新版本~KEIL5使用C++开发STM32

2023最新版本~KEIL5使用C++开发STM32

先看效果 开始教学 因为是第一次写这个配置教程 我会尽量详细些 打开一个Keil工程 移除本地core 添加在线core 第一次编译代码 不会有报错 修改main.c文件类型为C 点击魔术棒 把ARM编译器修改为V6 第二次编译会报错语法不兼容 我把汇编部分的这些代码做了…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023