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. ajax 后台java代码执行完毕 前端报404错误

    一个ajax请求,到java后台代码,后台成功接受并执行相应处理,但是返回的时候,success却没进去,前端报404错误. 因为是由于Controller忘记写spring的@Responsebod ...

  2. json通过后台获取数据库中的内容，并在前端进行显示

    fastjson.jar以及Echarts树图的js文件(需要在servlet对json进行赋值,所以需要用到json的插件) 链接:https://pan.baidu.com/s/1GBbamPNG ...

  3. 生成HTML测试报告表格

    #生成HTML测试报告 #-*- coding:utf-8 -*- from selenium import webdriver from selenium.webdriver.common.by i ...

  4. Cheat sheet PySpark SQL Python（PySpark 速查表）

  5. CCF_201604-2_俄罗斯方块

    用一个4*2的数组记录方块的位置,每一次移动前判断每个方块位置下面是否已有方块,直到不能移动,将该数组更新到原来的图上,输出即可. #include<cstdio> #include< ...

  6. EMC NW disaster and recovery simulation 2

    scanner -ivp can help your new networker server recongize that only clone pool has data

  7. Jmeter——使用JSR223元件实现RSA登录加密

    一.RSA加密简介 RSA加密是一种非对称加密.可以在不直接传递密钥的情况下,完成解密.这能够确保信息的安全性,避免了直接传递密钥所造成的被破解的风险.是由一对密钥来进行加解密的过程,分别称为公钥和私 ...

  8. Spring Cloud（七）：服务网关zuul过滤器

    上文介绍了Zuul的基本使用与路由功能,本文接着介绍Zuul的核心概念 -- Zuul过滤器(filter). Zuul的功能基本通过Zuul过滤器来实现(类比于Struts的拦截器,只是Struts ...

  9. 面向对象之包装类与Object类

    一.包装类(Wrapper) 1.包装类出现原因 为了使8种基本数据类型的变量具有类的特征,引入包装类 2.类型间转化 ① 基本数据类型---->对应的包装类:自动装箱 包装类---->对 ...

  10. 使用Webpack的代码拆分在Vue中进行懒加载

    参考学习:https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/ 学习文案:https://webpac ...