理解CSS和HTML|青训营笔记这是我参加「第五届青训营」笔记创作活动的第2天。 Day2 1.CSS是什么？ Casc

初识CSS。

选择器分类 3.CSS深入

Cascading(层叠)Style(样式)Sheets(表)用来定义页面元素样式。
主要用来定义页面元素样式

$\color{orange}{基本格式}$

h1(选择器){
    color：white; 属性：属性值;组成声明
    font-size:14px
    }

$\color{orange}{使用方式}$

页面中使用css
1.外链实现内容和样式的分离分工合作
2.嵌入
3.内联不用写选择器

$\color{orange}{选择器}$

详细使用

属性选择器
[属性名]{}

明确属性值
input[type=“password”]{ }

属性值匹配 a[href^="#"]以井号开头 a[href$=".jpg"]以.jpg结尾

伪类选择器
不基于标签和属性定位靠状态定位
a:link{ 默认状体 }
a:visited{ 鼠标访问过 }
a:hover{ 鼠标悬停 }
a:active{ 鼠标按下后 }
：focus{ 鼠标聚焦 }

结构性伪类根据Dom树的位置定位
li:fist-child{ li的第一个子元素 }
li：last-child{ li的最后子元素 }

组合定位
input.error{ 表示标签加类名组合 }
选择器组body,h1,ul,li{};

$\color{orange}{颜色}$

rgb模式
rgb(143,172,135)
#8f ac 87

HSL模式
hsL色相取值0-360
saturation饱和度表示鲜艳程度 % 100%灰色
lightness亮度颜色明亮程度 % 100%白色

alpha 透明度
rgba(1,1,1,0.3) 1是完全不透明
hsla（0，0，0，0.4）
#ffffff78

字体font-family：,, 可以写多个没有就用下一个通用字体组衬线体
先写英文后写中文会让英文不用中文形式展示

font-size em相对父级 %也是相对父级
font-style italic 斜体
font-weight：粗细100-900 normal=400 700=bold
line-height baseline之间的距离无单位是字体大小的多少倍

font属性可以和写
textline：排版

文字间距letterspace wordspace

多个选择器选择到同一个元素冲突时采用根据特异度来选择
会覆盖可以只写特殊的地方

继承
与文字相关的可以继承和模型相关的不可继承宽度
可以将width：inherit;显示继承

布局
layout确定内容的大小和位置的算法
依据元素容器兄弟节点和内容等信息来计算

常规流行级块级表格布局 FlexBox Grid布局
浮动 float图文文字环绕
绝对定位position属性

盒子容器
margin 外边距
border边框根据边框可以设置各种形状
padding 内边距
margin collapse 两个容器会外边距合并取大的
box-sizing：border-box;
overfolw visible超出也会显示
hidden不会显示
scroll滚动显示

块级独占一行
行级一行多个 width height不适用了