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. 珠峰-node

    ##### 文件流的读写. ##### 文件流对pipe的封装. ####

  2. Vue.js 从源码理解v-for和v-if的优先级的高低

    在vue.js里面,v-for和v-if是可以一起使用作用在某个元素上,网上看到一篇文章说永远不要把v-for和v-if同时用在同一个元素上,感觉有点瞎扯,官网也注明了可以一起使用的,还把两个指令的优 ...

  3. 常见Linux命令学习

    Linux命令学习 命令分类: 文件处理命令 权限管理命令 文件搜索命令 帮助命令 用户管理命令 压缩解压命令 网络命令 关机重启命令 1.文件处理命令 命令格式:命令 [-选项] [参数] 例:ls ...

  4. Linux学习Day3：新手必须掌握的Linux命令（二）

    今天学习的命令都是运维工作中经常要用到的,非常实用,必须要用心学习,争取把这些命令烂熟于心,具体内容如下: 一.系统状态监测命令 1.ifconfig命令 用于获取网卡配置与网络状态等信息. [roo ...

  5. PMP--1.5 项目管理描述

    项目所处的环境将影响每个项目管理过程的实施方式以及项目制约因素的优先顺序. 一. 管理一个项目的过程 ​管理一个项目通常包括(但不限于): 1. 识别项目需求 2. 处理相关方的各种需要.关注和期望 ...

  6. 小白的linux笔记8：linux自动运行爬虫并发送提醒邮件

    有了成功运行的爬虫后,希望能每天定时运行,且遇到错误时能及时发出提醒. 发出提醒 可以用mailx发出邮件做提醒.没有的话先安装Yum install mailx. 以qq邮箱为例,需要设置/etc/ ...

  7. Python 实现选择排序

    选择排序算法步骤: 找到数组中最小的那个元素中, 将它和数组的第一个元素交换位置, 在剩下的元素中找到最小的元素,将它和数组的第二个元素交换位置, 如此往复,知道将整个数组排序. 逐步分析: 假设一个 ...

  8. 卸载软件后，win10应用与功能中仍有残留，解决方案。

    这个问题我已经找到解决办法了,首先打开“应用和功能”列表, 然后往下拉看到“相关设置”打开其中的“程序和功能”一项, 然后找出你想删除的应用进行卸载.

  9. 《茶余饭后小故事》MV*、MVC、MVP、MVVM的前世今生

    今天我们讲讲历史,讲讲故事,不扯高深术语. MV*表示的意思是:M(Model逻辑层) + View(视图层) + *(中间者).上帝提出了这个逻辑与视图分离,用中间者进行连接的伟大思想,并将实现这个 ...

  10. 搭建网页HTML结构

    div 块级标签 span 行内标签 <!DOCTYPE html> <html lang="en"> <head> <meta char ...