CSS文本样式学习
今天我学习了CSS里面关于文本样式还有颜色,我相信我们将会对CSS更加深入进去,因为这里面的世界是真的非常吸引人。
CSS的固定格式是:
<head>
<style>
标签{
属性:值;
}
</style>
</head>
1:规定文字样式的属性: font-style:值
2:规定文字粗细的属性: font-weight:值
3:规定文字大小的属性: font-size:值
4:规定文字字体的属性: font-family值
它们的取值有很多,这里就不一一说了,大家可以看 w3c的网站上面都有介绍。
下面就让大家感受一下这些属性;
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>开心一刻</title>
<style>
p{
font-style: italic;
font-weight: bolder;
font-size: 200px;
font-family:"宋体";
}
</style>
</head>
<body>
<p>马泽是大佬</p>
</body>
</html>
下面是效果:
那么如果设置的字体不存在,会默认使用系统字体,如果我们不想用系统默认的字体在怎么办呢?
我们可以在后面用备选字体
如果想给中文和英文分别单独设置字体应该怎么弄呢?
我们要明白:但凡中文字体都包含有英文字体
但是但凡是英文字体里面都没有中文字体
那么:我们应该将英文字体写在前面
常见的中文字体:宋体,黑体,微软雅黑
常见的英文字体:Times,New Roman,Arial
并不是名称是英文就是英文字体,因为中文字体都有自己的英文名称。
文字属性的缩写
font:样式 粗细 大小 '字体';
注意:每个属性之间都有空格,有的属性值可以省略
size属性和family属性不可以删除,位置也不能乱放,size在family前面。
文本装饰的属性
格式:
text-decoration:
后面的值可以是:line-through(删除线)
null(空,常用于去除超链接的下划线)
文本水平对齐的属性
格式:
text-align:left(左)/right(右)/center(中间)
文本缩进的属性
text-indent:值
单位一般为em,一个em就代表一个文字距离
在CSS中如何通过color属性修改文字颜色
格式:color:值
1:英文单词:局限性,不能指出所有的颜色。
2:rgb:r(red),g(green),b(blue)
格式:rgb(数字1,数字2,数字3)
数字范围(0~255)
在前端开发中,并不常用黑色
让红绿蓝三个值一样就是灰色,三个值越小就是偏黑色,越大偏白色
3:rgba a代表透明度,范围0~1,0是完全透明,1为不透明
4:十六进制表示颜色本质就是rgb
下面说一下标签选择器
有id选择器和类选择器
id选择器:根据指定的id找到对应的标签,然后设置属性
格式:
#id名称{
属性:值;
}
每一个html标签都有一个属性叫id,每个标签都可以设置id
在同一个界面:id的名称是不可以重复的,id名称前加#
id的名称只能有字母,数字,下划线组成,数字不能开头
id名称不能是html标签的名称
在企业中,若仅仅是为了设置样式,不会使用id,因为前端开发中id是结合js使用的。
类选择器
格式:
.类名{
属性:值;
}
类名是专门给某个特定的标签设置样式的。
在html中每个标签可以绑定多个类名
格式:
<标签名称 class="类名1 类名2...">
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
类名的第一个字符不能使用数字
今天就先说到这里了。