查看更多学习笔记:GitHub:LoveEmiliaForever
MDN中文官网
CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等
一份文档是由标记语言组织起来的文本文件(如用HTML组织文档),展示一份文档给用户实际上是将文档变成用户可用的文件
CSS 可以用于给文档添加样式,如改变文本样式、创建布局、添加动画等特效
CSS 是一门基于规则的语言
,你可以定义用于你的网页中特定元素样式的一组规则
h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}
其中CSS规则的语法组成如下
{ }
与其内一系列声明,声明的语法为属性: 属性值;
属性
和属性值
与HTML元素内的属性
和属性值
行为相似一个CSS样式表可以有多个规则
CSS 由许多模块
构成,例如Backgrounds and Borders
模块
其内包含模块的属性、特性等等
所有的标准 Web 技术 (HTML, CSS, JavaScript 等) 都被定义在一个巨大的文档中,称作规范
它是由 (像是 W3C、WHATWG、ECMA) 这些规范化组织
所发布的,其中定义了各种技术是如何工作的
让所有的浏览器都同时支持一个 CSS 新特性
是不现实的,通常都会一个空档期
会出现一些浏览器已经支持新特性
而另一些仍未支持新特性
的状态
因此,查看特性的实现状态是非常有用的
共有三种方法连接HTML和CSS,其中最为常用的是使用标签
<head>
<link rel="stylesheet" href="css文件地址">
head>
使用选择器选中元素即可添加样式,使用多个选择器时用,
隔开它们,这被称为群组选择器
在下例中使用的是标签选择器
,它会选择所有的对应元素
p, li{
color: green;
}
现代浏览器有对HTML元素的默认样式
如果想要改变这个默认样式,只需要在css文件中应用相应规则即可
如果想要给某一类的元素运用样式,那么不必一个个的选择
class="类名1 类名2"
属性给HTML元素添加类名类选择器
选中该类.类名
在选择器中间以空格
隔开,即可使用后代选择器
它会选择前一选择器的后代中符合后一选择器要求的元素
以+
相隔选择器,即可使用相邻兄弟选择器
它会选择在前一选择器下面的兄弟节点中符合后一选择器要求的第一个元素
元素拥有不同的状态,如被访问过的、没被访问过的、被鼠标悬停的等等
css也可以为这些不同的状态应用样式
如a:link
代表未被访问的,
a:visited
代表被访问了的
下面的三种方法优先级是内联样式
> 内部样式表
> 外部样式表
将CSS写入到一个单独的.css
文件,网页即可连接该.css文件
用于设定样式
<head>
<link rel="stylesheet" href="css文件地址">
head>
这样的方法能够让.css
文件被多个网页使用
将样式表直接写入到HTML文档的内部称为内部样式表
这种方法要求把CSS写入到的
标签内
<head>
<style>
CSS样式表
style>
head>
在某些情况下,这种方法也许更好
但在大多数情况下,使用外部样式表
更有利于维护、复用等等
内联样式仅仅影响单个的HTML元素,它被包含在元素的style
属性之中
<p style="CSS声明">一个段落元素p>
尽量不要使用这种方法,这种方法的维护难度最高
它将HTML和CSS杂糅在一起,使得开发维护变得非常麻烦
CSS内有多种选择器,如标签选择器
、类选择器
、id选择器
、群组选择器
、后代选择器
等等
不过使用这些选择器指定元素是有优先级
的
当不同CSS规则冲突时,根据选择器优先级来判定合适规则
如果选择器相同,则后面定义的规则将被应用,这被称为层叠
css文件的包含关系如下所示
graph TB
subgraph CSS文件
subgraph CSS规则
direction TB
subgraph CSS声明块
subgraph CSS声明
属性 --- 属性值
end
end
CSS选择器 --- CSS声明块
end
end
虽然大部分的属性值
是关键字
或数值
,但也有一些是函数形式
如用于在CSS中进行简单计算的calc()
函数
body{
width: calc(90% - 30px);
}
@规则
是一些特殊的规则,提供了关于 CSS 应该执行什么或如何表现的指令
如@import
是导入另一个样式表进入,@media
是媒体查询
@import 'styles2.css';
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}
一些属性,如 font
、background
、padding
、border
和 margin 等属性称为简写属性
它们允许在一行中设置多个属性值,从而节省时间并使代码更整洁
❗️使用 CSS 简写属性的一个不太明显的方面是省略的值如何重置,一个没有在 CSS 简写属性中指定的值会恢复到它的初始值。
这意味着 CSS 简写属性中的省略可以覆盖之前设置的值
使用/* */
添加注释,可以单行也可以多行
空白是指实际的空格、制表符和换行符
浏览器会忽略了 CSS 中的空白,空白的价值在于它可以提高可读性
❗️CSS声明通过空白字符分离不同的值,属性名称不应该含有空白字符
一个 DOM 有一个树形结构,标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点
DOM和HTML的转换示例
<p>
Let's use:
<span>Cascadingspan>
<span>Stylespan>
<span>Sheetsspan>
p>
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN
└─ "Sheets"
当浏览器遇到了无法解析的CSS声明时,它会直接跳过该声明
同样,遇到了无法解析的选择器时她也会跳过该选择器
这样的设计使得在考虑兼容性
时十分有用
由于CSS的层叠
特性,可以有多个兼容性的声明却只实际应用一个声明
.box {
width: 500px;
width: calc(100% - 50px);
}