font-family属性值：具体字体名或者字体集

如果是中文或者有单词之间有空格，需要加双引号

字体集：

Serif （有装饰线）

Sans-serif （无装饰线）

Monospace

Cursive

Fantasy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        h1{

            font-family: "Times New Roman";

        }

        p{

            font-family: "微软雅黑","宋体","黑体",sans-serif;

        }

    </style>

</head>

<body>

    <h1>css层叠样式表</h1>

    <p>什么是css层叠样式表呢？</p>

</body>

</html>

font-size 相对单位

px （受显示器分辨率影响，在手机端一般不使用）

em （针对父元素）

% （针对父元素）

字体颜色

可查询web安全色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*rgb数字：0~255*/

        h1{

            color:rgb(0,255,0);

        }

        /*rgb百分比：0%~100%*/

        p{

            color:rgb(0%,100%,0%);

        }

        p.spe{

            color:#008800;/*#开头，六位，0~F*/

            color:#080;/*简写*/

        }

    </style>

</head>

<body>

    <h1>css层叠样式表</h1>

    <p>什么是css层叠样式表呢？</p>

    <p class="spe">颜色十六进制</p>

</body>

</html>

font-variant:small-caps 小型大写字母

css文本样式

text-align 只对块级元素有效：可以在元素外嵌套块级元素，给外元素添加text-align属性

margin:0 auto; 也可以设置元素居中显示

line-height

实际开发中，行高一般使用em单位，与字体大小相关

浏览器默认行高一般是1.2em

行高可以继承自父元素，继承的是计算后的值，而不是直接继承百分比

首行缩进 text-indent

vertical-align 对行内元素或者单元格元素生效

可以用在图片上 vertical-align:middle;

或者可以用具体的数值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap{

            height:400px;

            width:500px;

            border:1px solid;

            display: table;/*转为表格元素*/

        }

        .content{

            vertical-align: middle;

            text-align:center;

            display: table-cell;/*转为单元格元素*/

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="content">

            <p>什么是<span class="sub">css</span>层叠样式表呢？</p>

            <p>什么是<span class="super">css</span>层叠样式表呢？</p>

        </div>

    </div>

</body>

</html>

word-spacing 单词间距

letter-spacing 字母间距

单词的判断以空格为准

text-transform:capitalize | uppercase | lowercase | none 设置文字大小写

text-decoration:underline | line-through | overline | none 设置文字装饰线

也可以设置多个样式 text-decoration:underline overline;

css字体样式+文本样式的更多相关文章

  1. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  2. 【CSS学习】--- 文本样式

    一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...

  3. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  4. css 字体、文本、padding的样式

    一.字体的样式: 1)字体倾斜:font-style:italic 2)字体大小:font-size 一般为偶数. 3)行高:line-height   当行高为奇数的时候,是文字上面比文字下面的少一 ...

  5. css 基础 字体和文本样式

    字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...

  6. [Web 前端] 009 css 常用的文本样式设置

    常用的文本 css 样式 概览 参数 释义 举例 color 设置文字的颜色 color:red; font-size 设置文字的大小 font-size:12px; font-family 设置文字 ...

  7. 前端之CSS字体和文本类属性

    一.字体类属性: 1.字体类型: font-family:字体1,字体2,字体3; 常用写法: font-family:"微软雅黑",Arial; 注:a) 多个字体之间用逗号分隔 ...

  8. CSS颜色、单位、文本样式

    一.CSS颜色:关键字 red16进制的6位 #ffffff16进制的3位 #fffrgb(0,255,100) 取值范围:0~255 (r:red.g:green.b:blue)rgba(0,255 ...

  9. 7. CSS装饰网页的样式

    CSS中有哪些用来装饰网页的样式呢?在这里我们对一些常用的样式做了总结. 字体样式 /* * 一般样式书写 */ .font_style_1{ font-family: "华文行楷" ...

随机推荐

  1. 聊聊“装箱”在CLR内部的实现

    原文连接:https://mattwarren.org/2017/08/02/A-look-at-the-internals-of-boxing-in-the-CLR/ 作者 Matt Warren. ...

  2. ros之自定义服务数据

    如何自定义服务数据 string name Uint8 age Uint8 sex Uint8 unknown =0 Uint8 male =1 Uint8 female = 2 (上面的是Reque ...

  3. 深入理解JVM-类加载及类加载器

    深入理解JVM 2020年02月06日22:43:09 - 记录学习过程 终于开始了.在学习这个之前,看了zhanglong老师的 java 8 和springboot 迫不及待了.先开始吧. 写在前 ...

  4. pdo数据操作，3-4，0724

    require 'connect.php'; $linshi = $dbh->prepare('UPDATE `category` SET `name` = :name, `alias`=:al ...

  5. ARTS Week 7

    Dec 9, 2019 ~ Dec 15, 2019 Algorithm Problem 38.Count And Say 外观数列 题目链接 题目描述: 外观数列 是一个整数序列,从数字 1 开始, ...

  6. Linux 工作机初始化操作

    # apt 依赖包安装 sudo apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libs ...

  7. 面试官：“看你简历上写熟悉 Handler 机制，那聊聊 IdleHandler 吧？”

    一. 序 Handler 机制算是 Android 基本功,面试常客.但现在面试,多数已经不会直接让你讲讲 Handler 的机制,Looper 是如何循环的,MessageQueue 是如何管理 M ...

  8. python如何删除二维或者三维数组/列表中某维的空元素

    如题,个人在使用python进行数据预处理过程中出现的问题,抽象成删除三维列表中某维为空的问题. 一.首先来看一下三维数组/列表的结构 仔细看下图就会很清楚了: 轴0即是去除第一个外括号后第一层(我把 ...

  9. django项目中使用KindEditor富文本编辑器

    先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...

  10. k8s系列---yaml文件格式

    https://www.bejson.com/validators/yaml_editor/ yaml文件大致格式解析,通过上面这个解析网站,可以看到yaml文件解析的格式长什么样,如果知道字典和列表 ...