css 概述
1、什么是 css
css 即 层叠样式表 【 英文全称：Cascading Style Sheets 】
css 是一种用来表现 HTML 或 XML 等文件样式的计算机语言
CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
2、网页组成
CSS 是一门语言，用于控制网页表现，W3C 标准规定了网页是由以下组成
结构：HTML
表现：CSS
行为：JavaScript
css 应用
css 导入 HTML 的 三 种方式
1、内联样式
在标签内部使用 style 属性，属性值是 css 属性键值对
<div style="color: red">Hello CSS~</div>
只能作用在这一个标签上, 复用性差
2、内部样式
定义标签，在标签内部定义 css 样式
<style type="text/css">
div{
color: red
}
</style>
这种方式可以做到在该页面中复用
3、外部样式
定义 link 标签，引入外部的 css 文件
<link rel="stylesheet" href="demo.css">
这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件
css 语法
1、CSS 的顶层样式表由 两种 规则组成的规则列表构成
1、 at-rule at @ 规则
2、qualified rule 普通规则
at-rule 由一个 @ 关键字和后续的一个区块组成，如果没有区块，则以分号结束，at-rule 不常用，但却是掌握 CSS 的一些高级特性所必须的内容
qualified rule 则是指普通的 CSS 规则，也就是我们所熟识的，由 选择器 和 属性指定 构成的规则
2、css 注释
你只需要一个正斜杠 (/) 和一个星号 (*) 就可以注释掉一行或几行的CSS
/* This is an inline comment in CSS */
at-rule at @ 规则
1、@charset
@charset "utf-8";
@charset 用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果
2、@import
@import "mystyle.css";
@import url("mystyle.css");
@import [ <url> | <string> ]
[ supports( [ <supports-condition> | <declaration> ] ) ]?
<media-query-list>? ;
@import 用于引入一个CSS文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。
通过代码，我们可以看出，import 还支持 supports 和 media query 形式。
3、@media
@media print {
body { font-size: 10pt }
}
media 就是大名鼎鼎的 media query 使用的规则了，它能够对设备的类型进行一些判断。在 media 的区块内，是普通规则列表
4、@page
@page {
size: 8.5in 11in;
margin: 10%;
@top-left {
content: "Hamlet";
}
@top-right {
content: "Page " counter(page);
}
}
page 用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒
5、@counter-style
@counter-style triangle {
system: cyclic;
symbols: ‣;
suffix: " ";
}
counter-style 产生一种数据，用于定义列表项的表现
6、@key-frames
@keyframes diagonal-slide {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
keyframes 产生一种数据，用于定义动画关键帧
7、@fontface
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }
fontface 用于定义一种字体，iconfont 技术就是利用这个特性来实现的。
8、@support
support 检查环境的特性，它与 media 比较类似
9、@namespace
用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间
10、@viewport
用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 html 的 meta 代替
普通规则
普通规则 主要是由 选择器 和 声明区块 构成
声明区块又由 属性 和 值 构成。
普通规则
选择器
声明列表
属性
值
值的类型
函数
1、选择器
1、我们从语法结构可以看出，任何选择器，都是由几个符号结构连接的：空格、大于号、加号、波浪线、双竖线，这里需要注意一下，空格，即为后代选择器的优先级较低。
2、然后对每一个选择器来说，如果它不是伪元素的话，由几个可选的部分组成，标签类型选择器，id、class、属性和伪类，它们中只要出现一个，就构成了选择器。
3、如果它是伪元素，则在这个结构之后追加伪元素。只有伪类可以出现在伪元素之后
2、声明区块 => 属性 和 值
a、属性部分
声明部分是一个由 “属性:值” 组成的序列
属性是由中划线、下划线、字母等组成的标识符，CSS 还支持使用反斜杠转义
我们需要注意的是 属性不允许使用连续的两个中划线开头，这样的属性会被认为是 CSS 变量
在 CSS Variables 标准中，以双中划线开头的属性被当作变量，与之配合的则是 var 函数：
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
b、值的部分
值的部分，主要在标准 CSS Values and Unit，根据每个CSS属性可以取到不同的值，这里的值可能是 字符串、标识符
CSS 属性值可能是以下类型
1、CSS 范围的关键字：initial，unset，inherit，任何属性都可以的关键字。
2、字符串：比如 content 属性。
3、URL：使用 url() 函数的 URL 值。
4、整数/实数：比如 flex 属性。
5、维度：单位的整数/实数，比如 width 属性。
6、百分比：大部分维度都支持。
7、颜色：比如 background-color 属性。
8、图片：比如 background-image 属性。
9、2D 位置：比如 background-position 属性。
10、函数：来自函数的值，比如 transform 属性。
重点介绍一下函数
一些属性会要求产生函数类型的值，比如 easing-function 会要求 cubic-bezier() 函数的值
CSS 支持一批特定的计算型函数：
calc()
max()
min()
clamp()
toggle()
attr()
1、calc()函数 是基本的表达式计算，它支持加减乘除四则运算
在针对维度进行计算时，calc() 函数允许不同单位混合运算，这非常的有用
section {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
2、max() 表示取两数中较大的一个
3、min() 表示取两数之中较小的一个
4、clamp() 则是给一个值限定一个范围，超出范围外则使用范围的最大或者最小值。
5、toggle() 函数在规则选中多于一个元素时生效，它会在几个值之间来回切换，
比如我们要让一个列表项的样式圆点和方点间隔出现，可以使用下面代码：
ul { list-style-type: toggle(circle, square); }
6、attr() 函数允许 CSS 接受属性值的控制。
css 的知识体系
1、css 语法
2、css 运用
3、css 选择器
4、css 级联
5、css 继承
6、css 空白
7、css 颜色
8、css 单位值
9、css 文本样式
10、css 列表样式
11、css 其他样式
12、css 盒子
13、css 表格样式
14、css 布局
15、css 动画
16、css 预编译器 【 less scss stuys 】
浙公网安备 33010602011771号