常用的应用文本的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. jenkins持续集成原理

    转载: 原文地址:http://www.2cto.com/kf/201609/544550.html 持续集成 开发中,我们经常遇到一些奇怪问题,比如本地可以编译成功的代码但是同事们更新代码后编译出错 ...

  2. 盒子显隐,伪类边框,盒子阴影,2d平面形变

    -盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...

  3. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  4. 【转载】c++类的实例化与拷贝

    https://www.cnblogs.com/chris-cp/p/3578976.html c++的默认拷贝构造函数,从深度拷贝和浅拷贝说起: https://blog.csdn.net/qq_2 ...

  5. springMVC中 @RequestParam和@RequestBody的区别

    首先,不可以同时传进@RequestParam和@RequestBody,好像可以传进两个@RequestParam 如果不加@requestparam修饰,相当于 加上@requestparam且各 ...

  6. Django REST Framework API Guide 06

    本节大纲 1.Validators 2.Authentication Validators 在REST框架中处理验证的大多数时间,您将仅仅依赖于缺省字段验证,或在序列化器或字段类上编写显式验证方法.但 ...

  7. 51nod 1035 最长的循环节

    正整数k的倒数1/k,写为10进制的小数如果为无限循环小数,则存在一个循环节,求<=n的数中,倒数循环节长度最长的那个数,假如存在多个最优的答案,输出所有答案中最大的那个数. 1/6= 0.1( ...

  8. P5290 [十二省联考2019]春节十二响

    题目地址:P5290 [十二省联考2019]春节十二响 骗分方法 如果你实在一点思路也没有,暴力都不会打,那么请考虑一下骗分. 方法一 输出所有 \(M\) 的和. 期望得分:0分. 实际还有5分 方 ...

  9. css3之border-radius理解

    在日常项目过程中,border-radius这个属性算是非常常用的属性之一了,通过设置元素的border-radius值,可以轻松给元素设置圆角边框,甚至实现绘制圆.半圆.四分之一的圆等各种圆角图形. ...

  10. 【原创】大数据基础之CM5(Cloudera Manager)+CDH5离线安装

    CM/CDH 5.16.1 CM官方:https://www.cloudera.com/products/product-components/cloudera-manager.html CDH官方: ...