分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

8-[CSS]-字体、文本、背景

发布时间:2023-09-06 01:57责任编辑:蔡小小关键词:CSS

1.字体相关CSS属性介绍

  (1)font-family:字体系列。

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例:

body { ?font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}

如果设置成inherit,则表示继承父元素的字体。

  (2)font-weight:字重(字体粗细)。

取值范围:

描述
normal默认值,标准粗细
bord粗体
border更粗
lighter更细
100~900设置具体粗细,400等同于normal,而700等同于bold
inherit继承父元素字体的粗细值

  (3)font-size

字体大小。

p { ?font-size: 14px;}

如果设置成inherit表示继承父元素的字体大小值。

  (4)color

设置内容的字体颜色。

支持三种颜色值:

  • 十六进制值 如: #FF0000
  • 一个RGB值 如: RGB(255,0,0)
  • 颜色的名称 如: red
p { ?color: red;}

2、字体属性

  (1)text-align:文本对齐

  text-align 属性规定元素中的文本的水平对齐方式。

描述
left左边对齐 默认值
right右对齐
center居中对齐
justify两端对齐

  (2)line-height:行高

    规律:当行高=盒子高度时,文本会垂直居中

  (3)text-decoration:文字装饰。

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

3、背景属性

  常用背景相关属性:

属性描述
background-color规定要使用的背景颜色。
background-image规定要使用的背景图像。
background-size规定背景图片的尺寸。
background-repeat规定如何重复背景图像。
background-attachment规定背景图像是否固定或者随着页面的其余部分滚动。
background-position规定背景图像的位置。
inherit规定应该从父元素继承background属性的设置。

  background-repeat取值范围:

描述
repeat默认。背景图像将在垂直方向和水平方向重复。
repeat-x背景图像将在水平方向重复。
repeat-y背景图像将在垂直方向重复。
no-repeat背景图像将仅显示一次。
inherit规定应该从父元素继承background-repeat属性的设置。

  background-attachment取值范围:

描述
scroll默认值。背景图像会随着页面其余部分的滚动而移动。
fixed当页面的其余部分滚动时,背景图像不会移动。
inherit规定应该从父元素继承background-attachment属性的设置。

  background-position取值范围:

描述
top left 
top center 
top right 
center left 
center center 
center right 
bottom left 
bottom center 
bottom right
如果只设置了一个关键词,那么第二个值就是"center"。
默认值:0% 0%。
x% y%第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果只设置了一个值,另一个值就是50%。
xpos ypos第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果只设置了一个值,另一个值就是50%。
可以混合使用%position值。

示例:

body { ?background-color: red; ?backgraound-image: url(xx.png); ?background-size: 300px 300px; ?background-repeat: no-repeat; ?background-position: center }

简写:

body { ??background: red url(xx.png) no-repeat fixed center/300px 300px; }



8-[CSS]-字体、文本、背景

原文地址:https://www.cnblogs.com/venicid/p/9125459.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved