CSS3基础
CSS3在CSS2的基础上增加了很多功能,如圆角、多背景、透明度、阴影等,以帮助开发人员解决一些实际问题。
1、初次使用CSS
与HTML5一样,CSS3也是一种标识语言,可以使用任意文本编辑器编写代码。下面简单介绍CSS3的基本用法。
1.1、CSS样式
CSS语法单元是样式,每个样式包含两部分内容,即选择器和声明(或称规则),如下图所示。

- 选择器(selector):指定样式作用于哪些对象,这些对象可以是某个标签、指定Class或ID值的元素等。浏览器在解析样式时,根据选择器来渲染对象的显示效果。
- 声明(declaration):指定浏览器如何渲染选择器匹配的对象。声明包括两部分,即属性和属性值,并用分号来标识一个声明的结束,在一个样式中最后一个声明可以省略分号。所有声明被放置在一对大括号内,然后位于选择器的后面。
- 属性(property):CSS预设的样式选项。属性名由一个单词或多个单词组成,多个单词之间通过连字符相连,这样能够很直观地了解属性所要设置样式的类型。
- 属性值(value):定义显示效果的值,包括值和单位,或者仅定义一个关键字。
【示例】演示如何在网页中设计CSS样式。
- 第1步,新建网页文件,保存为test.html。
- 第2步,在
<head>标签内添加<style type="text/css">标签,定义一个内部样式表。 - 第3步,在
<style>标签内输入下面的样式,定义网页字体大小为24px,字体颜色为白色。
body{font-size: 24px; color: #fff;}
- 第4步,输入下面样式代码,定义段落文本的背景色为蓝色。
p { background-color: #00F; }
- 第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代码,但是继承的样式的优先级是最低的。
相关文章:
CSS3基础
CSS3在CSS2的基础上增加了很多功能,如圆角、多背景、透明度、阴影等,以帮助开发人员解决一些实际问题。 1、初次使用CSS 与HTML5一样,CSS3也是一种标识语言,可以使用任意文本编辑器编写代码。下面简单介绍CSS3的基本用法。 1.1…...
【栈】 735. 行星碰撞
735. 行星碰撞 解题思路 如果数组元素大于0 说明向右移动 那么不管 左边元素是不是大于0 都不会碰撞 如果数组元素小于0 说明想左边移动 那么判断左边元素 如果左边元素大于0 碰撞 那么遍历数组 当前元素大于0 直接入栈 如果当前元素小于0 判断栈顶元素是不是大于0 如果大…...
水库大坝安全监测MCU,提升大坝管理效率的利器!
水库大坝作为防洪度汛的重要设施,承担着防洪抗旱,节流发电的重要作用。大坝的安全直接关系到水库的安全和人民群众的生命财产安全。但因为水库大坝的隐患不易被察觉,发现时往往为时已晚。因此,必须加强对大坝的安全管理。其安全监…...
【vue2类型助手】vue2-cli 实现为 vue2 项目中的组件添加全局类型提示
实现 vue2 全局组件提示 vue2 项目全局注册组件直接使用没有提示 由于vue2中使用volar存在很大的性能问题,所以只能继续使用vetur,但是这样全局组件会没有提示,这对于开发来说,体验十分不友好,所以开发此cli并借助ve…...
mysql 索引 区分字符大小写
mysql 建立索引,特别是unique索引,是跟字符集、字符排序规则有关的。 对于utf8mb4_0900_ai_ci来说,0900代表Unicode 9.0的规范,ai表示accent insensitivity,也就是“不区分音调”,而ci表示case insensitiv…...
Stable Diffusion Webui源码剖析
1、关键python依赖 (1)xformers:优化加速方案。它可以对模型进行适当的优化来加速图片生成并降低显存占用。缺点是输出图像不稳定,有可能比不开Xformers略差。 (2)GFPGAN:它是腾讯开源的人脸修…...
为什么kafka 需要 subscribe 的 group.id?我们是否需要使用 commitSync 手动提交偏移量?
目录 一、为什么需要带有 subscribe 的 group.id二、我们需要使用commitSync手动提交偏移量吗?三、如果我想手动提交偏移量,该怎么做? 一、为什么需要带有 subscribe 的 group.id 消费概念: Kafka 使用消费者组的概念来实现主题的…...
什么是Web应用程序防火墙,WAF与其他网络安全工具差异在哪?
一、什么是Web 应用程序防火墙 (WAF) ? WAF软件产品被广泛应用于保护Web应用程序和网站免受威胁或攻击,它通过监控用户、应用程序和其他互联网来源之间的流量,有效防御跨站点伪造、跨站点脚本(XSS攻击)、SQL注入、DDo…...
打家劫舍 II——力扣213
动规 int robrange(vector<int>& nums, int start, int end){int first=nums[start]...
动手学深度学习—卷积神经网络LeNet(代码详解)
1. LeNet LeNet由两个部分组成: 卷积编码器:由两个卷积层组成;全连接层密集块:由三个全连接层组成。 每个卷积块中的基本单元是一个卷积层、一个sigmoid激活函数和平均汇聚层;每个卷积层使用55卷积核和一个sigmoid激…...
腾讯面经总结
最近在准备面试,看了很多大厂的面经,抽空将腾讯面试的题目整理了一下,希望对大家有所帮助~ 一面 1、mysql索引结构? 2、redis持久化策略? 3、zookeeper节点类型说一下; 4、zookeeper选举机制ÿ…...
matlab机器人工具箱基础使用
资料:https://blog.csdn.net/huangjunsheng123/article/details/110630665 用vscode直接看工具箱api代码比较方便,代码说明很多 一、模型设置 1、基础效果 %采用机器人工具箱进行正逆运动学验证 a[0,-0.3,-0.3,0,0,0];%DH参数 d[0.05,0,0,0.06,0.05,…...
利用WonderLeak进行内存泄露检测【一】
1、下载地址: WonderLeak - Visual Studio Marketplace https://www.relyze.com/ 2、WonderLeak支持vs2017 2019扩展,或者单独启动 3、https://www.relyze.com/docs/wonderleak/help/w/overview/msvc_extension1.png 4、对于二进制程序来说支持以下…...
二刷LeetCode--155. 最小栈(C++版本),思维题
思路:本题需要使用两个栈,一个就是正常栈,执行出入操作,另一个栈只负责将对应的最小值进行保存即可.每次入栈的时候,最小值栈的栈顶也需要入栈元素,不过这个元素是最小值,那么就需要进行比较,因此在getmin()的时候只需要将最小值栈的栈顶元素弹出即可.初始化的时候只需要将最小…...
进程的状态与转换
进程在其生命周期内,由于系统中各进程之间的相互制约及系统的运行环境的变化,使得进程的状态也在不断地发生变化。通常进程有以下5种状态,前三种是基础讷航的基本状态 1)运行态。进程正在处理机上运行。在单处理机机中࿰…...
用MariaDB创建数据库,SQL练习,MarialDB安装和使用
前言:MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MySQL的代替品。在存储引擎方面,使用XtraDB来代替MySQ…...
【Docker】 使用Docker-Compose 搭建基于 WordPress 的博客网站
引 本文将使用流行的博客搭建工具 WordPress 搭建一个私人博客站点。部署过程中使用到了 Docker 、MySQL 。站点搭建完成后经行了发布文章的体验。 WordPress WordPress 是一个广泛使用的开源内容管理系统(CMS),用于构建和管理网站、博客和…...
Hlang社区-前端社区宣传首页实现
文章目录 前言页面结构固定钉头部轮播JS特效完整代码总结前言 这里的话,博主其实也是今年参与考研的大军之一,所以的话,是抽空去完成这个项目的,当然这个项目的肯定是可以在较短的时间内完成的。 那么废话不多说,昨天也是干到1点多,把这个首页写出来了。先看看看效果吧:…...
【LeetCode-Medium】833. 字符串中的查找与替换
题目链接 833. 字符串中的查找与替换 标签 字符串 步骤 Step1. 初始化 ans[]: for (int i 0; i < s.length(); i) { // 初始化ansans[i] s[i]; }Step2. 根据 index, source, target 查找;如果找到,那么将 ans[i] 更改为 target&am…...
数据结构中公式前中后缀表达式-二叉树应用
目录 数据结构中公式前中后缀表达式-二叉树应用 数据结构中公式前中后缀表达式-二叉树应用 什么是前缀表达式、中缀表达式、后缀表达式 前缀表达式、中缀表达式、后缀表达式,是通过树来存储和计算表达式的三种不同方式 以如下公式为例 通过树来存储该公式&#x…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天,数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具,在大规模数据获取中发挥着关键作用。然而,传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时,常出现数据质…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
