font-family属性值:具体字体名或者字体集

如果是中文或者有单词之间有空格,需要加双引号

字体集:

Serif (有装饰线)

Sans-serif (无装饰线)

Monospace

Cursive

Fantasy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{
font-family: "Times New Roman";
}
p{
font-family: "微软雅黑","宋体","黑体",sans-serif;
}
</style>
</head>
<body>
<h1>css层叠样式表</h1>
<p>什么是css层叠样式表呢?</p>
</body>
</html>

font-size 相对单位

px (受显示器分辨率影响,在手机端一般不使用)

em (针对父元素)

% (针对父元素)

字体颜色

可查询web安全色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*rgb数字:0~255*/
h1{
color:rgb(0,255,0);
}
/*rgb百分比:0%~100%*/
p{
color:rgb(0%,100%,0%);
}
p.spe{
color:#008800;/*#开头,六位,0~F*/
color:#080;/*简写*/
}
</style>
</head>
<body>
<h1>css层叠样式表</h1>
<p>什么是css层叠样式表呢?</p>
<p class="spe">颜色十六进制</p>
</body>
</html>

font-variant:small-caps 小型大写字母

css文本样式

text-align 只对块级元素有效:可以在元素外嵌套块级元素,给外元素添加text-align属性

margin:0 auto; 也可以设置元素居中显示

line-height

实际开发中,行高一般使用em单位,与字体大小相关

浏览器默认行高一般是1.2em

行高可以继承自父元素,继承的是计算后的值,而不是直接继承百分比

首行缩进 text-indent

vertical-align 对行内元素或者单元格元素生效

可以用在图片上 vertical-align:middle;

或者可以用具体的数值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
height:400px;
width:500px;
border:1px solid;
display: table;/*转为表格元素*/
}
.content{
vertical-align: middle;
text-align:center;
display: table-cell;/*转为单元格元素*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<p>什么是<span class="sub">css</span>层叠样式表呢?</p>
<p>什么是<span class="super">css</span>层叠样式表呢?</p>
</div>
</div> </body>
</html>

word-spacing 单词间距

letter-spacing 字母间距

单词的判断以空格为准

text-transform:capitalize | uppercase | lowercase | none 设置文字大小写

text-decoration:underline | line-through | overline | none 设置文字装饰线

也可以设置多个样式 text-decoration:underline overline;

css字体样式+文本样式的更多相关文章

  1. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  2. 【CSS学习】--- 文本样式

    一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...

  3. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  4. css 字体、文本、padding的样式

    一.字体的样式: 1)字体倾斜:font-style:italic 2)字体大小:font-size 一般为偶数. 3)行高:line-height   当行高为奇数的时候,是文字上面比文字下面的少一 ...

  5. css 基础 字体和文本样式

    字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...

  6. [Web 前端] 009 css 常用的文本样式设置

    常用的文本 css 样式 概览 参数 释义 举例 color 设置文字的颜色 color:red; font-size 设置文字的大小 font-size:12px; font-family 设置文字 ...

  7. 前端之CSS字体和文本类属性

    一.字体类属性: 1.字体类型: font-family:字体1,字体2,字体3; 常用写法: font-family:"微软雅黑",Arial; 注:a) 多个字体之间用逗号分隔 ...

  8. CSS颜色、单位、文本样式

    一.CSS颜色:关键字 red16进制的6位 #ffffff16进制的3位 #fffrgb(0,255,100) 取值范围:0~255 (r:red.g:green.b:blue)rgba(0,255 ...

  9. 7. CSS装饰网页的样式

    CSS中有哪些用来装饰网页的样式呢?在这里我们对一些常用的样式做了总结. 字体样式 /* * 一般样式书写 */ .font_style_1{ font-family: "华文行楷" ...

随机推荐

  1. Arduino系列之pwm控制LED灯(呼吸灯)

    下面我将写出最简单控制呼吸灯的方法 void setup()                                 // { pinMode(12,OUTPUT);             ...

  2. Python小白入门题一——文件增删改

    题目描述:用python对文件进行增(创建一个文件).删(删除一个文件).改(重命名)操作. 说明:新建了一个文件夹files存放新增的两个文件,随后这两个文件被批量重命名成“数字.txt”,之后这两 ...

  3. 机器学习(ML)七之模型选择、欠拟合和过拟合

    训练误差和泛化误差 需要区分训练误差(training error)和泛化误差(generalization error).前者指模型在训练数据集上表现出的误差,后者指模型在任意一个测试数据样本上表现 ...

  4. Web框架之Gin介绍及使用

    Gin是一个用Go语言编写的web框架.它是一个类似于martini但拥有更好性能的API框架, 由于使用了httprouter,速度提高了近40倍. 如果你是性能和高效的追求者, 你会爱上Gin. ...

  5. MVVM框架(二)---生命周期

    一.Vue 生命周期图解: 这张图是官方给出的,大家可能都看过.其中我们重点讲述以下几个钩子函数: beforeCreate  -->   created beforeMount   --> ...

  6. Yandex Big Data Essentials Week1 Unix Command Line Interface File Content exploration

    cat displays the contents of a file at the command line copies or apppend text file into a document ...

  7. 15-Git使用语法

    Git命令 版本库的创建 方法一:使用git bash 1. 在当当前要加创建版本库的文件夹右键使用GitBash 创建仓库执行命令: $ git init 方法二:使用TortoiseGit 2. ...

  8. LDAP安装

    一.介绍 LDAP 全称:Lightweight Directory Access Protocol,即“轻量级目录访问协议”. LDAP目录以树状的层次结构来存储数据.如果你对自顶向下的DNS树或U ...

  9. 1282 - Leading and Trailing 求n^k的前三位和后三位。

    1282 - Leading and Trailing You are given two integers: n and k, your task is to find the most signi ...

  10. oracle数据库的启动、关闭、连接

    登陆数据库 方法一: $ sqlplus / as sysdba [oracle@dev /]$ sqlplus / as sysdba SQL*Plus: Release Production on ...