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.rhkb.cn/news/98281.html

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

相关文章

MAC钓鱼并Root权限上线CS并权限维持，以及所有的坑如何解决

MAC钓鱼并Root权限上线CS并权限维持，以及所有的坑如何解决

本文转载于&#xff1a;https://www.freebuf.com/articles/web/350592.html 作者&#xff1a;文鸯涂鸦智能安全实验室 制作MAC 一、下载工具 首先从github上下载CrossC2。链接&#xff1a;https://github.com/gloxec/CrossC2/releases/tag/v3.1.0。 根据你CS客户端的操作系统选…
阅读更多...
【uniapp】使用permission获取录音权限及实现录音功能

【uniapp】使用permission获取录音权限及实现录音功能

需求 app获取录音权限权限, 实现录音并且播放功能 实现 一. 使用permission获取录音权限 原博 : https://www.wanjunshijie.com/note/uniapp/3203.html 1.1 manifest.json 配置权限 android.permission.RECORD_AUDIO 1.2 permision使用和下载 ( 自行百度搜索即可 ) 1.3 获…
阅读更多...
【Linux】传输层协议：UDP和TCP

【Linux】传输层协议：UDP和TCP

争做西格玛男人 文章目录 一、UDP协议1.端口号2.理解UDP报头3.UDP的特点&#xff08;面向数据报&#xff0c;全双工&#xff09; 二、TCP协议1.理解TCP报头某些TCP的策略1.1 TCP报头字段&#xff08;TCP的黏包问题&#xff09;1.2 网络协议栈和linux系统的联系&#xff08;以p…
阅读更多...
2023.08.20 学习周报

2023.08.20 学习周报

文章目录 摘要文献阅读1.题目2.现有问题3.解决方案4.本文贡献5.方法5.1 利用长短期记忆网络学习时空演化特征5.2 构建用于气象辅助信息编码的堆叠自编码器5.3 使用多任务学习发现全市通用模式5.4 模型 6. 实验6.1 数据集6.2 实验设置6.3 实验结果 7.结论8.展望 大气污染物传输总…
阅读更多...
【Unittest】Unittest接口测试框架开发-以登录模块为例

【Unittest】Unittest接口测试框架开发-以登录模块为例

文章目录 框架结构框架目录结构封装被测试系统接口定义接口测试用例集成测试报告测试数据参数化&#xff08;一&#xff09;分析与数据构造&#xff08;二&#xff09;基于JSON实现参数化&#xff08;三&#xff09;基于数据库实现参数化 框架结构 框架结构包括&#xff1a;被…
阅读更多...
取证的学习

取证的学习

Volatility命令语法 1.判断镜像信息&#xff0c;获取操作系统类型 Volatility -f xxx.vmem imageinfo 在查到操作系统后如果不确定可以使用以下命令查看 volatility - f xxx.vmem --profile [操作系统] volshell 2.知道操作系统类型后&#xff0c;用–profile指定 volat…
阅读更多...
后端开发12.商品模块

后端开发12.商品模块

概述 简介 商品模块这个设计的非常复杂 效果图 数据库
阅读更多...
Go语言基础之基本数据类型

Go语言基础之基本数据类型

Go语言中有丰富的数据类型&#xff0c;除了基本的整型、浮点型、布尔型、字符串外&#xff0c;还有数组、切片、结构体、函数、map、通道&#xff08;channel&#xff09;等。Go 语言的基本类型和其他语言大同小异。 基本数据类型 整型 整型分为以下两个大类&#xff1a; 按…
阅读更多...
LeetCode 1162. As Far from Land as Possible【多源BFS】中等

LeetCode 1162. As Far from Land as Possible【多源BFS】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…
阅读更多...
Qt快速学习（一）--对象，信号和槽

Qt快速学习（一）--对象，信号和槽

目录 1.Qt概述 1.1 什么是Qt 2.2 手动创建 2.3 pro文件 2.4 一个最简单的Qt应用程序 3 第一个Qt小程序 3.1 按钮的创建 3.2 对象模型&#xff08;对象树&#xff09; 3.3 Qt窗口坐标体系 4 信号和槽机制 4.1 系统自带的信号和槽 4.2 自定义信号和槽 4.3信号槽的拓展 4…
阅读更多...
mac录屏工具，录屏没有声音的解决办法

mac录屏工具，录屏没有声音的解决办法

mac录屏工具&#xff0c;录屏没有声音的解决办法 在使用macbook录制屏幕时&#xff0c;发现自带的录屏工具QuickTime Player没有声音&#xff0c;于是尝试了多款录屏工具&#xff0c;对其做一些经验总结&#xff08;省流&#xff1a;APP Store直接可以免费下载使用Omi录屏专家…
阅读更多...
【深度学习 | 感知器 MLP（BP神经网络）】掌握感知的艺术: 感知器和MLP-BP如何革新神经网络

【深度学习 | 感知器 MLP（BP神经网络）】掌握感知的艺术: 感知器和MLP-BP如何革新神经网络

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…
阅读更多...
2023年网络安全比赛--综合渗透测试（超详细）

2023年网络安全比赛--综合渗透测试（超详细）

一、竞赛时间 180分钟 共计3小时 二、竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 1.扫描目标靶机将靶机开放的所有端口，当作flag提交（例：21,22,23）； 2.扫描目标靶机将靶机的http服务版本信息当作flag提交（例：apache 2.3.4）； 3.靶机网站存在目录遍历漏洞，请将…
阅读更多...
《合成孔径雷达成像算法与实现》Figure3.12

《合成孔径雷达成像算法与实现》Figure3.12

clc clear close all% 参数设置 TBP 724; % 时间带宽积 T 42e-6; % 脉冲持续时间 t_0 1e-6; % 脉冲回波时延 Nfft 2^11; % fft长度% 参数计算 B TBP/…
阅读更多...
Flink状态和状态管理

Flink状态和状态管理

1.什么是状态 官方定义&#xff1a;当前计算流程需要依赖到之前计算的结果&#xff0c;那么之前计算的结果就是状态。 这句话还是挺好理解的&#xff0c;状态不只存在于Flink&#xff0c;也存在生活的方方面面&#xff0c;比如看到一个认识的人&#xff0c;如何识别认识呢&am…
阅读更多...
Springboot 实践（10）spring cloud 与consul配置运用之服务的注册与发现

Springboot 实践（10）spring cloud 与consul配置运用之服务的注册与发现

前文讲解&#xff0c;完成了springboot、spring security、Oauth2.0的继承&#xff0c;实现了对系统资源的安全授权、允许获得授权的用户访问&#xff0c;也就是实现了单一系统的全部技术开发内容。 Springboot是微服务框架&#xff0c;单一系统只能完成指定系统的功能&#xf…
阅读更多...
NLP序列标注问题，样本不均衡怎么解决？

NLP序列标注问题，样本不均衡怎么解决？

【学而不思则罔&#xff0c;思而不学则殆】 1.问题 NLP序列标注问题&#xff0c;样本不均衡怎么解决&#xff1f; 2.解释 以命名实体识别&#xff08;NER&#xff09;为例&#xff0c;这个样本不均衡有两种解释&#xff1a; &#xff08;1&#xff09;实体间类别数量不均衡…
阅读更多...
MNN学习笔记（八）：使用MNN推理Mediapipe模型

MNN学习笔记（八）：使用MNN推理Mediapipe模型

1.项目说明 最近需要用到一些mediapipe中的模型功能&#xff0c;于是尝试对mediapipe中的一些模型进行转换&#xff0c;并使用MNN进行推理&#xff1b;主要模型包括&#xff1a;图像分类、人脸检测及人脸关键点mesh、手掌检测及手势关键点、人体检测及人体关键点、图像嵌入特征…
阅读更多...
JVM编译优化

JVM编译优化

即时编译器 HotSpot虚拟机中内置了两个即时编译器，分别称为Client Compiler和Server Compiler，或者简称为C1编译器和C2编译器。Java8默认开启Server模式。用户可以使用“-client”或“-server”参数去指定编译模式。 C1编译器启动速度快，关注局部简单可靠的优化，比如方法…
阅读更多...
Android glide框架及框架涉及到的设计模式

Android glide框架及框架涉及到的设计模式

目录 原文链接Android glide框架 简单使用介绍Glide 框架整体结构设计Glide 框架的优点基本使用&#xff1a;Glide占位符 Android glide框架涉及到的设计模式 原文链接 Android glide框架 简单使用介绍 Glide&#xff1a;快速高效的Android图片加载库&#xff0c;可以自动加载…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023