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#个推SDK推送安卓+iOS

    下载个推SDK,找到这两个dll直接引用. using引用 using com.gexin.rp.sdk.dto; using com.igetui.api.openservice; using co ...

  2. Spring Boot 2从入门到放弃(持续更新)

    入门 Spring Boot 2项目的搭建和启动(入门篇1) Spring Boot 2项目的搭建和启动(入门篇2) spring boot 2项目自定义父pom Spring Boot 2开发工具s ...

  3. 推荐一款疫情期间适合在家办公的远程工具,仅需IP和密码轻松实现远程管理

    这段时间,受疫情影响,很多企业都开启了居家办公模式.但疫情突发,大多数人的办公资料没有拷贝打包,对于居家办公的人,尤其是运维人员来说,很难完成顺利完成工作. 像向日葵.teamviewer之类的远程软 ...

  4. 查找第K大的值

    这种题一般是给定N个数,然后N个数之间通过某种计算得到了新的数列,求这新的数列的第K大的值 POJ3579 题意: 用$N$个数的序列$x[i]$,生成一个新序列$b$. 新的序列定义为:对于任意的$ ...

  5. Dijkstra算法2

    // 再来一手精髓的Dijkstra // 复杂度O( E*log(V) ) #include <cstdio> #include <iostream> #include &l ...

  6. Django之F与Q查询

    F查询 from django.db.models import F,Q # 1.查询库存数大于卖出数的书籍 res = models.Book.objects.filter(kucun__gt=F( ...

  7. C#_Excel数据读取与写入_自定义解析封装类_支持设置标题行位置&使用excel表达式收集数据&单元格映射&标题映射&模板文件的参数数据替换

    本篇博客园是被任务所逼,而已有的使用nopi技术的文档技术经验又不支持我需要的应对各种复杂需求的苛刻要求,只能自己造轮子封装了,由于需要应对很多总类型的数据采集需求,因此有了本篇博客的代码封装,下面一 ...

  8. vue 注意

    Path Intellisense 插件 @路径提醒 配置文件中配置: "path-intellisense.mappings": { "@": "$ ...

  9. 2.Android网络编程-web介绍以及Tomcat安装使用

    1.CS和BS CS:Client/Server 客户端和服务器,这种软件往往需要安装.比如QQ.迅雷.播放器. 优点 :  可以减轻服务器端压力,将部分代码写到客户端,并且界面很美观. 缺点 :  ...

  10. python数据类型(总结篇)

    世界上最容易的事是坚持,最难的事也是坚持.开通博客园已两月有余,但实际上笔者本人的活跃度非常低,痛定思痛,自己选的路含泪也要走下去,继续坚持! 本文承接前几个月的python数据类型系列,完成对字典与 ...