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的文本样式的更多相关文章

  1. css笔记-文本样式

    聊聊text-decoration.text-indent.text-transform.letter-spacing.word-spacing.vertical-align.下面是一些常用设置文本样 ...

  2. css笔记——文本样式

    聊聊text-decoration.text-indent.text-transform.letter-spacing.word-spacing.vertical-align.下面是一些常用设置文本样 ...

  3. （3）css文本样式

    本篇学习资料主要讲解: 如何用css 的样式定义方法来介绍文字的使用. 第(1)节:用css设置文本样式.                       一.弄懂文本文字的制作.利用css的样式定义版面 ...

  4. CSS中常见的6种文本样式

    前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...

  5. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  6. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  7. 重温CSS之背景、文本样式

    CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...

  8. 6.css文本样式

    文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...

  9. HTML和CSS前端教程03-CSS文本样式

    目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...

随机推荐

  1. 【转】关于apt源配置的问题

    涉及的基本配置文件: apt核心配置文件集中在 /etc/apt 其中,管理软件来源的配置文件如下 sources.list                           // 主要软件源 so ...

  2. [LeetCode] [链表] 相关题目总结

    刷完了LeetCode链表相关的经典题目,总结一下用到的技巧: 技巧 哑节点--哑节点可以将很多特殊case(比如:NULL或者单节点问题)转化为一般case进行统一处理,这样代码实现更加简洁,优雅 ...

  3. 如何在命令行添加换行符到git commit -m "xxx"

    需求来源: 需要将自动识别的组件信息.更新信息.任务跟踪单号.下载链接等信息自动提交并推送至gerrit, 然后作为触发条件启动另一个协作业务流程. 方法1:单引号开放方法 git commit -m ...

  4. Python常用库 - os库

    os简单介绍 os 模块提供了非常丰富的方法用来处理文件和目录 os关于目录路径的方法 # 获取当前路径 path = os.getcwd() # 获取当前绝对路径 os.path.abspath(p ...

  5. android button的selector

    实现按钮的selector <?xml version="1.0" encoding="utf-8"?> <selector xmlns:an ...

  6. js是什么？js可以做什么？js的构成与学习方向

    js(百度官方介绍javascript)编程的基本语言学习目标是:a.怎么写和运行js脚本b.理解变量和值c.学会简单的数学运算符d.数据类型是什么e.流程控制 对于JavaScript的背景知识和结 ...

  7. mysql在建表语句中添加索引

    普通索引创建 创建普通索引,即不添加 UNIQUE.FULLTEXT 等任何参数. [例]创建表名为 score 的数据表,并在该表的 id 字段上建立索引,SQL 语句如下: CREATE tabl ...

  8. watch实现监听Vuex状态监听(利用computed)

    Vuex 通过 store 选项,提供了一种机制将状态从根组件"注入"到每一个子组件中(需调用 Vue.use(Vuex)):通过在根实例中注册 store 选项,该 store ...

  9. 爬虫数据存储——安装docker和ElasticSearch(基于Centos7)

    爬虫数据存储--安装docker和ElasticSearch(基于Centos7) 先决条件 操作系统要求 要安装Docker Engine-Community,您需要一个CentOS 7的维护版本. ...

  10. SQLserver 行变列。

    首先看看效果是不是想要的 变成 ok,我的效果达到了.那就记录下代码吧. create table temp1(count_ int,memo nvarchar(40))go insert into ...