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. Docker Mysql部署与使用

    参考链接:Docker 安装 Mysql 详解

  2. C语言创建文件

    问题需求:使用程序创建一个文件(当该文件不存在时则创建). 代码如下: // 创建文件 void CreateFile() { //文件指针 FILE *fileP; char fileName[] ...

  3. Lambda 表达式入门,看这篇就够了

    说出来怕你们不相信,刚接到物业通知,疫情防控升级了,车辆只能出不能进,每户家庭每天可指派 1 名成员上街采购生活用品.这不是谣言,截个图自证清白,出自洛阳市湖北路街道处. 看来事态严峻,这样看似好心, ...

  4. 如何快速打好Java基础?

    二哥,我是一名大学生,专业是电力工程,但想自学 Java,如何快速打好基础呢? 微信上 tison 向我提出了这个问题.我想我是有资格来回答的,从北京奥运会那年开始学 Java,到现在已经有 10 多 ...

  5. Codeforces_734_F

    http://codeforces.com/problemset/problem/734/F x|y + x&y = x+y. #include<iostream> #includ ...

  6. ARTS Week 9

    Dec 23, 2019 ~ Dec 29, 2019 Algorithm Problem 69 Sqrt(x) 实现求解平方根函数Sqrt(x) 题目链接 题目描述:给定一个非负数x,求解该数字的平 ...

  7. MySQL必知必会官方提供的数据库和表

    创建表 Create customers table CREATE TABLE customers ( cust_id int NOT NULL AUTO_INCREMENT, cust_name c ...

  8. 基于 Serverless Component 全栈解决方案 Ⅱ

    虽然之前的文章 基于 Serverless Component 的全栈解决方案 介绍了如何借助 Serverless Component 快速搭建 Restful API 后端服务 和 Vue.js ...

  9. python中调用函数时,参数顺序与参数赋值问题

    设置类和函数如下:class MM(): def ff(self,url(1),method(2),data=None(3),cookie=None(4)): if method.lower()==& ...

  10. Elasticsearch原理学习--为什么Elasticsearch/Lucene检索可以比MySQL快?

    转载于:http://vlambda.com/wz_wvS2uI5VRn.html 同样都可以对数据构建索引并通过索引查询数据,为什么Lucene或基于Lucene的Elasticsearch会比关系 ...