CSS的文本样式
CSS的文本样式
1、颜色
2、文本对齐方式
3、首行缩进
4、行高
5、装饰
1. 文本位置
居中： text-align: center;
靠左： text-align: left;
靠右： text-align: right;
首行缩进：text-indent: 2em; //首行缩进2个字
行高：当行高和块的高度一致时，就可以实现上下居中效果(单行文字上下居中)：(两行代码)
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="p1">
宋钢：“要是换成你，你会怎么办?”
</p>
<p class="p2">
李光头：“要是换成我，我就宰了你!”
</p>
<p class="p3">
宋钢：“我是你的兄弟啊?”
</p>
<p class="p4">
李光头：“兄弟也一样宰了。”
</p>
<p class="p5">
出自：余华的小说《兄弟》。
</p>
</body>
</html>
CSS：
/*
类选择器：. 类名字{}
*/
.p1 {
font-family: 楷体;
}
.p2 {
font-size: 30px;
}
.p3 {
font-weight: bold;
}
.p4 {
color: red;
}
.p5 {
font: oblique bolder 16px "楷体";
}
效果：
2. 伪类
伪类：用来添加一些选择器的特殊效果。
如下：原本是黑色，鼠标放上去就是橘色：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
<a href="">点击我</a>
</p>
</body>
</html>
CSS：
a:hover {
color: #ffae15;
}
效果：
CSS的文本样式的更多相关文章
- css笔记-文本样式
聊聊text-decoration.text-indent.text-transform.letter-spacing.word-spacing.vertical-align.下面是一些常用设置文本样 ...
- css笔记——文本样式
聊聊text-decoration.text-indent.text-transform.letter-spacing.word-spacing.vertical-align.下面是一些常用设置文本样 ...
- （3）css文本样式
本篇学习资料主要讲解: 如何用css 的样式定义方法来介绍文字的使用. 第(1)节:用css设置文本样式. 一.弄懂文本文字的制作.利用css的样式定义版面 ...
- CSS中常见的6种文本样式
前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...
- 重温CSS之背景、文本样式
CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...
- 6.css文本样式
文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...
- HTML和CSS前端教程03-CSS文本样式
目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...
随机推荐
- JDBC 及 sql注入问题
一.相关概念 1.什么是JDBC JDBC(Java Database Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由 ...
- opencv —— convexHull 寻找并绘制凸包
凸包的定义: 包含点集 S 所有点的最小凸多边形称为凸包. 凸包绘制原理:Graham 扫描法 首先选择 y 方向上最低的点作为起始点 p0. 然后以 p0 为原点,建立极坐标系,做逆时针极坐标扫描, ...
- 发布到IIS的php网站，所有的页面打开都是空白，目录权限问题，已解决
查了下,html可以打开,百度下原因,是网站目录没有写权限所致,修改下权限正常显示
- 剑指offer-面试题58_2-左旋转字符串-字符串
/* 题目: 将字符串的前sep个字符转移到字符串尾部. */ /* 思路: 更好的方法: 先翻转前sep个字符,再翻转后面的字符,最后全体翻转. */ #include<iostream> ...
- （未完成）【Android】MVP模式初见（一）
最近在阅读郭霖大神的公众号时,分类中架构引起了我的注意. 虽然是个人开发(水平很菜的那种),但最终都要向企业正式项目开发靠近.因此接下来一段时间,主要学习一下MVP架构.Retrofit以及RxJav ...
- elsearch搜索引擎 + painless脚本语言入门
最近项目用到了elsearch,ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎. 自从版本6.0之后,其默认脚本语言变为 painless . ...
- cf936B
题意简述:给出一个有向图,问从s出发是否能找到一条长度为奇数的路径并且路径的端点出度为0,存在就输出路径,如果不存在判断图中是否存在环,存在输出Draw,否则输出lose 题解:类似于DP,将每一个点 ...
- 已发布的WEB项目，如何挂在服务器或者本机的IIS下
第一步:打开IIS,在打开的IIS中,右击 “Default Web Site”,在弹出对话框中选择“新增应用程式”,参照如下图,设置相应参数. 第二步:在已经发布的项目文件系统添加在站点下后,点击项 ...
- 纪中21日c组模拟赛
AWSL AWSL AWSL AWSL AWSL AWSL AWSL AWSL AWSL AWSL AWSL AWSL AWSL AWSL AWSL AWSL 题解传送 T1 ...
- c#---out参数
一个方法有多个返回值时,返回值类型相同可以返回一个数组 static void Main(string[] args) { , , , , , , , , , }; int[] result = Ge ...