CSS学习
day01
1.css概念
层叠样式表,将html文件的内容以更优雅的方式呈现给用户
{
属性:值;
}
2.css声明
选择器 {
属性名:值;
属性名:值;
}
3.可读性【规范】
1).缩进、空白
2).添加注释
3).速写
4.原理
1)加载html文件
2)解析html文件中的内容
3)解析html的同时加载css文件
4)创建DOM树
5)将页面呈现出来
5.如何在html中使用css
参考1-css.html
6.@import和link的异同
相同:都可以导入外部的css样式表
不同:
1).所属范围不同
@import是css的语法
link是html文件中的标签
2).加载顺序不一样
link 导入的css是在解析html文件的同时解析
@import 导入的css只有在html文件解析完毕之后才加载
3).兼容性
link不存在兼容性问题
@import是css语法,所以存在兼容性问题[低版本的浏览器中可以测试]
7.css选择器
1)基本选择器
通配选择器 *
id选择器 #
类名选择器 .
逗号选择器 ,
标签选择器 <tag>
2)层次选择器
子代选择器 .one > .two
后代选择器 .one .two
day02
1、属性选择器【表单元素】
[key] 选中所有具有key属性的元素
[key=valu 选中所有具有key属性并且值是val的元素
(参考1-attr.html)
2.伪类选择器
:link a标签未点击时
:hover a标签光标悬浮
:active a标签点击时
:visited a标签访问时
:first-child
:last-child
:nth-child(n)
:nth-child(1) ----- :first-child
3.伪元素选择器
::before 在当前选中的元素的前面创建出一个伪元素
::after 在当前选中的元素的后面创建出一个伪元素
4.级联 [权重]
浏览器采用css样式的顺序
1.!import
具有该属性值的样式优先级最高
2.特性值
内联样式 1000
id选择器 100
类选择器\伪类选择器\属性选择器 10
标签选择器\伪元素选择器 1
3.css代码的顺序
谁离选中的元素近,采用谁的样式 [就近原则]
5.继承
样式从父元素继承到子元素的过程
1.可继承的样式
font-size 字体大小
color 字体颜色
cuisor 鼠标的形状
2.不可继承的样式
height
width
margin 外边距
padding 内边距
background-color
6.单位
1.颜色
十六进制颜色: #cccccc ==> #ccc
关键字: red/blue...
rgb
r:red 0~255
g:green 0~255
b:blue 0~255
rgba
r:red 0~255
g:green 0~255
b:blue 0~255
a:模糊程度 0~1
2.长度/尺寸
绝对单位
px 像素
相对单位
em 参考父元素的字体大小
rem 参考根元素html的字体大小
%
day03
1.相对单位
浏览器默认大小字体为16px;
em
相对于当前元素的父元素中的字体大小
rem
相对于html中字体的大小
%
相对于父元素的大小
2.盒子模型
浏览器页面中每一个元素都可以被当作一个“盒子”
1.组成
height 元素内容的高度
width 元素内容的宽度
padding 元素内容与边框的距离
padding-top
padding-right
padding-bottom
padding-left
速写:
padding:1px 2px 3px 4px;
padding:1px 2px 3px;
padding:1px 2px;
padding:1px;
border 元素的边框
margin 元素与其他元素之间的距离
margin-top
margin-right
margin-bottom
margin-left
2.分类
参考3-盒子分类.html
3.计算
参考3-盒子分类.html
4.背景
background-color
background-image
background-size 背景图尺寸
background-repeat 背景图的重复方式
background-clip 背景图
background-position 背景图位置
3.布局
1.默认文档流
1.页面元素出现的顺序与该元素在文件中代码出现的顺序一致
2.块级元素独占一行空间
3.行内元素可以与其它元素共享一行空间
(由于默认文档流满足不了所有需求,所以需要采用其他的布局方式。)
2.浮动布局
用法:
为了让块级元素在一行显示。
语法:
float:left/right。none/inherit;
特点:
1.脱离了默认文档流。
2.浮动布局的元素从左到右一次布局,直到所有的浮动元素的宽度之和超出了父元素的宽度,才换到下一行继续布局。
3.浮动元素会失去对父元素的支撑【清除浮动】。
4.浮动元素会失去默认的宽度.
day04
1、作业
2、四列布局
3、动画布局
4、品字格布局
5、双飞翼布局
6、字体样式
day05
1、品字格布局
2、文本、字体样式
3、定位布局
1、overflow 对超出的内容区域进行处理
auto 根据元素是否超出添加滚动条
超出 -> 添加滚动条
不超出 -> 不添加滚动条
scroll 给父元素直接添加滚动条,不论子元素是否超出父元素
hidden 将超出父元素的内容隐藏【不显示】
2、文本样式
font-
font-size 字体大小
font-weight 字体粗细
font-family 字体族
font-face 网络字体
color 字体颜色
text-
text-algin 文字的排布方式
left\center\right
text-decoration 文字线的修饰
overline 上划线
underline 下划线
line-through 删除线
text-transform 文字变形
3、定位布局
当元素使用了定位属性position之后,可以使用left\top\right\bottom来描述元素的位置
1) 静态布局【默认值】
position:static;
2) 相对定位
参考点:相对于当前元素原本的位置
position:relative;
3) 绝对定位
参考点:相对于当前元素父【祖先级】定位元素来描述位置,当祖先级元素都不是定位元素的时候,相对于浏览器视口进行定位
position:absolute;
day06
1、固定定位
position:fixed;
参考点:浏览器的视口
2、粘滞布局
position:sticky;
相对定位 + 固定定位
阈值 top:50px;
大于 相对定位
小于 固定定位
3、链家重构
—作业—
- 网易严选重构
- 链家重构
day07
1、伸缩盒
在移动端进行布局
1) 语法
display:flex;
2) 父元素的样式
display:flex 将盒子设置为伸缩盒
flex-direction 弹性元素排布的方向
row x轴方向排布【默认值】
column y轴方向排布
justify-content 主轴方向上的对齐方式
center 居中排布
flex-start 开始位置上排布
flex-end 结束位置上排布
align-items 交叉轴上对齐的方式
center 居中排布
flex-start 开始位置上排布
flex-end 结束位置上排布
- 子元素的样式
flex 弹性元素对于伸缩盒剩余空间的分配
2、动画
随着时间的推移动态的改变css的样式属性
- 语法【组成】
animation 动画的配置
@keyframes 动画的关键帧 - 属性
参考 3-animation.html - 案例
1. 轮播图
2. 梦幻西游
day08
1、过渡
提供了一种在更改CSS属性时控制动画速度的方法
1) 语法
transition:property duration timing-function delay;
property 需要添加过渡的属性
duration 过渡的时间
timing-function 过渡的速度
delay 过渡的延迟
2) 和动画的区别
动画是不需要触发前提的,在页面刚打开时,就可以显示动态的效果
过渡是需要手动去触发
3) 案例
参考 2-book.html 3-border.html
4) 可过渡的属性
有些属性不能够添加过渡,即使添加了也没有效果
display属性就不可以添加过渡
2、变形
- 语法
div {
transform:xxx();
transform-origin:center;
}
xxx()是一个变形函数,可以操控元素以什么样的方式进行变形
transform-origin 元素发生变形时的原点 - 旋转
rotateX(deg) 以x轴为定点轴,旋转元素
rotateY(deg)
rotateZ(deg) - 倾斜
skewX(deg) 以x轴为定点轴,倾斜元素
skewY(deg)
skew(xdeg,ydeg) - 缩放
scale(n1,n2) x轴方向缩放n1倍,y轴方向缩放n2倍
3、媒体查询
实现响应式布局,在不同尺寸页面中,项目展示的效果不同