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 ...
随机推荐
- rfc文档
你会看到很多网上关于标准的rfc文档. 如何阅读rfc 文档. https://juejin.im/post/5bf1948ff265da61553a6c97 从一个普通的RFC文档上升到Intern ...
- python新手如何编写一个猜数字小游戏
此文章只针对新手,希望大家勿喷,感谢!话不多说先上代码: import random if __name__ == '__main__': yourname = input("你好! 你的名 ...
- c语言double类型的输入
double输入用 %lf ,而不能用 %f 今天在使用double类型输入时先用了 scanf("%lf", &a),结果以%f输出的时候都是0,以%g,%e输出似乎是最 ...
- golang单元测试简述
Golang中内置了对单元测试的支持,不需要像Java一样引入第三方Jar才能进行测试,下面将分别介绍Golang所支持的几种测试: 一.测试类型 Golang中单元测试有功能测试.基准测试. ...
- 头部布局，搜索验证和AJAX自动搜索提示，并封装成组件，提高代码复用性
index.html 头部区结构和样式 效果图 静态样式 index.html中的部分 <!-- 头部 --> <div class="header"> & ...
- MFC/QT 学习笔记（二）——MFC入门
MFC以C++形式封装了Windows API //实践 编写MFC需要的头文件#include <afxwin.h> 程序执行流程: 实例化应用程序对象(有且只有一个) 执行程序入口函数 ...
- Django csrf校验
引入: 通常,钓鱼网站本质是本质搭建一个跟正常网站一模一样的页面,用户在该页面上完成转账功能 转账的请求确实是朝着正常网站的服务端提交,唯一不同的在于收款账户人不同. 如果想模拟一个钓鱼网站,就可是给 ...
- 4.python流程控制语句介绍
流程控制语句分类 1).顺序结构 2).判断结构 3).循环结构 判断结构 特点:如果 ... 否则 ... 格式一: ① if 条件表 ...
- 根据js轮播图原理写出合理的结构与样式、并实现js交互效果
在JS中,能用 . 的地方一般都可以用 [ ] 取代 index.html <!DOCTYPE html> <html lang="en"> <hea ...
- P2853 [USACO06DEC]牛的野餐Cow Picnic
------------------------- 长时间不写代码了,从学校中抽身出来真的不容易啊 ------------------------ 链接:Miku ----------------- ...