前端入门一之CSS知识详解
前言
- CSS是前端三件套之一，在MarkDown中也完美兼容这些语法；
- 这篇文章是本人大一学习前端的笔记；
- 欢迎点赞 + 收藏 + 关注，本人将会持续更新。
文章目录
- Emmet语法：
- CSS基本语法：
- css语法结构只有3种：选择器、样式属性和值
- css代码风格：
- 添加css的方法：
- CSS选择器：
- 基础选择器：
- 复合选择器：
- 字体属性
- 字体复合属性：
- 背景颜色属性：
- 背景复合属性：
- 文本属性：
- CSS三大属性
- 1、层叠性
- 2、继承性
- 3、优先级
- 盒子模型：
- 网页布局本质
- 网页布局过程
- 网页布局三大核心
- 盒子模型组成
- 边框：
- 边框使用
- 边框会影响盒子实际大小
- 内边框：
- 内边距的影响：
- 外边距：
- 一些放在css首位的选择器：
- 圆角边框：
- 简单盒子、文字阴影：
- 盒子阴影：
- 文字阴影：
- 浮动：
- 标准流：
- 浮动：
- 块元素、行内元素、行内块元素：
- 块元素：
- 行内元素：
- 行内块：
- 元素显示模式转换：
- 定位
- 边偏移
- 静态定位（了解）
- 相对定位 （重要）
- 绝对定位（重要）
- 子绝父相
- 固定定位（重要）
- 粘性定位（了解）
- display 属性
- opacity属性
- z-index属性
Emmet语法：
- 生成标签，如：div + tab
- 如果想同时生成多个标签，如：div*3
- 如果有父子级标签，如：ul > li
- 兄弟关系标签，如：div + p
- 生成含有类名，如：.demo（默认是div） p.red
- 生成含有顺序，如：div$*3
- 如果想在标签内有内容{ }表示
CSS基本语法：
css语法结构只有3种：选择器、样式属性和值
css代码风格：
- 样式格式：重点，展开格式
- 样式大小书写：全部用小写
- 空格规范：
- 空格
添加css的方法：
-
链接外部样式
-
内部样式表：控制一个页面
-
导入外部样式表
第一步建立一个css <style> <link rel="styleheet" href="链接"> </style> -
内嵌样式：控制一个
CSS选择器：
- 分为：基础选择器和复合选择器
基础选择器：
- 标签选择器
- 类选择器（class 点开头)，一个html标签中可以有多个
- 多类选择武器
- id选择器（#名），一个html标签中只能有一个
- 通配符选择器（*）
复合选择器：
- 后代选择器
- 子代选择器（选择最近一个子元素）
- 元素1(父)>元素2(儿)
- 并集选择器
- 元素1，元素2
- 伪类选择器
- 如：a： link
- a: visited
- a: hover
- a: active(也是规范的顺序)
字体属性
- font-family：
- font-size：
- font-style：italic normal（默认）
- font-weight：400 700
- font-variant(小写转为大写)
字体复合属性：
font：font-style fone-weight font-size/line-height font-family
- 必须保留size和family
- 顺序一定要严格
背景颜色属性：
- background-color：
- background-color: 颜色取值
- background-image:
- background-image: url(图像地址)
- background-repeat：
- background-repeat: 取值
- 取值：（默认）no-repeat repeat-x repeat-y
- background-attachment：（固定或者滚动）
- background-attachment：scroll/fixed
- background-position：
- background-position：位置取值
- 位置取值：数值和方向位置
- 注意：数组一定是 X Y结构
- background: rgba(0,0,0,0.5); 必须四个值
背景复合属性：
background: 背景颜色 背景图片 背景重复 背景附件 背景位置
- 顺序随意
文本属性：
- color：
- text-align:
- 值：center left right
- text-decoration：
- none（默认） underline（下划线） overline（上划线） line-through（删除线）
- text-indent：
- px单位
- em单位
- 行间距：line-height
CSS三大属性
1、层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式，不会冲突
2、继承性
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
口诀：龙生龙，凤生凤，老鼠生的孩子会打洞
3、优先级
注意点：
- 权重是有4组数字组成,但是不会有进位。
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
- 继承权重为0.无论父类有多大权重
权重叠加：
复合选择器，会有权重叠加
- div ul li---------> 0,0,0,3
- .nav ul li---------> 0,0,1,2
- a:hover--------->0,0,1,1
- .nav a --------------> 0,0,1,1
盒子模型：
网页布局的核心：利用CSS摆盒子
- content padding margin border
网页布局本质
利用CSS实现盒子模型
网页布局过程
- 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
- 利用 CSS 设置好盒子样式，然后摆放到相应位置。
- 往盒子里面装内容
网页布局三大核心
- 盒子模型
- 浮动
- 定位
盒子模型组成
盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
边框：
边框使用
- 三部分：宽度 样式 颜色
- border-width
- border-color
- border-style
- solid（实线边框）
- dashed（虚线框）
- dotted（点线边框）
- none
- 复合边框：border：（无顺序）
- 上下左右边框，如：border->top
- 重点：border-collapse(控制相领的边框，表格的细线边框)
- border-collapse：collapse
- 注意：边框会影响盒子的实际大小
边框会影响盒子实际大小
边框会额外增加盒子实际大小，需要根据实际情况布局
内边框：
-
padding
- padding-top
- padding-bottom
- padding-right
- padding-left
-
padding的复合写性
- padding：1px 代表上下左右都是1px
- padding：1px 2px 代表上下是1px，左右是2px
- padding：1px 2px 3px 代表上是1px，下是3px，左右是2px
- padding：1px 2px 3px 4px ，代表顺时针
内边距的影响：
- 内容与边框有距离，增加了内边距
- padding影响了盒子的实际大小
- 解决方案，改变height和width的大小，或者不写height和width
外边距：
- margin， 其他写法与padding一样
- 外边距的典型运用：
- 让盒子水平居中，属性值为：auto
- 外边距合并
- 嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷比较大
- 解决方案：
- 可以为父元素定义一个上边框
- 可以为父元素定义内边框
- 可以为父元素添加overflow：hidden；
- 可以用浮动,定位
- 嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷比较大
一些放在css首位的选择器：
-
清除内外边距
* { margin：0； padding：0； } -
ul-li不显示小圆点
li { list-style：none； }
圆角边框：
border-radius：length；
- length：数值/百分比
- 正方形想要圆，50%
- 圆角矩形：设置高度的一般就行了
- 也可以分开写，如：border-top-left-radius：
- 也可以合起来写：border-radius：
简单盒子、文字阴影：
盒子阴影：
- box-shadow：h-shadow v-shadow blur spread color inset
- h-shadow v-shadow 必须有，h水平阴影 v垂直阴影
- blur 模糊距离
- spread 阴影尺寸
- color 阴影的颜色 rgba（0，0，0，.3）
- inset 将外部阴影改为内部种（默认外部阴影）
文字阴影：
- text-shadow
- 其余同上
浮动：
标准流：
- 就是标签按照规定好默认方式排列
- 最基本的页面布局
浮动：
- float：none（默认）
- left（左浮动）
- right（右浮动）
- 两个最重要的的特征
- 脱离标准普通流的控制，移动到指定位置 （托标）
- 浮动盒子不再保留原来的位置
块元素、行内元素、行内块元素：
块元素：
- div（最金典）
- h1-h6
- p
- ul、ol、dl
- form
- table
- 特点
- 独占一行
- 高、宽度以及内边距都可以控制
- 是一个融器
- 注意：p h1-h6 内不可以存在块元素
行内元素：
- a
- strong
- br
- del
- span（最经典）
- textarea
- 特点：
- 一行可以多个
- 高、宽不能设置
- 默认宽就是本身内容宽度
- 行内元素只能放在文本或者其它行内元素
行内块：
- img
- input
- td
- 特点：
- 默认文本高度
- 高度、宽度都可以控制
- 一行可以多个
元素显示模式转换：
- 转为块元素：display：block；
- 转为行内元素：display：inline；
- 转为行内块元素：display：line-block；
定位
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档的定位方式。边偏移则决定了该元素的最终位置
边偏移
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right: 80px | 右测偏移量，定义元素相对于其父元素右边线的距离 |
静态定位（了解）
静态定位是元素的默认定位方式，无定位的意思
语法：
选择器 {position: static;}
- 静态定位按照标准流特性摆放位置，无边偏移
- 静态定位在布局中很少用
相对定位 （重要）
相对定位是元素在位移位置的时候，是相对于他原来的位置来说的
语法：
选择器 {
position: relative;
}
相对定位的特点：（重要）
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续占有
绝对定位（重要）
绝对定位是元素在移动的时候，是相对于它祖先元素来说的
语法：
选择器 {position: absolute;}
特点（重要）：
- 如果没有父元素或者祖先元素，则以浏览器为准定位
- 如果祖元素有定位（相对、绝对、固定定位），则以最近定位元素为参考点
- 绝对定位不再占有原先位置
子绝父相
因为父亲要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
固定定位（重要）
固定定位是元素固定于浏览器可视区位置
选择器 {position: fixed;}
特点（重要）：
- 跟父元素没有关系
- 不随滚动条滚动
- 固定位置不在占有原先的位置
粘性定位（了解）
语法：
选择器 {
position: sticky;
}
display 属性
- display: none; 隐藏对象
- display: block;
opacity属性
颜色透明
- opacity: .5;
z-index属性
提高层级
- z-index: 999; （999最高层级）