什么是 CSS？
1.什么是 CSS？
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
2.CSS语法？
CSS 规则集（rule-set）由选择器和声明块组成：
选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。多条 CSS 声明用分号分隔，声明块用花括号括起来。
在此例中，所有<p>元素都将居中对齐，并带有红色文本颜色。
p {
color: red;
text-align: center;
}例子解释：
- p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。
- color 是属性，red 是属性值
- text-align 是属性，center 是属性值
3.CSS 注释
注释用于解释代码，以后在您编辑源代码时可能会有所帮助。浏览器会忽略注释。
位于<style>元素内的 CSS 注释，以 /* 开始，以 */ 结束。
/* 这是一条单行注释 */
p {
color: red;
}您可以在代码中的任何位置添加注释。
p {
color: red; /* 把文本设置为红色 */
}注释能横跨多行。
/* 这是
一条多行的
注释 */
p {
color: red;
}4.CSS使用
有三种插入样式表的方法：
- 外部CSS
通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！每张HTML页面必须在head部分的<link>元素内包含对外部样式表文件的引用。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>外部样式表可以在任何文本编辑器中编写，并且必须以.css扩展名保存。
外部 .css 文件不应包含任何HTML标签。
"mystyle.css" 是这样的。
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}注意：请勿在属性值和单位之间添加空格（例如margin-left: 20 px;）。正确的写法是margin-left: 20px;。
- 内部CSS
如果一张HTML页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在head部分的<style>元素中进行定义。
内部样式在HTML页面的<head>部分内的<style>元素中进行定义。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- 行内CSS
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
行内样式在相关元素的 "style" 属性中定义。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>提示：行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。
5.层叠顺序
当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
1.行内样式（在 HTML 元素中）
2.外部和内部样式表（在 head 部分）
3.浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。
什么是 CSS？的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- 一篇讲懂Java运行类型、编译类型和多态（面向对象语言精髓之一）
对象:运行类型.编译类型和多态 1.搞清楚面向对象的运行类型和编译类型就掌握了对象的精髓,我们用举个例子 class Father { Father() { System.out.println(&q ...
- FPGA加速技术在游戏和娱乐系统中的应用：实现高效的游戏和娱乐系统
目录 1. 引言 2. 技术原理及概念 3. 实现步骤与流程 4. 应用示例与代码实现讲解 <35. FPGA加速技术在游戏和娱乐系统中的应用:实现高效的游戏和娱乐系统>这篇文章是一篇针对 ...
- 曲线艺术编程 coding curves 第十二章 超级椭圆与超级方程（Superellipses and Superformulas）
第十三章 超级椭圆与超级方程(Superellipses and Superformulas) 原作:Keith Peters https://www.bit-101.com/blog/2022/11 ...
- SpringBoot 2 种方式快速实现分库分表，轻松拿捏！
大家好,我是小富- (一)好好的系统,为什么要分库分表? (二)分库分表的 21 条法则,hold 住! 本文是<分库分表ShardingSphere5.x原理与实战>系列的第三篇文章,本 ...
- 如何使用 Terraform 和 Git 分支有效管理多环境？
作者|Sumeet Ninawe 翻译|Seal软件 链接|https://spacelift.io/blog/terraform-environments 通常我们使用 Terraform 将我们的 ...
- 2023-07-02：给定一个1~N的排列，每次将相邻两数相加，可以得到新的序列，长度是N-1 再对新的序列，每次将相邻两数相加，可以得到新的序列，长度是N-2 这样下去可以最终只剩一个数字 比如 :
2023-07-02:给定一个1~N的排列,每次将相邻两数相加,可以得到新的序列,长度是N-1 再对新的序列,每次将相邻两数相加,可以得到新的序列,长度是N-2 这样下去可以最终只剩一个数字 比如 : ...
- WAMP apache 无法运行 报错could not execult menu item
wamp:could not execult menu item (internal error)[exception]counld not perform service action:服务器没有及 ...
- 现代C++（Modern C++）基本用法实践：三、移动语义
概述 移动 移动(move)语义C++引入了一种新的内存优化,以避免不必要的拷贝.在构造或者赋值的时候,如果实参是右值(或者左值由std::move转换成右值),便会匹配移动语义的函数调用如下述举例的 ...
- golang channel 未关闭导致的内存泄漏
现象 某一个周末我们的服务 oom了,一个比较重要的job 没有跑完,需要重跑,以为是偶然,重跑成功,因为是周末没有去定位原因 又一个工作日,它又oom了,重跑成功,持续观察,job 在oom之前竟然 ...
- mysql：EXPLAIN
推荐阅读原文:EXPLAIN用法和结果分析 语法:EXPLAIN SELECT * FROM t1 使用EXPLAIN关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句 ...