总结
今天讲的知识更加的繁杂,并不是很难,但是知识量大,而且练的比较少,难以熟练应用,各知识点之间的连贯性不是很强,不能融会贯通~~
所以老师会让记大量的笔记,并且要求背下来。可能只有背下来或者用的多了记住了,才可以使用的熟练吧–熟能生巧。。
记忆吧-少年!
- css字体样式–font;
1.字体尺寸–font-size:
font-size的取值有两种:
1. 固定尺寸取值:px;
2. 相对于根元素尺寸取值:rem;
px取值:font-size:16px;//固定取值样式;
rem取值:根元素:HTML,一个网页中只有一个根元素HTML;
HTML默认尺寸为16px
rem取值就是取16的倍数;
语法:p{font-size:.75rem;} //即16 * 0.75 = 12;
手机网页主要使用rem取值
- 字体的类型—font-family:一般情况下默认为”微软雅黑”;
如果我们想给整个页面都设置为微软雅黑:
body{font-family:微软雅黑}
如果计算机不支持汉字取值:
body{font-family:microsoft yahei;} - 字体加粗font-weight:bold;加粗
- line-height:
line-height = font-size + line-space;
行高 = 字体尺寸 + 行间距;
在一个多行的文本内容里面,我们可以通过设定行高;
来调整每行内容的行间距;
如果在父级标签内,只有一行内容,那么给父级标签设定line-height:
父级标签的高度,就可以实现子级内容在父级的垂直居中。
line-height能够解决行标签和块标签的垂直居中
但是解决不了行内块标签的垂直居中—-img - 解决图文混排在父级上垂直居中问题:
如果存在左图右文,那么我们单纯给父级设置line-height=父级高度;
这样只会让文字居中,不能让图片居中,
原因 :图片和文字的对齐方式是以底边为对齐的;
如果我们想要图片也能垂直居中就需要让图片和文字以中轴线对齐;
设置方式:给图片设置样式img{vertical-align:middle;}
- 字体的类型—font-family:一般情况下默认为”微软雅黑”;
- 文本内容样式设置:text;
首行缩进:text-indent:2rem;首行缩进两个字;
text-indent:60px;可以设定首行缩进固定的尺寸值; - 水平对齐
text-align:left,right,center;
文本内容是靠左对齐,靠右对齐,居中对齐;
该属性可以实现行标签,行内块标签的水平居中;
默认等于父级宽度的块标签,只能实现块标签内部文字的水平居中,
设定具体宽的的块标签是无法水平居中的 - 文本修饰:text-decoration:
作用:去除文本下划线;
用法:text-decoration:none; - 字间距:letter-spacing://英文称呼字符间距;
改变的是一段文字中,最小单元的水平间距; - ul列表样式:
list-style:取值为none
作用:去除列表的类型; - 链接样式< a >:
a标签的样式具有状态性;带有状态的样式设置以”:”开头;
:link—–没有被点击时;
:visited—-点击结束时;
:hover—-鼠标悬停时;
:active—-鼠标点击时;
我们在日常工作中经常用到的状态是:hover鼠标悬停在标签上的时候,
因为任何的标签都可以被鼠标放上去,所以我们可以用:hover结合选择器
形成一个叫做”状态伪类选择器”
状态伪类必须和其他的选择器结合才能够有效使用,状态伪类也有权重系数;
权重系数:10;
作用:给样式的出现增加一个出发的条件,伪装成用户可以操作的假象; - 过渡:transition:过渡的对象 过渡的时间 过渡的运动方法(linear);
过渡的第一个取值:如果你只需要设定一个动作类型的变形;
那么取值直接写上改变性类型;
如果我们需要一次执行多个变形过程,
这个时候我们就需要设置值:all
过渡属性放在发生变形动作的标签上,但是最好不要放到:hover状态的标签内。 - 背景:background
background-color背景色;
background-image背景图;
background-repeat背景平铺;
background-position背景定位; - background-position:
取值有两大类:
- 关键词取值:top,left,center,bottom,right
- 固定的像素值取值:background-position:距离左边的像素值 距离上边的像素值;
利用来进行背景图定位,就可以实现对一张大图上的局部图片进行调用。 - 如果图片尺寸小,但是设置背景的盒子大,
此时为了让图片铺满整个盒子,我们需要使用一个css3样式属性background-size: cover;
- 浮动:float: 取值:left向左,right向右,none不浮动
浮动原理:父级标签内的子级浮出父级框的束缚,通过向左向右排列的方式,让参与浮动的子级标签排为一行;
而且所有参与浮动的标签,无论之前是什么标签最后变为:块标签,
默认宽度自动收缩为内容的宽度。
在前端开发中,我们一般不设置网页的具体高度;
这样的在浮动的情况下,父级一般会出现高度消失。背景色不见了这样的情况;
所以我们需要学习如何清空浮动带来了负面;
如果我们需要给失去高度的父级恢复高度:做法:
父级标签:after{content:”“;dispaly:block;
visibility:hidden;clear:both;
}
给失去高度的父级标签的内容后面,插入一个为空的内容;这个为空的内容显示为block块标签;
我们只是将内容隐藏了;给这样一个块做一个不参与浮动的设置。
如果不参与浮动的标签跟随参与浮动的内容跑了, 那么我们就给跑了的标签设置一个clear:both;