[Web 前端] 009 css 常用的文本样式设置
常用的文本 css 样式
- 概览
| 参数 | 释义 | 举例 |
|---|---|---|
| color | 设置文字的颜色 | color:red; |
| font-size | 设置文字的大小 | font-size:12px; |
| font-family | 设置文字的字体 | font-family:'微软雅黑'; |
| font-style | 设置字体是否倾斜 | font-style:'normal'; 设置不倾斜 font-style:'italic'; 设置倾斜 |
| font-weight | 设置文字是否加粗 | font-weight:bold; 设置加粗 font-weight:normal; 设置不加粗 |
| line-height | 设置文字的行高 | line-height:24px; |
| text-decoration | 设置文字的下划线 | text-decoration:none; 将文字下划线去掉 |
| text-indent | 设置文字首行缩进 | text-indent:24px; 设置文字首行缩进24px |
| text-align | 设置文字水平对齐方式 | text-align:center; 设置文字水平居中 |
- 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.box{
color: red; /* 设置字体为红色 */
font-size: 20px; /* 设置字体大小为 20px */
font-family: consolas; /* 设置字体为 consolas */
font-style: normal; /* 设置字体不倾斜 */
font-weight: bold; /* 字体加粗 */
line-height: 20px; /* 设置文字行高 */
text-decoration: none; /* 不设下划线 */
text-indent: 30px; /* 首行缩进 30px */
text-align: center; /* 设置文字水平居中 */
}
</style>
</head>
<body>
<div class="box">
1234567890 <br>
abcdefghijklmnopqrstuvwxyz <br>
一二三四五六七八九十 <br>
</div>
</body>
</html>
- 效果截图

- 补充:为了便于观察,上图的蓝色边框是截图后加的
[Web 前端] 009 css 常用的文本样式设置的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- [Web 前端] 010 css 常用的边框设置
css 常用边框属性 概览 参数 释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式solid 实线,dotted 点状线,dash ...
- 【WEB前端】CSS常用选择器
1.1 标签选择器 就是用标签名来当做选择器. 1) 所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2) 不管这个标签藏的多深,都能够被选择上. 3) 选择的是所有的,而不是 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- 必知干货:Web前端应用十种常用技术你全都知道吗?
Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...
- 【CSS学习】--- 文本样式
一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
随机推荐
- De Moivre–Laplace theorem
网址:https://en.wikipedia.org/wiki/De_Moivre%E2%80%93Laplace_theorem De Moivre–Laplace 中心极限定理的证明.主要用到s ...
- Granger Causality 格兰杰因果关系
(Granger Causality) 格兰杰(Granger)于 1969 年提出了一种基于“预测”的因果关系(格兰杰因果关系),后经西蒙斯(1972 ,1980)的发展,格兰杰因果检验作为一种 ...
- 左半连接left demi-join
返回左边表的记录,前提是其记录对于右边表满足on语句的判定条件 对于左表中一条指定的记录,在右表中一旦找到匹配的记录,hive就会立即停止扫描 1.sql select s.myd,s,symbol, ...
- CSP-J&S 游记以及总结
前言 以前的比赛没有写什么总结,都只注重结果,没有注重过程,不知道如何才能在比赛中拿到高分,因此这次CSP才会考得一塌糊涂. 从此吸取教训,每场比赛都要总结经验,每场比赛都要尽全力考,每个题目都要尽全 ...
- 正确理解MySQL中的where和having的区别
原文:https://blog.csdn.net/yexudengzhidao/article/details/54924471 以前在学校里学习过SQLserver数据库,发现学习的都是皮毛,今天以 ...
- DevExpress v18.2版本亮点——Analytics Dashboard篇(一)
行业领先的.NET界面控件——DevExpress v18.2版本亮点详解,本文将介绍了DevExpress Analytics Dashboard v18.2 的版本亮点,新版30天免费试用!点击下 ...
- SpringCloud学习系列-Eureka服务注册与发现(4)
actuator与注册微服务信息完善 1.主机名称:服务名称修改 当前问题 含有主机名称 修改修改microservicecloud-provider-dept-8001 的yml文件 修改内容 eu ...
- 51nod1790 输出二进制数
题目描述 题解 过于真实 LJ卡常题 一个显然的dp: 设f[i][j]表示做完前i个,最后一段为j+1~i的方案(最小值同理) 那么f[i][j]=min(f[i-j-1][k]),其中k~j-1要 ...
- 货币系统 Money Systems
母牛们不但创建了它们自己的政府而且选择了建立了自己的货币系统.由于它们特殊的思考方式,它们对货币的数值感到好奇. 传统地,一个货币系统是由1,,, 或 ,, 和 100的单位面值组成的. 母牛想知道有 ...
- 【Java】使用@Valid+BindingResult进行controller参数校验
@Valid @Valid注解用于校验,所属的包: javax.validation.Valid. 你可以定义实体,在实体的属性上添加校验规则,在API接收数据时添加@Valid注解,这时你的实体将会 ...