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. 如何快速安装kafka-manager

    1.下载kafka-manager git clone https://github.com/yahoo/kafka-manager.git 2.配置sbt镜像仓库 因为kafka-manager是雅 ...

  2. math type白嫖教程

    math type作为一款很方便的公式编辑器,缺陷就是要收费,只有30天的免费试用.这里有一个白嫖的方法,当你30天的期限过了之后,只需要删除HKEY_CURRENT_USER\Software\In ...

  3. MyBatis基础_连接池与事务、动态SQL、注解开发

    一.MyBatis连接池及事务控制 1.连接池 在实际开发中,都会使用连接池,因为它可以减少获取连接缩消耗的时间.所谓连接池,就是存储数据库连接的容器.连接池中存储一定数量的数据库连接,当线程需要使用 ...

  4. python UnicodeDecodeError: 'gbk' codec can't decode byte 0x99 in position 87: illegal multibyte sequence异常解决

    我们处理文本文件时,经常会遇到这样的报错: UnicodeDecodeError: 'gbk' codec can't decode byte 0x99 in position 87: illegal ...

  5. pycham设置头文件内容

    pycharm软件 设置头文件方法 File->settings->Editor->File and Code Templates->Python Script  #!/usr ...

  6. layui表格增删改查与上传图片+Api

    API  控制器1 主要用于增删改查已经反填数据查询 using System; using System.Collections.Generic; using System.Data.SqlClie ...

  7. 面试官：你连RESTful都不知道我怎么敢要你？ 文章解析

    面试官:你连RESTful都不知道我怎么敢要你?文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接口4.一致的数据格式4.系统分层5.可缓 ...

  8. linux入门系列12--磁盘管理之分区、格式化与挂载

    前面系列文章讲解了VI编辑器.常用命令.防火墙及网络服务管理,本篇将讲解磁盘管理相关知识. 本文将会介绍大量的Linux命令,其中有一部分在"linux入门系列5--新手必会的linux命令 ...

  9. Java也疯狂-分享利用ffmpeg做视频转换的工具

    朋友需要经常将视频统一转换为mp4格式,市面上的工具很多,但是转换的体积.自动化程度等都不好,于是花了一个小时给朋友写了个给予ffmpeg的批量转换工具,功能简单但是很实用,也正好给学习Java的同学 ...

  10. Angular 从入坑到挖坑 - 组件食用指南

    一.Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件 ...