一.CSS的简介
1.什么是css
1.css:名称是层叠样式表(Cascading style sheets)
2.作用:渲染html元素–添加外观的
3.存在样式表中
4.解决内容和表现分离
5.外部样式表大大提高工作效率
6.多个样式之间相互重叠
2.css的语法格式
写法是: 选择器{属性:值;属性:值;}
这种写法仅限内嵌和外部,行内样式使用style属性来操作。
注意:css是写给html元素的
3.单位
网页里面的像素单位:px, %, rem ,em
px 代表固定像素值,相对屏幕的分辨率的单位值
% 百分比像素值
rem 相对单位,只相对于网页的html根元素的字体大小
em 相对单位,相对于元素文本字体大小,没有设置字体大小,默认浏览器字体大小
二.CSS语法
1.元素选择器
元素选择器:根据选择器匹配元素,来添加样式
多个不同的元素具有相同的类名称:根据元素区分,选择类
选择器可以复合使用,使用逗号分隔
1.1 *选择器
匹配所有元素,匹配的是网页里面所有的同名元素
1.2 element选择器
根据元素的名称来匹配
1.3 class类名称选择
根据元素的class名称选择,用.匹配,class 可以多个元素共有
1.4 id选择器
根据元素的id名称选择,用#匹配,id只能有一个,不能重名
1.5 子父选择器
空格匹配当前元素的所有子元素,>匹配的是当前元素的直接子元素
1.6 css选择器优先级
选择器的优先级:
1.*选择器<元素选择器<class选择器<id选择器
2.id选择器的优先级和子父选择器的优先级:
和子父选择器前面的匹配选择器进行对比:
有父级,同级别父级优先,不同级按1
3.!important可以提高优先级
2.样式
2.1 css在网页里面分为几种类型
1.行内样式
2.内嵌样式
3.外部样式
2.2 基本样式
1.color 控制字体颜色
2.font-size 设置字体大小
默认的属性值 larger x-larger small x-small 通常用px
3.font-family: serif; 设置字体的
4.width 设置宽
5.height 设置高
6.border 设置边框
12. font-style 字体样式
13.font-weight 字体加重
2.3 样式的属性
样式属性:单属性样式和复合属性样式
2.4 行内样式
行内样式写在元素的行内
2.5 内嵌样式
1.内嵌的位置:在head标签或者body标签里面
2.如何使用:使用style标签内嵌到head或者body标签里
3.通过css选择器来匹配样式
2.6 外部样式
1.外部样式的位置:在外部写样式表,网页内部引入
2. 外部样式的引入 使用link 标签
3.可以引入在 head 或者body,还可以在内嵌样式里面引入,使用@import ‘./css/index.css’
2.7样式的优先级
样式优先级:
1.三种样式不冲突,三者效果叠加
优先级:行内> 内嵌>外部 (内嵌 和外部 优先级 取决于引入的先后顺序)
2.三种样式冲突,样式选择根据就近原则
优先级:行内> 内嵌>外部 (内嵌 和外部 优先级 取决于引入的先后顺序)
3.!important可以提高优先级,优先级高于行内
3.伪类
3.1 分类
伪类:类似鼠标操作
:hover 鼠标悬停伪类
:active 激活伪类
:visited 访问之后的伪类
:link 访问之前的伪类
:checked ~匹配的是当前元素之后的所有元素 + 匹配的元素是当前元素紧跟之后的元素
4.盒子模型
1.相关知识
- css盒子模型:所有的元素都可以看做盒子,设计或者布局的时候用
- 元素设置行级块的时候,水平的和垂直的元素之间的外边距都是累加的
- 元素水平放置,两个之间的外边距是累加的
- 子元素全部浮动的时候 ,元素之间的外边距也是累加的
- 正常默认情况元素上下外边距不会累加 而是走最大值
- 给元素设置内间距值 ,默认会把元素撑开
- 如果想设置内间距 又不想撑开:
1.box-sizing: border-box; 是让元素边框和内间距向盒子内部走
2.box-sizing:content-box; 相当于默认情况 - margin 复合属性 padding 复合属性
3.盒子模型塌陷的处理方法
盒子模型塌陷:父元素的内部没有内容,子元素设置margin-top,连带父容器塌陷
- 给父元素设置上边框
- 给父元素设置内间距
- 给父容器设置overflow: hidden;
5.内联元素和块元素相互转化
1.相关知识
- 元素分为:行元素,块元素
- 相互之间的转化:
1.块元素转化行元素 display: inline;
块元素转化行级块 display: inline-block;
2.行元素转化块元素 display:block
行元素转化行级块 display: inline-block;
3.元素在转化为行级块的时候默认 有间隙
给父元素设置字体大小为 0
6.水平元素浮动
1.相关知识
- 子元素在默认情况会自动撑开父元素
- 元素水平浮动:left,right
- 素在浮动之后会脱离文档流,就不占位置
- 子元素浮动,父元素撑不开怎么处理:
1.给父元素设置固定高
2.给父元素设置 超出部分隐藏 overflow: hidden;
3.在父元素内部设置一个空的div
4.子元素浮动,导致父元素的问题 可以直接处理 ,父元素底下的兄弟元素,里面的内容会收上边浮动的隐藏,是用上面的第三种方案解决或 在兄弟元素样式里面写:清除浮动
7.元素的定位
1.相关知识
- 元素的定位:
1.absolute 绝对定位
2.relative 相对定位
3.fixed 固定定位 - 元素默认在文档流上占位值
- 元素在定位之后可以多使用5个属性:zindex 分层 left right bottom top
- 文档流默认层0 z-index: 0;
- relative: 给元素设置相对定位,默认位置不变,相对自身的位置进行左上右下移动以及分层
- absolute: 给元素设置绝对定位,元素脱离文档流 不占位置,默认相对于浏览器,相对浏览器左上右下移动
- 如果让绝对的元素相对父元素定位:给父元素设置相对定位,子元素就在会在父元素的内部上下左右移动以及分层
- fixed : 固定定位是元素脱离文档流,设置上下左右之后,滑动滚动条位置固定不变
- 素绝对定位或者固定定位没有宽和高 得设置
- 元素在绝对定位或者固定定位之后 初始位置 得看前面有没有元素占位置 有默认位置在这个元素的下边
8.伪元素
:befer
:after
9.元素的显示隐藏
控制元素显示隐藏
display:block; 显示同时元素也是块元素 display:none; 隐藏
10.超出部分隐藏
overflow: hidden;
11.网站的布局模式
- 固定布局 固定像素布局 px
- 流动布局 百分比布局 %
- 网站布局 layout布局
- 浮动布局 —就是元素左右浮动 堆叠产生布局模式
- 定位布局 —就是元素使用各种定位 产生的布局模式
- 弹性盒子布局 —flex 进行布局
- 多列布局
- grid布局 网格布局
三.一点小知识
1.div块元素,默认为父元素的100%
2.font-size默认像素16px 最小8px
3.百分比像素走父元素
4.浏览器一般默认:16px
5.rows=“行数” cols=“列数”
6.css里面设置宽高属性:当前元素必须是块级元素,如果要给行级元素设置宽和高,必须转化为块级元素
7.命名class和id的时候不要使用纯数字,数字不要开头 命名规则:
- 驼峰命名 BlockSmall
- 帕斯卡命名 blockSmall