常用的应用文本的css样式：

（1）color 设置文字和颜色，如：color:red;

（2）font-size 设置文字的大小，如：font-size:20px;

（3）font-family 设置文字的字体，如：font-family:’微软雅黑’;

（4）font-style 设置字体是否倾斜，如：font-style:’normal’;设置不倾斜，font-style:’italic’;设置文字倾斜

（5）font-weight设置文字是否加粗，如：font-weight:bold;设置加粗 font-weight:normal设置不加粗

（6）line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;

（7）font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：
　　  font:是否加粗 字号/行高 字体;  如：font:mormal 12px/36px ‘微软雅黑’;
（8）text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
（9）text-indent 设置文字首行缩进，如：text-indent:40px; 设置文字首行缩进40px
           一般一个中文是20px
（10）text-align 设置文字水平对齐方式，如：text-align:center 设置文字水平居中

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>常用文本样式</title>

    <style type="text/css">

        div{

            font-size:20px;  /* 字体大小 */

            color:green;     /* 字体颜色 */

            font-family:'Microsoft YaHei';  /* 字体：微软雅黑 */

            line-height:40px;  /* 字体行高，行高包括：所在行的文字+上下行间距 */

            /*text-decoration:underline;*/

            text-indent:40px;  /* 设置首行缩进，一般一个中文是20px */

        }

        em{

            font-style:normal;    /* 字体不斜体 */

            color:gold;

        }

        span{

            font-size:40px;

            color:red;

        }

        h1{

            font-weight:normal;   /* 字体不加粗 */

        }

        a{

            text-decoration:none;  /* 去掉下划线 如：去掉链接的下划线 */

            text-align:center;

        }

        p{

            text-align:center;  /* 设置文本水平居中 p标签默认的宽度是整体网页的宽度 */

        }

    </style>

</head>

<body>

    <h1>样式演示</h1>

    <div>

        <span>HTML</span>是<em>Hyper Text Mark-up Language</em>（超文本标记语言）的首字母简写，

        超文本是指超链接，标记指的是标签，是一种用来制作网页的语言，这种

        语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，

        文件的扩展名为html或htm，一个html文件就是一个网页，html文件用编辑

        器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览

        器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接

        跳转到另一个网页。

    </div>

    <br />

    <a href="https://www.baidu.com">百度的链接</a>

    <p>这是一个p标签</p>

</body>

</html>

css 文本设置的更多相关文章

  1. css文本设置

    常用的应用文本的css样式: color 设置文字的颜色,如: color:red; font-size 设置文字的大小,如:font-size:12px; font-family 设置文字的字体,如 ...

  2. CSS-基本语法/引用/文本设置/选择器/css3属性

    CSS-基本语法/引用/文本设置 css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设 ...

  3. CSS-07-CSS文本设置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  5. CSS之背景设置、字体设置、文本设置

    <html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title& ...

  6. CSS文本简单设置

    文本的设置直接影响到用户对界面的感受,好的文本设置能够让用户对界面有一种赏心悦目的感受,在这地方我们来简单的说说说对文本设置的时候,有哪些格式. 文本设置的时候我们应该注意什么: 平时我们文本设置的时 ...

  7. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...

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

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

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

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

随机推荐

  1. Python 之ConfigParser模块

    一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.section 下面为类似于key-value 的配置 ...

  2. [物理学与PDEs]第1章第3节 真空中的 Maxwell 方程组, Lorentz 力 3.2 Lorentz 力

    1. Lorentz 假定, 不论带电体的运动状态如何, 其所受的力密度 (单位体积所受的力) 为 $$\bex {\bf F}=\rho {\bf E}+{\bf j}\times{\bf B} = ...

  3. [物理学与PDEs]第1章第2节 预备知识 2.1 Coulomb 定律, 静电场的散度与旋度

    1. Coulomb 定律, 电场强度 (1) 真空中 $P_1$ 处有电荷 $q_1$, $P$ 处有电荷 $q$, ${\bf r}_1=\vec{P_1P}$, 则 $q$ 所受的力为 $$\b ...

  4. 02 Redis关闭服务报错---(error) ERR Errors trying to SHUTDOWN. Check logs.

    127.0.0.1:6379> shutdown (error) ERR Errors trying to SHUTDOWN. Check logs. 1.在redis.conf中修改日志文件的 ...

  5. 《11招玩转网络安全》之第一招：Docker For Docker

    玩转黑客那些工具,缺少了虚拟机怎么行,除了用虚拟机虚拟整个系统,Docker也不能缺少,读者只需要知道,Docker只虚拟Linux系统中的某个程序就可以了.本节就来介绍Linux下安装设置Docke ...

  6. RC522射频卡读写模块驱动（仅读取）

    目录 说明 测试结果 main RC522.h RC522.c 说明 更改了网上的源代码,仅保留了读取序列号并通过串口回传的功能.版本号:V1 感谢 https://blog.csdn.net/qq_ ...

  7. java获取上个星期第一天和最后一天

    package com.goldcn.jzgmanageplat.b2b.controller; import java.text.SimpleDateFormat;import java.util. ...

  8. 微信小程序【获取验证码】倒计时效果

    最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...

  9. 响应消息的内容类型 text/html; charset=utf-8 与绑定(application/soap+xml; charset=utf-8)的内容类型不匹配。

    问题表述: 响应消息的内容类型 text/html; charset=utf-8 与绑定(application/soap+xml; charset=utf-8)的内容类型不匹配. 说明: 此类问题当 ...

  10. HTML及CSS学习笔记

    推荐博客:付铭 day-01 HTML 1.HTML 基本语法 html标签 单标签 <img /> .<img> 双标签 <html> </html> ...