css字体样式+文本样式
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字体样式+文本样式的更多相关文章
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- 【CSS学习】--- 文本样式
一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- css 字体、文本、padding的样式
一.字体的样式: 1)字体倾斜:font-style:italic 2)字体大小:font-size 一般为偶数. 3)行高:line-height 当行高为奇数的时候,是文字上面比文字下面的少一 ...
- css 基础 字体和文本样式
字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...
- [Web 前端] 009 css 常用的文本样式设置
常用的文本 css 样式 概览 参数 释义 举例 color 设置文字的颜色 color:red; font-size 设置文字的大小 font-size:12px; font-family 设置文字 ...
- 前端之CSS字体和文本类属性
一.字体类属性: 1.字体类型: font-family:字体1,字体2,字体3; 常用写法: font-family:"微软雅黑",Arial; 注:a) 多个字体之间用逗号分隔 ...
- CSS颜色、单位、文本样式
一.CSS颜色:关键字 red16进制的6位 #ffffff16进制的3位 #fffrgb(0,255,100) 取值范围:0~255 (r:red.g:green.b:blue)rgba(0,255 ...
- 7. CSS装饰网页的样式
CSS中有哪些用来装饰网页的样式呢?在这里我们对一些常用的样式做了总结. 字体样式 /* * 一般样式书写 */ .font_style_1{ font-family: "华文行楷" ...
随机推荐
- Docker Mysql部署与使用
参考链接:Docker 安装 Mysql 详解
- C语言创建文件
问题需求:使用程序创建一个文件(当该文件不存在时则创建). 代码如下: // 创建文件 void CreateFile() { //文件指针 FILE *fileP; char fileName[] ...
- Lambda 表达式入门,看这篇就够了
说出来怕你们不相信,刚接到物业通知,疫情防控升级了,车辆只能出不能进,每户家庭每天可指派 1 名成员上街采购生活用品.这不是谣言,截个图自证清白,出自洛阳市湖北路街道处. 看来事态严峻,这样看似好心, ...
- 如何快速打好Java基础?
二哥,我是一名大学生,专业是电力工程,但想自学 Java,如何快速打好基础呢? 微信上 tison 向我提出了这个问题.我想我是有资格来回答的,从北京奥运会那年开始学 Java,到现在已经有 10 多 ...
- Codeforces_734_F
http://codeforces.com/problemset/problem/734/F x|y + x&y = x+y. #include<iostream> #includ ...
- ARTS Week 9
Dec 23, 2019 ~ Dec 29, 2019 Algorithm Problem 69 Sqrt(x) 实现求解平方根函数Sqrt(x) 题目链接 题目描述:给定一个非负数x,求解该数字的平 ...
- MySQL必知必会官方提供的数据库和表
创建表 Create customers table CREATE TABLE customers ( cust_id int NOT NULL AUTO_INCREMENT, cust_name c ...
- 基于 Serverless Component 全栈解决方案 Ⅱ
虽然之前的文章 基于 Serverless Component 的全栈解决方案 介绍了如何借助 Serverless Component 快速搭建 Restful API 后端服务 和 Vue.js ...
- python中调用函数时,参数顺序与参数赋值问题
设置类和函数如下:class MM(): def ff(self,url(1),method(2),data=None(3),cookie=None(4)): if method.lower()==& ...
- Elasticsearch原理学习--为什么Elasticsearch/Lucene检索可以比MySQL快?
转载于:http://vlambda.com/wz_wvS2uI5VRn.html 同样都可以对数据构建索引并通过索引查询数据,为什么Lucene或基于Lucene的Elasticsearch会比关系 ...