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 始 ...
随机推荐
- ZYNQ SD卡 CDn管脚的作用
## 什么 是CDn? card detect, active low,用于指示当前SD卡是否插入,主机通过检测CD脚的状态来识别当前SD卡的状态. CD可以连接到MIO或者EMIO的任意空闲管脚,通 ...
- FPGA MCS文件为什么比BIN文件烧录快
原因 Xilinx FPGA固化FPGA程序到FLASH时,可以选择使用MCS或者BIN格式,BIN是纯二进制文件,MCS是ASCII格式的文本文件. MCS是Intel早期为MCS系列 II ISI ...
- 用容器部署Nexus 3作为Nuget和Docker的仓库
1.准备docker-compose的配置文件 version: '3' services: nexus: image: 'sonatype/nexus3:3.42.0' container_name ...
- RibbonRoutingFilter是如何工作的
在讲RibbonRoutingFilter是如何工作之前,也有一些比较重要的类需要去提前了解. 重要的类 RequestContext 请求上下文,用于存储线程中对应的请求以及响应 public cl ...
- SpringMvc原理概述
目录 MVC整体架构和流程 SpringMVC 框架组件概述 SpringMVC 配置详解 springmvc.xml MVC整体架构和流程 用户发送请求至前端控制器 DispatcherServle ...
- RocketMQ(3) 根据消息key查询功能的实现: indexFile
三: indexFile 除了通过通常的指定Topic进行消息消费外,RocketMQ还提供了根据key进行消息查询的功能. 该查询是通过store目录中的index子目录中的indexFile进行索 ...
- Android drawable与mipmap的区别（android资源文件放置位置）
1.Drawable Android 把可绘制的对象抽象为Drawable,不同的图形图像代表着不同的darwable类型, 通常我们在代码中不会直接接触drawable实现类的,是由android ...
- Java 小案列 this关键字使用+构造器 +方法+调用
1 package com.bytezero.thistest; 2 3 public class Boy 4 { 5 private String name; 6 private int age; ...
- GitHUb上渗透测试工具
来自GitHub的系列渗透测试工具渗透测试 Kali - GNU / Linux发行版,专为数字取证和渗透测试而设计.(https://www.kali.org/)ArchStrike - 为安全专业 ...
- CPNtools协议建模安全分析---实例库所标记（四）
1.我们经常使用弧上单个变量表达式来过滤数据类型,如果是多个类型的变量可以嵌套写 像上面的的 库所标记的数值 1·(2,5,"a")++ 那么弧表达式会根据要求来过滤 ...