8 CSS文本属性
8 文本属性
font-style（字体样式风格）
/*
属性值：
normal：设置字体样式为正体。默认值。
italic：设置字体样式为斜体。这是选择字体库中的斜体字。
oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。
*/
font-weight（字体粗细）
/*
属性值：
normal：设置字体为正常字体。相当于数字值400
bold：设置字体为粗体。相当于数字值700。
bolder：设置字体为比父级元素字体更粗的字体。
lighter：设置字体为比父级元素字体更细的字体。
number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。
注意：font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。
*/
font-size（字体大小）
/*
font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（ px ）、字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）、百分比（ % ），磅[点]（ pt ）。
字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版已经修复。*/
font-family（字体族）
/*
font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候，可以指定多种字体,作为候补。指定多个字体的时候，需要使用逗号隔开。
如果css中没有声明当前内容使用的字体族的时候，默认：
中文： 宋体 [ win7以后默认是 微软雅黑 ]
英文： Arial
*/
color（字体颜色）
// 可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。更高级的有 RGBA、HSL、HSLA，不过低版本的浏览器并不支持。
<style>
.c1{
color: red;
}
.c1{
color: #369;
}
.c1{
color: RGB(0,0,255);
}
</style>
另外要注意，使用十六进制表示颜色值的时候，如果字符的格式类似于“AAAAAA”的这种，六个字符一样的；又或者是“AABBCC”，这种，一二，三四，五六 位置上的数字一样的，我们可以使用简写来表达。
text-align（文本对齐方式）
/*
text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left、居中对齐center、右对齐right。justify 实现两端对齐文本效果。
*/
line-height（字体行高）
// 字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。
行高 = 字体大小 + 上半行距 + 下半行距
vertical-align 属性设置元素的垂直对齐方式。
<img src="" alt=""><span>woaixianrenzhang</span>
text-decoration
// 使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none，underline，overline，line-through四种。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css文本属性操作</title>
<style>
.c1 {
/*字体大小*/
font-size: 32px;
/*font-size: 3em;*/
/*字体*/
font-style: oblique;
/*font-family:"新宋体";*/
/*加粗*/
font-weight: 600;
/*字体颜色*/
color: red;
/*color: #1cd5b0;*/
/*color: #1124;*/
/*color: RGB(123,23,45);*/
/*color: rgba(123,23,54,0.5);*/
}
.c2 {
/*文本背景颜色*/
background-color: #1cd5b0;
/*文本对齐方式 居中*/
text-align: left;
}
p {
/*文本两端对齐*/
text-align: justify;
}
.c3 {
width: 400px;
height: 100px;
background-color: #616161;
}
.c4 {
width: 200px;
height: 60px;
background-color: lightskyblue;
text-align: center;
line-height: 30px;
}
img {
/*vertical-align: bottom;*/
vertical-align: -1px;
}
a{
/*有无下划线*/
text-decoration: none;
/*text-decoration: underline;*/
}
span{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="c1">姓名:干将莫邪</div>
<div class="c2">hello world!</div>
<p>
独坐幽篁里，弹琴复长啸。<br>
深林人不知，明月来相照。
</p>
<div class="c3">
道可道，非常道；名可名，非常名。
无名，天地之始，有名，万物之母。
故常无欲，以观其妙，常有欲，以观其徼。
此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
</div>
<div class="c4">
众鸟高飞尽，孤云独去闲。<br>
相看两不厌，只有敬亭山。
</div>
<a href="">上官婉儿</a>
<span>上官婉儿</span>
<br>
<img src="https://img2.baidu.com/it/u=391363397,3985968789&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
alt="小猴子"><span>woaixianrenzhang</span>
</body>
</html>
代码效果图：
8 CSS文本属性的更多相关文章
- [CSS]文本属性（Text）
CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...
- css文本属性用法总结
稍稍总结了下css文本的一些属性用法,自己忘记的时候也可以用来查查,不用去查网站那么麻烦. 下面是部分总结,也希望对其他人有用 文本修饰 (1)text-decoration: 文本修饰(横线) 4 ...
- 4 CSS文本属性
CSStext(文本)属性可定义文本外观,比如文本颜色,对齐文本,装饰文本,文本缩进,行间距等 4.1文本颜色 color属性用于定义文本颜色. div { color: red; } 颜色表示方法: ...
- css文本属性
CSS1&2中的文本属性 属性 版本 简介 text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
- css 文本属性和字体属性
1.将浮动居中 这需要三个盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- CSS文本属性 文本阴影text-shadow 换行 text-overflow
div{ font-size: 20px; text-shadow: 5px 5px 5px #333; text-shadow: 10px 10px ...
- CSS 文本属性
一.文本位置 text-align: 参数 /** * left center right:左中右**/text-align: left; 二.文本行间距 line-height: 参数 特别要注意: ...
- CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
- 学习css之文本属性
css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段 ...
- 如何设置文本不换行省略号显示等CSS常用文本属性
如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...
随机推荐
- pikachu 水平越权，垂直越权
水平越权 查看到其他用户的信息或者通过其他用户去编辑或修改其他用户的信息 1. 用lucy/123456登录 2. 点击查看信息 3. 使用burpsuite拦截请求 GET /vul/overper ...
- SSH 客户端
简介 OpenSSH 的客户端是二进制程序 ssh.它在 Linux/Unix 系统的位置是/usr/local/bin/ssh. Linux 系统一般都自带 ssh,如果没有就需要安装. # Ubu ...
- Taurus.MVC WebMVC 入门开发教程5：表单提交与数据验证
前言: 在本篇 Taurus.MVC WebMVC 入门开发教程的第五篇文章中,我们将学习如何处理表单提交和进行数据验证. 这是 Web 开发中非常重要的一部分,因为它涉及到用户输入数据的处理和有效性 ...
- 【Azure 环境】Azure CLI 获取Access Token的脚本实例
问题描述 如何使用azure CLI命令获取到中国区的Access Token呢? 问题解答 首先,需要通过 az cloud set --name AzureChinaCloud 来设置登录中国区的 ...
- 【Azure 应用服务】在Azure App Service多实例的情况下，如何在应用中通过代码获取到实例名(Instance ID)呢？
问题描述 App Service开启多实例后,如何在代码中获取当前请求所真实到达的实例ID(Instance ID)呢? 问题答案 App Service 通过 环境变量的方式 显示的输出实例ID等信 ...
- 手把手教你python数据处理项目——探索ebay汽车销售数据
探索Ebay汽车销售数据 一.实验目的 1. 熟悉清理数据的流程: 2. 分析Ebay二手车销售数据: 3. 了解jupyter notebook为pandas提供的一些独特特性. 二.实验开发环 ...
- mysql-添加、删除索引
-- 添加联合唯一索引 alter table b_report_file add unique index nc (name, code, org_id); -- 删除索引 ALTER TABLE ...
- Redis之哈希分片原理一致性哈希算法与crc16算法
集群分片模式 如果Redis只用复制功能做主从,那么当数据量巨大的情况下,单机情况下可能已经承受不下一份数据,更不用说是主从都要各自保存一份完整的数据.在这种情况下,数据分片是一个非常好的解决办法. ...
- 发布DDD脚手架到Maven仓库，IntelliJ IDEA 配置一下即可使用
作者:小傅哥 博客:https://bugstack.cn 项目:https://gaga.plus 沉淀.分享.成长,让自己和他人都能有所收获! 大家好,我是技术UP主,小傅哥. 这篇文章将帮助粉丝 ...
- netcore 图片缩略图
/// <summary> /// 取小写文件名后缀 /// </summary> /// <param name="name">文件名< ...