css语法规则
属性名中不能含有空格，通过空格分隔属性值
css出现错误或者无法解析时，会被自动会略
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
h1（选择器 selector） {
color（属性 property）: red（属性值 value）;
font-size: 5em;（声明 declaration）
}
<!-- hi{}整体称为css规则集 -->
引入方式
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
<!--外部链接-->
<link rel="stylesheet" href="styles.css" >
<!--嵌入-->
<style>
p{margin;}
</style>
<!--内联 需要尽量避免使用-->
<p style="margin">aaa</p>
选择器
全局选择器
*表示全局选择器
对文档所有内容生效
注意：==
first-child==* 只选择特定类型的第一个子元素，而 *==:*first-child==* 选择所有类型的第一个子元素。*
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
* {
margin: 0;
}
element选择器
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
p,li {
color: green;
}
class选择器
用. 表示class选择器
可与element一起使用
，连接两个不同选择器(称为 选择器组)
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
li.special,
span.special {
color: orange;
font-weight: bold;
}
id选择器
only have one
用#表示id选择器
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
#logo{
color: orange;
}
属性选择器
a[title]
a[href="example.com"]
p[class~="special"]
div[lang|="zh"]
子字符串
大小写敏感（i）
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
[disabled]{
color: orange;
}
伪类选择器
状态伪类
: 表示状态伪类选择器
针对anchor
由是否访问，鼠标悬浮状态等决定
伪元素：：开头
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
a:link {
color: pink;
}
a:visited {
color: green;
}
结构伪类
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
/*只对li中的 所有后代中的 em 生效 */
li em {
color: rebeccapurple;
}
<!-- 对h1和p 同时生效 -->
h1 + p {
font-size: 200%;
}
。。。
dom节点位置选择器
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
li:first-child{
color: orange;
}
选择器的层叠cascade优先级specificity
层叠：对于同一种选择器(同优先级)，后出现某个的style 会覆盖 之前的某个style
优先级：不同优先级的，优先级高的选择器对应的style会生效
特意度：
继承：一般和字体相关属性 可以继承，和模型(如宽度)不可以继承
显式继承：使原本不可继承的属性 变为 可继承(inherit)
初始值：元素不可继承 或 找不到继承属性时 使用(initial)
函数
代表以函数出现的数字
算的结果并不是可以事先计算并作为静态值输入
calc函数：进行简单计算
transform函数：有多个取值
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
.box {
width: calc(90% - 30px);
transform: rotate(0.8turn)
}
规则
@import将一个样式表导入另一个 CSS 样式表
@media，它被用来创建媒体查询。
--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
@import "styles2.css";
@media (min-width: 30em) {
body {
background-color: blue;
}
}
简写属性
-
•
-
•
background: background - CSS：层叠样式表 | MDN (mozilla.org)
-
•
-
•
-
•
颜色
red green blue：rgb( , , ); #000000
hue（色相）Saturation(饱和度) Lightness(亮度)： hsl(0,50%,50%)
alpha（不透明度）
字体
font-family 字体族：
为了适应不同设备 ，使之拥有不同字体，
前面字体在设备中拥有时，忽略后面代码；不拥有时，会检查后一字体是否拥有
建议英文字体 写道 中文字体 之前
font-size
px,em
%（相对于父元素 字体的大小）
font-weight
100,200...,900 表示字体粗细
font-height
行高：例 行高1.6是 两基准线 距离 为 字体大小的1.6倍
布局
-
•
常规流
-
行级
-
块级
-
表格布局
-
flexbox
-
grid布局
-
-
•
浮动
-
•
绝对值
盒模型(box)
-
•
width： 长度，百分数(相对于box的百分数)，auto(根据浏览器其他属性决定)
-
•
height：长度，百分数(... , 容器有指定高度时生效)，auto(内容值计算得出)
-
•
padding：padding-top padding-bottom padding-right padding-left
-
•
border：... ，botder-width border-style border-color
-
•
margin：margin-auto(水平居中) margin collapse(垂直方向margin 会合并 即取最大)
-
•
box-sizing：其中的长宽 需要包含padding以及border
-
•
overflow：
块级 行级
-
•
块级
-
不和其他盒子并排摆放
-
适用所有盒模型属性
-
-
•
行级
-
与其他盒子放在一行；或拆开为多行
-
盒模型中width height 不适用
-
-
•
同一个父级元素里面 不允许同时出现块级 和 行级（此时会用匿名块级将行级包裹）
flex box
使用： display：flex；将元素从上到下 或者 从左到右 排放
对齐align
弹性布局：grow, basis , shrink
换行
grid布局
划分网格
-
•
grid-template-colums
-
•
grid-template-rows
-
•
注：auto，1fr(frame 即份)
grid line
float
为了实现 文字环绕效果
绝对定位
-
•
position
-
static
-
relative：根据原本位置 进行 偏移
-
absolute：脱离 常规流(难道其他的 就是 不脱离 常规流吗)；相对于最近的 feistatic祖先进行定位？？？
-
fixed：相对于窗口 进行 定位
-
stick
-
