[华为云在线课程][大话CSS][学习笔记][第3章][CSS常用属性]
【摘要】 3.1，字体 字体使用font-family属性来定义文字的字体属性值为字体的名称，可以设置多个字体名称，浏览器会按照顺序使用它第一个支持的字体字体优先级列表 字体尺寸使用font-size属性来定义文字的尺寸属性值为长度值，例如：30px，也可以使用百分比，例如：50% 如何在Chrome浏览器中查看网页的字体 字体样式使用font-style属性设置文字为斜体默认属性值为normal显...
3.1，字体
字体
- 使用
font-family属性来定义文字的字体 - 属性值为字体的名称，可以设置多个字体名称，浏览器会按照顺序使用它第一个支持的字体
- 字体优先级列表
字体尺寸
- 使用
font-size属性来定义文字的尺寸 - 属性值为长度值，例如：30px，也可以使用百分比，例如：50%
如何在Chrome浏览器中查看网页的字体
字体样式
- 使用
font-style属性设置文字为斜体 - 默认属性值为
normal显示标准效果 - 当属性值为
italic时显示倾斜效果
字体粗细
- 使用
font-weight属性设置文字的粗细 - 默认值为
normal，相当于400，显示效果为正常粗细 - 当属性值为
bold时，相当于700，显示为粗体 - 当属性值为
bolder时，显示更粗 - 当属性值为
lighter时，显示更细 - 也可设置属性值为一个具体数值100/200/300/400/500/600/700/800/900
简写属性
- 使用
font属性来定义所有文字的样式 - 各个属性值用空格分隔
- font=font-family + font-size + font-style + font-weight
- 例如：p{font:monospace 50px bold italic}
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体</title>
<style>
.text1
{
/*衬线字体*/
/* font-family: serif; */
/*非衬线字体*/
font-family: sans-serif;
/* 等宽字体 */
/* font-family: monospace; */
/* font-weight: 300; */
font: italic 30px/50px bold;
}
</style>
</head>
<body>
<div class="text1">华为云</div>
<div class="text1">解决方案</div>
</body>
</html>
3.2，文本
颜色
- 使用
color属性来设置文本的颜色 - 属性值可以是颜色名、十六进制颜色值、RGB颜色值
行高
- 使用
line-height属性来设置文本行高 - 默认值为：
normal - 其他属性为长度值、百分比
对齐方式
- 使用
text-align属性来设置文本的对齐方式 - 属性值有：left（左）、right（右）、center（中）
方向
- 使用
direction属性设置文本的方向 - 属性值有：ltr（左）、rtl（右）
- 注意与对齐方式属性的区别
缩进
- 使用
text-indent属性设置段落的首行缩进 - 默认值为0，其他属性有：长度值、百分比
装饰线
- 使用
text-decoration属性设置文本的装饰线 - 属性值有：underline（下划线）、overline（上划线）、line-through（中划线）
- 默认值为none，表示没有线
间隔
- 使用
letter-spacing属性设置文本字符间隔的大小 - 属性值为长度值，可为负值
阴影
- 使用
text-shadow属性来设置文本的阴影 - 属性值为：X轴偏移量 + Y轴偏移量 + 模糊距离 + 颜色
- 例如：
text-shadow: 10px 10px 5px gray
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本</title>
<style>
.text
{
color: rgb(192, 0, 0);
line-height: 50px;
/* font-size: 50px; */
/* text-align: center; */
text-indent: 2em; /*缩进两个字空间*/
text-decoration: underline;
}
</style>
</head>
<body>
<div class="text">华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商。目前华为约有19.7万员工，业务遍及170多个国家和地区，服务全球30多亿人口。</div>
<div class="text">华为致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界: 让无处不在的联接，成为人人平等的权利，成为智能世界的前提和基础；为世界提供最强算力，让云无处不在，让智能无所不及；所有的行业和组织，因强大的数字平台而变得敏捷、高效、生机勃勃；通过AI重新定义体验，让消费者在家居、出行、办公、影音娱乐、运动健康等全场景获得极致的个性化智慧体验。</div>
</body>
</html>
3.3，尺寸
宽度和高度
- 使用width属性定义宽度
- 使用height属性定义高度
- 属性值为：auto、长度、百分比
最小宽度和最小高度
- 使用
min-width属性定义最小宽度 - 使用
min-height属性定义最小高度
最大宽度和最大高度
- 使用
max-width属性定义最大宽度 - 使用
max-height属性定义最大高度
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>尺寸</title>
<style>
.text
{
background-color: yellow;
width: 50px;
min-width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="text">华为云</div>
</body>
</html>
3.4，列表
list-style-image
- 用于指定一个图片作为列表项前面的标记
- 默认值为none
- 可以设置一个图片的url作为标记图片
list-style-position
- 用于设置在什么位置显示列表项前面的标记
- 默认值为outside
- 还可设置为inside
list-style-type
- 用于设置列表前面图标的类型
- 默认值为disc，其它值：circle、square、decimal、none、low-alpha、upper-alpha…
list-type
- 这是一个简写属性
- list-style = list-style-image + list-style-position + list-style-type
- 其属性值可以省略几项
- 例如：
ul{list-style: decimal inside}
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表样式</title>
<style>
.list1
{
list-style-image: url("logo.png");
list-style-position: inside;
list-style-type: square;
}
.list2
{
list-style-type: square;
}
.list3
{
list-style-type: decimal;
}
.list
{
list-style: inside lower-alpha;
}
</style>
</head>
<body>
<ul class="list">
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ul>
<ul class="list1">
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ul>
<ul class="list2">
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ul>
<ul class="list3">
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ul>
<ol>
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ol>
</body>
</html>
3.5，背景
background-color
- 用来设置元素的背景颜色
- 默认值为：transparent
- 3种方法直接设置颜色：颜色名、十六进制颜色、RGB函数
- 颜色名：red
- 十六进制颜色：#ff0000
- RGB函数：rgb(255,0,0)
background-image
- 通用来设置元素的背景图片
- 默认值为：none
- 还可以设置一个图片的url地址，用来作为背景图片
background-repeat
- 主要用来配合background-image属性一起使用，用来设置背景图片的平铺方式
- 默认值为：repeat，表示将背景图片在X轴和Y轴方向平铺显示
- 还可设置为沿X轴平铺（repeat-x）、沿Y轴平铺（repeat-y）、不平铺（no-repeat）
background-position
- 也是用来配合background-image属性一起使用，用来设置背景图片的起始点位置
- 默认为左上角零点位置
- 位置参数：X轴方向left、center、right; Y轴方向top、center、bottom
- 百分比：X轴位置X%、Y轴位置Y%
- 长度：X轴离原点长度、Y轴离原点长度
background-attachment
- 用于设置背景图片固定或者跟随页面滚动
- 默认值：scroll
- 还可以设置为fixed
background
- 简写属性
- background = background-color + background-image + background-repeat + background-position + background-attachment
- 可以全部设置，也可以省略其中几项
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
.bak
{
height: 1000px;
/* background-color: red; */
/* background-color: #f00; */
/* background-color: rgb(255, 0, 0);
background-image: url("image.png");
background-repeat: no-repeat;
background-position: 100% 100%;
background-attachment: fixed; */
background: url("image.png") red no-repeat center center;
}
</style>
</head>
<body>
<div class="bak"></div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）