今天学习的内容
9:00-20:00
CSS的背景
背景颜色
background-color
属性值
默认值:transparent(透明)
十六进制
RGB
预定义颜色
背景图片
background-image
属性值
默认值:none
url(图片路径)
背景平铺
网页中的x轴和y轴
属性是background-repeat
repeat 默认值,横向纵向都平铺
no-repeat 背景不平铺
repeat-x 背景横向平铺
repeat-y 背景纵向平铺
背景定位
属性:background-position
方位名词
top、bottom、left、right、center
方位名词的位置可以随意变换
如果只写一个方位名词,那么另一个默认是center
精确单位
有两个值,分别是x和y
如果是精确单位,第一个一定是x轴坐标,第二个一定是y轴坐标
如果只指定一个数值,那么一定指定的是x轴的坐标,y轴则默认居中
混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x轴坐标,第二个值是y轴坐标
背景图片滚动
属性是 background-attachment
属性值
scroll 随着屏幕滚动 默认值
fixed 不跟随屏幕滚动
背景的复合写法
属性background
属性值为 背景颜色 背景图片 背景平铺 背景图片滚动 背景图片的位置 推荐的写法顺序,但是不需要严格按照该顺序来书写。
背景颜色的半透明
属性:background:rgba(0,0,0,0.3);
rgba中的a是alpha的缩写,代表透明程度,取值范围是0~1
透明度的小数点之前的0可以去掉 可以写成.3
背景半透明不会影响盒子里面内容
背景缩放
属性 background-size
精确单位
精确单位来控制,第一个是宽度,第二个值是高度
百分比单位
使用百分比单位来控制,第一个值是宽度,第二个值是高度,参照盒子的宽度和高度进行计算
cover
宽度和高度适配到覆盖整个盒子大小为止
contain
背景图片缩放到宽度或者高度任一一项到达盒子的宽或高度就停止缩放
21:00-23:00
课后复习CSS
CSS的语法规范
属性和属性值以“:”连接,我们也把它们叫做键值对
多个键值对之间要用“;”来隔开。
CSS样式练习的时候一般写在<head></head>标签中的<style></style>标签
CSS的基础选择器
标签选择器
将html里面的标签名作为选择器,来设置统一的CSS样式
优点: 能快速选择页面中的一类标签设置样式。
缺点:不能为页面中的相同元素设置差异化样式。
常用的复合选择器
后代选择器
后代选择器又叫做包含选择器,是选择某个父元素下面的子元素。
语法:元素1 元素2 {样式声明} 选择元素1中的所有元素2(所有复合条件后代都可以被选中不局限于到底是儿子还是孙子)
子选择器
子元素选择器就是只能选择复合条件的最近的一级子元素,简单来说就是选亲儿子元素
语法 元素1 > 元素2 {样式声明} 表示选择元素1里面最近的一级元素2
并集选择器
并集选择器就是用多组标签来构成,同时为他们定义相同的样式,通常用于集体样式声明,并集选择器中的各选择器之间用逗号隔开。
伪类选择器
链接伪类选择器
给链接来添加特殊效果的选择器
:link 选择所有未访问过的链接
使用方式 a:link
:visited 选择所有已经被访问的链接
使用方式a:visited
:hover 选择鼠标指针悬浮的链接
使用方式a:hover
:active 选择所有鼠标点击时的链接
使用方式a:active
例 尽量采取 link visited hover active 的顺序。(lovehate)
焦点伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素,一般情况下在<input>表单元素中使用
今天遇到的问题
CSS文本逻辑不清晰
英文单词拼写错误,导致页面特效无法生成
作业书写代码不能及时运用当天知识
问题解决方案
课后进行思维导图梳理内容
学习网课
|