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: "华文行楷" ...
随机推荐
- SQL 两个时间段 不能重复语句
DECLARE @BeginDate datetime; DECLARE @EndDate datetime; set @BeginDate='2015-03-2' set @EndDate='201 ...
- 关于2D渲染的一些小想法
原文地址 概述 . 这个项目最初的目的是为了尝试解析现有的UI编辑器(MyGUI)导出的UI布局信息,通过ImGUI还原UI渲染.但是在开发过程中,我发现可以借此实现一个编辑器,一个我不断的寻找,但始 ...
- 西门子PLC在自动浇灌系统中的应用
西门子PLC在自动浇灌系统中的应用(鸿控整理) 2020-02-07 22:50:48 1 自动浇灌系统简介 系统采用自行研制的湿度传感器监测土壤的湿度情况,当土壤湿度低于所要求的值后,自动开启水泵电 ...
- WTL设置对话框背影色
MainDlg.h // MainDlg.h : interface of the CMainDlg class // //////////////////////////////////////// ...
- nginx 源码编译 用OPENSSL源码 开启 SSL
./configure --prefix=/usr/local/nginx --with-openssl=/home/uniqs/thirdparty/openssl/openssl-1.1.1d - ...
- Vmware初次安装虚拟机需要做的一些网络配置——nat模式与桥接模式
一.本机设置: 1.首先点击图中红线区域: 2.点击网络适配器 3.会出现如下区域: 4.网卡开启后设置ip地址,此处设置的ip和本机的ip没有关系,设置成你虚拟机里面运行的计算机需要的ip地址网段 ...
- Python趣味入门02: 妥妥地安装配置Python(Windows版)
< 上一篇:Python趣味入门01:你真的了解Python么? 本篇内容手把手教您如何去网上下载安装Python的运行环境,本文写于2020年Python稳定的版本是3.8,Windows流行 ...
- 小cookie,大智慧
Cookie是什么?cookies是你访问网站时创建的数据片段文件,通过保存浏览信息,它们使你的在线体验更加轻松. 使用cookies,可以使你保持在线登录状态,记录你的站点偏好,并为你提供本地化支持 ...
- Java TreeMap使用方法
1.使用默认的TreeMap 构造函数,其中key值需要有比较规则. 2.使用默认的TreeMap 构造函数,Key中添加自定义类型,自定义类型必须继承Comparator. 3.使用比较器类来来实现 ...
- 《自拍教程17》Python调用命令
他山之石 何为他山之石,就是借助外界工具,来实现自己想要的功能. 命令行界面软件, 即各种命令,我们也叫命令行工具, 此类工具也是测试人员或者开发人员常用的工具的一种. 测试人员可以借助这类工具,快速 ...