CSS学习笔记（4）

1.元素层级

 对于开启了元素定位的元素可以通过设置z-index(其实是z轴)属性来设置层级,

设置整数来作为参数(最好是正数)值越大层级越高,相同层级的元素后面的能盖住前面.

祖先元素的层级再高,也不会盖住后代(后代默认比祖先层级高);

定位应用于细微,浮动应用于大局;

2.字体族

字体族font-family:可选值(1.)serif 衬线字体(有衬线)(2.)sans-serif 非衬线字体(没有衬线)(3.)monospace 等宽字体(单字宽度相等)

可以设置对个版本,以防不兼容

字体族不是具体的字体格式而是字体的分类

指定字体的类别,那么浏览器会自动识别该类别下的字体.

设置字体时要求用户电脑本地有该字体,但如果是在想用某种独特的字体

font-face可以直接把服务器的字体供给用户使用

font-face{

font-family(设置字体族的名字);

src-url(字体文件路径);

}

3.图标字体

字体是矢量图,放大后不会失真,而图片会失真;

所以可以把一些常用的小图片变成字体的格式,以便使用

如何使用:拿font awesome举例;

下载文件后把css和webfont放入项目,两者必须在同一目录,

此时吧css中的all.css引入文件,all.css文件中有多个类，其中fab和fas等类应用了font-face设置的字体；

然后再设置个别类名，里面的格式是::before+图标编码；

这样在给网页元素设置图标字体时，加上fab等表示字体的类，再加上表示具体图标的类，根据类名累加时样式覆盖，便能实现图标；

fab加上是能识别后面的图标，具体图标类名加上是在某元素前面加上具体图标的编码；

除了用类名表示图标字体，也可以在文件引入后，直接给具体元素设置伪元素(如::before)的样式为“\+图标编码”；但这时要手动设置font-family(字体族的名字需要自己在all.css找)以便识别编码，还要设置font-weight(fab和fas都额外设置的东西)；

第三种是先设置前一个类名以便识别编码,然后再设置实体 &#字符编码；

阿里的iconfont也是一个图标库,使用方法与上类似

4.行高

 行高指的是文字占有的实际高度,可以通过line-height来设置行高

如果只给行高设置一个数,比如2,那么表示行高是当前字体大小的两倍.

字体框就是字体存在的格子,设置font-size实际上就是设置字体框的高度

行高会在字体框的上下自动平均分配

行高指单行行高,如果多行会复制

行间距=行高-字体大小;

5.字体属性的简写: 加粗效果  字体样式  字体大小/行高(可以不写,默认1.33) 字体族

font-weight:bold(加粗效果) normal(不加粗,默认) 100-900 9个级别,但一般不用

font-style: normal(正常) italic 斜体

字体的大小和字体族必须写,且顺序固定

6.文字的水平和垂直对齐

水平对齐:text-align: left左对齐,right右对齐,justify 两端对齐,center居中对齐

垂直对齐:vertical: baseline 基线对齐 top顶部对齐 bottom底部对齐 middle(基线的高度加一半x的高度) \还可以指定数值

图片的对齐方式默认基线对齐,图片与框有一部分空隙,可以使其上部挥着底部对齐来去掉空隙

7.文本的其他样式

text-decoration设置文本修饰

可选值:none 无                line-through删除线

 underline 下划线             可以再加颜色

white-space(如何处理空白):normal 正常.nowrap 不换行 pre保留空白

text-overflow:ellipsis(添加省略号)

8.背景

background-img:url(图片路径);

可以同时设置背景颜色

如果图片小于元素,图片会自动铺满元素

如果图片大于元素,一部分图片无法显示

background-repeat(用来设置背景图片的重叠方式): repeat(默认值),repeat-x(沿x轴重复)repeat-y....,no-reapeat不重复

background-posotion用来设置背景的位置,通过left right botton top center来设置位置

必须使用两个方位词来定位,如果只有一个,那么另一个会默认为center;

还可以通过偏移量来设置位置比如background-posotion:10px 10px 表示向右偏移10,向下偏移10;

background-clip:可选值有 border-box(背景出现在边框下面),padding-box(背景出现在内边距下面),content-box(背景出现在内容区);

background-origin(设置背景图片偏移量的原点):padding-box(默认值) border-box content-box 

background-size(用来设置背景图片的宽高):第一个值宽度,第二个高度,如果只写一个另一个等比例缩放

也可以设置百分比而不是数值

一些另外的可选值:cover保持比例铺满,contain比例不变完整显示

元素的背景默认不随滚动条滚动,但它的子元素背景会移动

这时可以给子元素设置background-attachment属性:scroll 默认自,背景图片跟随滚动条滚动;fixed 背景图片被固定在页面中,不会随元素移动.

背景图片属性的简写:颜色 图片 位置 /尺寸 重复方式 是否固定;没有顺序要求;但是size一定要放在position后面并且用/隔开,而且orgin要写在clip的前面;

9.渐变
线性渐变:可以通过渐变设置复杂背景颜色,同时渐变不是颜色而是图形,通过background-image来设置

background-image:line-gradoent(to a,xxx.xxx.xx)线性渐变,line算是background-image的可选值之一

可以指定渐变方向,to top/bottom/left/right,xxxedg(旋转度数),xx turn(旋转某圈数)然后加颜色

同时可以设置纯色所处的位置,其余空白的地方默认由最近的纯色填充,两纯色之间由颜色渐变填充

同时可以设置background-image:repeating-line-gradoent()这时原来的空白地区会由渐变颜色重复填充

径向渐变(类似放射):可以设置background-image:(repeating-)radial-gradoent

默认情况下,渐变的效果是整个元素,随着长宽的变化,渐变的形状也会变化,但我们可以手动设置渐变的范围,

不同于线性渐变可以设置纯色的范围,只是可以设置渐变的范围大小,然后按照颜色的先后顺序发生渐变.

如果设置的渐变小于原本元素,空白地区会被纯色填充.

可以通过设置circle(圆)和ellipse(椭圆)来改变渐变的形状

可以设置at xx xx(或者center)来设置位置,默认原点是左上角,然后向右为x正轴,向下是y正轴