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. C++ 常用编程--Swap函数有几种写法？

    C++ 常用编程--Swap函数有几种写法? 在说C++模板的方法前,我们先想想C语言里面是怎么做交换的. 举个例子,要将两个int数值交换,是不是想到下面的代码: void swap(int& ...

  2. java开发规范学习

    from 慕课网-明明如月-<阿里巴巴的Java开发手册> Integer缓存问题分析 1, Integer缓存[-128, 127]的数字,除此之外,将通过new创建. Long也是缓存 ...

  3. ABP框架迁移到Mysql

    ABP框架 .NetCore3.x版本 1.首先找到xxx.Core 项目,添加引用Microsoft.EntityFrameworkCore.Tools 2.找到xxx.EntityFramewor ...

  4. Android中使用SeekBar拖动条实现改变图片透明度

    场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改为Lin ...

  5. Windows CMD 输出文本到文件，不加换行符

    >test.txt set /p="Hello" <nul >>test.txt set /p=" world!" <nul 正文 ...

  6. 《Git 从入门到体系》- 写给自己的话

    我听过的对我很有冲击力的观点是:知识不成体系就是垃圾.这个观点不一定对,但是却是给我的冲击很大. 我记得以前在咖啡馆和一个博士医生聊天,他提出了这个观点:知识不成体系就是垃圾.听了这个观点我很想反驳他 ...

  7. Resnet——深度残差网络（二）

    基于上一篇resnet网络结构进行实战. 再来贴一下resnet的基本结构方便与代码进行对比 resnet的自定义类如下: import tensorflow as tf from tensorflo ...

  8. P1832题解 A+B Problem（再升级）

    万能的打表 既然说到素数,必须先打素数表筛出素数, 每个素数可以无限取,这就是完全背包了. 这次打个质数表: bool b[1001]={1,1,0,0,1,0,1,0,1,1,1,0,1,0,1,1 ...

  9. Android8.0自定义广播接收不到问题

    https://blog.csdn.net/kongqwesd12/article/details/78998151

  10. 【剑指Offer】62、序列化二叉树

    题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得内存中建立起来的二叉树可以持久保存.序列化可以基于先序. ...