什么是 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的动 ...
随机推荐
- BeEF记录
前情提要 最近项目上常规手段遇阻,计划进行水坑钓鱼,一番搜索找到近期SolarMarker组织的手法,但是没有找到相关样本,于是就自己实现了一个类似的前端功能(水坑手法项目会持续记录学习,但目前不会放 ...
- 计算机网络那些事之 MTU 篇
哈喽大家好,我是咸鱼 今天我们来聊聊计算机网络中的 MTU (Maximum Transmission Unit) 什么是 MTU ? MTU(Maximum Transmission Unit)是指 ...
- P3574 [POI2014] FAR-FarmCraft 吐槽 + 题解
洛谷上面的题解写的真的不太好,有很多错误,我来谈谈自己的理解. 设 \(f[i]\) 表示以 \(i\) 为根节点的子树中(包括节点 \(i\))的所有人安装好游戏所需要的时间(与下面的 \(g[i] ...
- linux基础命令及常用命令总结
1.ls命令 ls命令是最基础的命令之一,作用是列出当前目录下所有的文件和目录.ls命令有很多选项可以使用,比较常用的是-l选项,可以以详细信息的形式列出所有文件和目录的信息. 示例:列出当前目录下的 ...
- YOLOv6在LabVIEW中的推理部署（含源码）
前言 YOLOv6 是美团视觉智能部研发的一款目标检测框架,致力于工业应用.如何使用python进行该模型的部署,官网已经介绍的很清楚了,但是对于如何在LabVIEW中实现该模型的部署,笔者目前还没有 ...
- pip安装pyinstaller失败的解决方法
错误情况: 从下面错误来看,是安装build的依赖失败 解决方法: 下载setup.py文件来安装 1.先下载 pyinstaller的安装文件,下载地址:http://www.pyinstaller ...
- Cilium系列-4-Cilium本地路由
系列文章 Cilium 系列文章 前言 在前文中我们提到, cilium install 默认安装后, Cilium 功能启用和禁用情况如下: datapath mode: tunnel: 因为兼容性 ...
- Three.js使用InstancedMesh实现性能优化
1. 引言 有这么一种场景:需要渲染一座桥,桥有很多桥柱,桥柱除了位置与倾斜角度不完全相同外,其他均相同,由于桥柱数量很大,使用three.js绘制较为卡顿,如何优化?注意,要求后续能选中某个桥柱 2 ...
- Oracle11gR2单实例的安装与部署
1 安装目标与规划 交易系统1台HP DL580 G9服务器将安装Oracle11gR2 . 1.1 安装介质版本 主机名 his1 IP地址 192.168.40.102(非生产环境ip) O ...
- 混合开发模式是否可以在App备案制度下突围
网站 ICP 备案已施行了很久,我们也非常清楚必须在进行 ICP 备案后,网站才能在大陆范围合法运营,并且用户可以通过域名正常访问网站. 但是月初出了新规,明年起,国内的 App 也要像网站一样进行备 ...