SS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
用的最多的就是文本颜色,color属性用于定义文本的颜色。语法如下:
div {
color:red;
}
颜色的表现形式有:
预定义的颜色值: red、green、pink等
十六进制: #FF0000、#FF6600、#29D794等
RGB代码: rgb(255,0,0)或rgb(100%,0%,0%)等
看下效果:
对应的代码为:
<!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>Document</title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<div>人保说的是还有7次洗车,5次还是3次道路救援啥的</div>
</body>
</html>
所有div对应的都为蓝色。
使用第二种方法,16进制颜色来表示,先看下效果:
对应代码为:
<!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>Document</title>
<style>
/* div {
color: blue;
} */
div {
color: #FF0000;
}
</style>
</head>
<body>
<div>人保说的是还有7次洗车,5次还是3次道路救援啥的</div>
</body>
</html>
最后使用第三种方法,看下效果:
对应的代码为:
<!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>Document</title>
<style>
/* div {
color: blue;
} */
/* div {
color: #FF0000;
} */
div {
color: rgb(255, 193, 100);
}
</style>
</head>
<body>
<div>人保说的是还有7次洗车,5次还是3次道路救援啥的</div>
</body>
</html>
rgb竟然是red、green、blue,也是今天才知道的。
今天就先到这里了,中午休息~
午说了CSS字体的颜色属性,下午来说下字体的文本对齐text-align和文本装饰text-decoration
text-align属性用于设置元素内文本内容的水平对齐方式。语法规则如下:
div {
text-align:center;
}
除了有center属性外,还有另外两个属性:
left 左对齐(默认值)
right 右对齐
先看下居中效果:
对应代码为:
<!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>Document</title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>人保好,还是平安好呢?一个是央企,一个是巨头</div>
</body>
</html>
然后是文案左对齐,看下效果:
对应代码为:
<!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>Document</title>
<style>
div {
text-align: left;
}
</style>
</head>
<body>
<div>人保好,还是平安好呢?一个是央企,一个是巨头</div>
</body>
</html>
最后是右对齐,看下效果:
对应的代码为:
<!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>Document</title>
<style>
div {
text-align: right;
}
</style>
</head>
<body>
<div>人保好,还是平安好呢?一个是央企,一个是巨头</div>
</body>
</html>
如果不写文字对齐的属性,看下默认应该都是左对齐,效果如下:
对应代码为:
<!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>Document</title>
<style>
/* div {
text-align: right;
} */
</style>
</head>
<body>
<div>人保好,还是平安好呢?一个是央企,一个是巨头</div>
</body>
</html>
可以看到已经将text-align代码注释掉了,默认展示就是左对齐
今天先到这里,大家学习工作辛苦了~
、html的介绍
HTML 的全称为:HyperText Mark-up Language, 指的是超文本标记语言。标记:就是标签, <标签名称></标签名称>,比如:<html></html>、<h1></h1>等,标签大多数都是成对出现的。
所谓超文本,有两层含义:
html是用来开发网页的,它是开发网页的语言。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
网页文件的后缀是.html或者.htm, 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页。
全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器,目前是前端(网页)开发使用最多的一款软件开发工具。
插件名说明Chinese (Simplified) Language Pack for VS Code中文(简体)汉化包open in browser右击在浏览器打开html
点击对应安装的插件,然后再点击卸载按钮即可。
*请认真填写需求信息,我们会在24小时内与您取得联系。