网页的皮肤——css

目录

1.css的编写方式

2.css选择器

3.css样式属性

4.css包围盒

5.css中的display

6.css中的定位

7.css浮动与清除

8.弹性容器

9.自定义字体

---

1.css的编写方式

1.优先级最高的行内模式
        直接使用style属性写在开始标签中
        针对一个标签
2.内部样式表
        在head标签中使用style标签包裹
        样式选择器{样式语句}
        针对当前html内所有满足的标签
3.外部样式表
        写在css文件中，通过link引入html
        一般先引入外部样式表，再编写内部样式表
        针对多个html

2.css选择器

4种基本选择器
        *：通配符选择器，选择所有标签
        tag：标签选择器
        匹配固定标签
        .类名：类名选择器
        匹配拥有类名的标签
        #id：id选择器
        匹配拥有id的标签
5种符号选择器
        ,：逗号左右满足一个即可
        空格：子孙选择器
        >：子级选择器
        +：相邻下一个
        ~：下面多个
其他选择器：
属性
        [attr]：拥有属性
        [attr=]：拥有属性并且值等于
        [attr^=]：拥有属性并且值以开头
        [attr$=]：拥有属性并且值以结尾
伪类(在正常选择器之后使用:)
状态
        :hover 鼠标划入
        :active 鼠标点下
顺序
        :first-of-type 第一个
        :nth-last-of-type 最后一个
        :nth-of-type(n) 正数第n个
                odd 奇数
                even 偶数
        :nth-last-of-type(n) 倒数第n个

3.css样式属性

1.字体相关:font-
family:类型,多个字体
size:大小, 默认16px
weight: 粗细
400:normal
700
bold
style
italic：斜体
2.文本相关：text-
transform
capitalize
lowercase
uppercase
align
left
right
center
indent
2em
2*font-size
decoration
none
去掉下划线
3.背景相关：background-
color
背景颜色
image
url
背景图片
优先级高
repeat：重复
no-repeat
position
位置
left、right、center、top、bottom
100px、500px
size
100%
contain
长边展示完全，短边补空
cover
短边展示完全，长边隐藏
4.列表：list-style-
type
circle：空心圆
disc：实心圆
square：方块
lower-alpha：小写字母
lower-roman：罗马数字
position
outside：外侧
inside：内侧
image url()
none：去除所有样式

4.css包围盒

一个元素占用空间信息
boder 上下左右
        width
        style
        color
        1px solide red
padding
        内部
        只有宽度
        使用自己背景色
margin
        外部
        使用父元素背景色

padding margins支持四种写法
        1个数值：上下左右一样
        2个数值：上下 左右
        3个数值：上 左右 下
        4个数值：上 右 下 左
更改包围盒计算方式
border-box：给定宽高包含框与内补

5.css中的display

inline：行内元素，无宽高
block：块元素，占一行，可以给宽高
inline-block：行内块，多个块在一行，可以给宽高
none：隐藏

6.css中的定位

static：静态定位
        从左到右从上到下排列
relative：相对定位
        相对文档流静态定位 发生偏移
        占用文档流位置
        top
        left
absolute：绝对定位
        参考位置：外层第一个非static的标签发生偏移
        直到html
        不占用文档流位置
        top left right bottom
fixed：固定定位
        参考位置：浏览器窗口
sticky：粘性定位
        没有达到粘性位置
        相当于静态定位
        达到粘性位置
        相当于固定定位

7.css浮动与清除

float
        left：左排列，排列在上一个左浮动的右侧
        right：右排列，排列在上一个右浮动的左侧
clear
        left：左边不能有左浮块
        right：右边不能有右浮块
        both：清除左右浮块，后续元素不会被浮动元素覆盖

8.弹性容器

display: flex主轴方向
flex-direction：
        row
        row-reverse
        columu
        columu-reverse
flex-wrap：
        wrap
        no-wrap
        wrap-reverse
justify-content：
        flex-start：主轴开始位置
        center：主轴居中
        flex-end：主轴结束位置
        space-around：中间有空白
        space-between：两边中间都有空白
align-items：
        flex-start：交叉轴起始位置
        center：居中
        flex-end：交叉轴结束
align-content：
        flex-start：交叉轴起始位置，没有空白
        center：居中，没有空白
        flex-end：交叉轴结束，没有空白
当交叉轴有多行，使用多轴对齐

9.css渐变与动画

渐变
        transition
        transform
动画
        animation