Day4-CSS-2：字体、文本、背景属性，与CSS三大特性

albedo_102

已于 2023-07-22 21:08:45 修改

阅读量75

点赞数

文章标签： css 前端

于 2023-07-22 19:20:45 首次发布

本文链接：https://blog.csdn.net/albedo_102/article/details/131871670

版权

常见属性入门

关于属性的内容看这里

尺寸属性：width，height
背景属性：background-color 背景颜色；background-image 背景图片
字体属性：font-size字体大小
文本属性：color颜色
边框属性：border边框粗细，样式，颜色

外边距margin

字体相关属性

属性	说明	CSS
font	在一个声明中设置所有字体属性	1
font-family	规定文本的字体系列	1
font-size	规定文本的字体尺寸	1
font-style	规定文本的字体样式	1
font-variant	规定文本的字体样式	1
font-weight	规定字体的粗细	1
@font-face	一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体	3
font-size-adjust	为元素规定 aspect 值	3
font-stretch	收缩或拉伸当前的字体系列	3

font-family: '华文彩云','楷体';/* 可以给多个值，如果第一个不支持，依次使用后面的 */

font-size 规定文本的字体尺寸 1em为默认大小，是相对长度单位，谷歌浏览器为16px

font-style 的取值

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

font-weight的取值

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

指定在一个声明的所有字体属性：

p.ex1 {font:15px arial,sans-serif; }

p.ex2 {font:italic bold 12px/30px Georgia, serif; }

文本相关属性

文本的相关属性

属性	说明	CSS
color	设置文本的颜色	1
direction	规定文本的方向 / 书写方向	2
letter-spacing	设置字符间距	1
line-height	设置行高	1
text-align	规定文本的水平对齐方式	1
text-decoration	规定添加到文本的装饰效果	1
text-indent	规定文本块首行的缩进	1
text-transform	控制文本的大小写	1

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

行级元素块级元素居中

通过设置背景可以看到，行级元素的宽度是由内容决定的，块级元素默认占满一行。

直接给行级元素设置text-align: center;是看不出效果的，因为它的宽度是由内容决定的

但是给块级元素设置text-align: center;它就会居中，

如果想让行级元素相对于页面居中（相对于它的父控件居中），可以给行级元素的父控件（body）设置text-align: center;

 给行级元素和块级元素设置宽高
            只有块级元素被设置了宽高，对行级元素没用。行级元素的宽高只能由内容决定。
        让块级元素相对父控件居中
            text-align: center;只能让文本居中。
            需要通过盒子模型中的外边距，才能让块级元素相对父控件居中
        让行级元素相对父控件居中
            设置margin: 0 auto;无效，
            只需要在它的父控件上设置居中text-align: center;即可

总结：
    对于行级元素
        因为宽高由内容决定，一般是通过它的父控件text-align来设置居中
    对于块级元素
        宽高可以设置，通过自身的text-align可以设置内容居中
        设置它相对于父控件居中，需要设置自身的margin: 0 auto;

text-indent 属性规定文本块中首行文本的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

line-height 设置以百分比计的行高：.

注意： 负值是不允许的

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

1.在网页精准布局时，设置行高为1，取消默认上下边隙

div {
       height: 200px;
       width: 200px;
       background: lightblue;

       line-height: 200px;
       text-align: center;

       line-height: 1; /* 在网页精准布局时，设置行高为1，取消默认上下边隙 */
       font: italic 700 30px  仿宋;
       /* 1.问题
          先设置了行高=元素高度，再设置font字体连写，发现文本没有垂直居中了，
          2.原因
         因为设置字体连写的时候，顺序为font-style font-variant font-weight font-size/line-height font-family
            设置了行高覆盖了前面的
         解决方法：
            将行高设置写在font-size后面
            或者将杭高的设置写到font连写的后面
        */
}

布局顺序：从上往下，从左往右，从外向里

背景相关属性

属性	描述	CSS
background	复合属性。设置对象的背景特性。	1
background-attachment	设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。	1
background-color	设置或检索对象的背景颜色。	1
background-image	设置或检索对象的背景图像。	1
background-position	设置或检索对象的背景图像位置。必须先指定background-image属性。	1
background-repeat	设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。	1
background-clip	指定对象的背景图像向外裁剪的区域。	3
background-origin	S设置或检索对象的背景图像计算background-position时的参考原点(位置)。	3
background-size	检索或设置对象的背景图像的尺寸大小。	3

background-position

设置或检索对象的背景图像位置。必须先指定background-image属性。

取值也可以是关键字，left top 如果只指定一个关键字，其他值为center

可以是百分比 x% 可以是像素值

background-repeat

设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。

repeat 背景图像将向垂直和水平方向重复。这是默认

repeat-x 只有水平位置会重复背景图像

repeat-y 只有垂直位置会重复背景图像

no-repeat background-image 不会重复

background-size

设置背景图片大小。

图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 URL（smiley.gif); 是允许的。

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

值	说明	CSS
background-color	指定要使用的背景颜色	1
background-position	指定背景图像的位置	1
background-size	指定背景图片的大小	3
background-repeat	指定如何重复背景图像	1
background-origin	指定背景图像的定位区域	3
background-clip	指定背景图像的绘画区域	3
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	指定要使用的一个或多个背景图像	1

精灵图

将项目中用到的多张小图，合成一张大图，这个大图就是精灵图

好处：减少服务器请求图片的次数，减少网络占用

步骤：1、创建div 2、设置盒子大小为展示图片的大小 3、设置精灵图为盒子背景图 4、获取要展示的小图在精灵图上的坐标，取负值，设置到background-position里

img和bgi的区别

1.从css结构上分析区别

1）如果img没有设置图片，宽高都为0，如果设置图片之后，宽高由图片决定（图片可以把img宽高撑开

2）使用背景来显示图片，即使设置了背景图片，如果没有设置高度，div也不会被撑开，必须要手动设置高度

2、使用场景区别

1）img是属于html范畴，是页面骨架的组成部分，一般像商品展示、图片轮播，都使用img

2）bgi属于css范畴，主要起到装饰作用。音乐播放器的皮肤，安卓背景，都可以用bgi，

CSS三大特性

1、层叠性

概念：后写的样式会覆盖前面的

特点：相同样式覆盖，不同样式叠加

2、继承性

概念：子元素会继承父元素的相关属性，可以在一定程度上减少代码

应用：

1、给body设置font，可以统一页面默认的文字样式

2、给ul设置list-style：none，可以去掉无序列表前面的小圆点

特点：并不是父类所有的属性子类都能继承

优先级

3、优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

·选择器相同，则执行层叠性

·选择器不同，就会出现优先级的问题

优先级高的选择器会覆盖优先级低的选择器

关于优先级，我们需要一套计算公式来去计算，这个就是CSS Specificity(特殊性）权重公式

标签选择器	计算权重公式
继承或者*	0,0,0,0
每个元素（标签选择器)	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0.1,0,0
每个行内样式 style=""	1,0,0.0
每个limportant重要的	无穷大