【CSS常用文本属性】
1、 字体、字号类:
① font-weight: 字体粗细。 bold-加粗、normal-正常、lighter-细体
也可以使用100-900数值,400表示normal,700表示bold

② font-style: 字体样式。 italic-倾斜、normal-正常

③ font-size: 字号。 可以写px单位,也可以写%
200%表示浏览器默认大小(16px)的两倍=32px

④ font-family: 字体系列(字体族)。
>>> 可以直接写字体名,也可以写字体系列名。
>>> 常用字体系列:serif-衬线体 sans-serif-非衬线体;
>>> font-family可以接收多个值,用逗号分隔。表示优先使用第一个,如果没有这个字体,依次向后使用。 通常,最后一个值放字体系列名;
eg: font-family: "黑体","微软雅黑",sans-serif;

⑤ font缩写形式:
>>> 顺序必须是:
font-weight font-style font-size/line-height font-family
>>> 不同属性之间,用空格分隔;
>>> font-size/line-height必须一组,用/分隔;
>>> font-family多个字体之间,用逗号分隔
>>> eg: font: bold italic 32px/50px "微软雅黑",serif;

2、 字体颜色
① color: 字体颜色 可以使单词、十六进制、RGB等

② opacity: 透明度,可选值0-1
[opacity和RGBA的区别]
>>> RGBA本身可以设置颜色,而opacity必须配合其他颜色属性来用;
>>> rgba仅仅是让当前元素设置的颜色透明;
而opacity,会让当前元素里面的所有文字、背景、子元素都透明;


3、行距、对齐、其他类
① line-height: 行高。 可以写px单位、可以直接写数字(表示默认行距的几倍)、可以写% (表示默认行距的百分比)
>>> 行高重要作用: 让单行文字在div中垂直居中?
设置行高等于div的高度,即可让单行文字垂直居中。

② text-align:设置区域内的行级元素水平对齐方式left/center/right

③ letter-spacing: 字符间距,字与字之间的距离

④ text-decoration: 文本修饰;
underline-下划线、overline-上划线、line-through-删除线、none

⑤ overflow: 设置超出区域文字的显示方式。
>>> overflow: hidden; 超出区域的文字隐藏不显示;
>>> overflow: scroll; 无论文字多少,都会显示水平垂直滚动条
>>> overflow: auto; 自动。文字多显示滚动条,文字少,不显示滚动条。
>>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
    overflow-y: scroll; overflow-x: hidden;

⑥ text-overflow:设置行末多余文字的显示方式;
>>> clip-多余文字裁剪掉 ellipsis-多余文字省略号显示
>>> 显示省略号,需要配合white-space: nowrap;使用
>>> 【重点】 设置行末显示省略号(三行代码,缺一不可)
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

⑦ white-space: nowrap; 设置中文行末,不断行显示

⑧ text-indent: 首行缩进。

⑨ -webkit-text-stroke: 0.5px blue; 文字描边。
-webkit-表示只有webkit内核浏览器生效、常见的有chrome、safari

⑩ text-shadow: 文字阴影,有四个属性值,空格分隔;
>>> 水平阴影距离,正数表示阴影右移,负数左移;
>>> 垂直阴影距离,正数表示阴影下移,负数上移;
>>> 阴影模糊距离, 0表示阴影一点不模糊;
>>> 阴影的颜色;
>>> eg:text-shadow: 20px -10px 2px blue;

css常用文本属性的更多相关文章

  1. 如何设置文本不换行省略号显示等CSS常用文本属性

    如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...

  2. CSS基本属性—文本属性和背景属性

    一.CSS常用文本属性 [css中的颜色表示方式]   1.直接使用颜色的单词表示:red.green.blue    2.使用颜色的十六进制表示:#ff0000,#00ff00:    六位数,两两 ...

  3. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  4. CSS样式表之常用文本属性

    断更了两周了,因为纠结之后在学java啦,但是还是要把学过的前端知识更完 以下的一些文本属性是CSS最常用的属性: [长度单位]:px(像素) [颜色单位]: 十六进制:#ffffff 分别对应红绿蓝 ...

  5. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  6. 学习css之文本属性

    css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段 ...

  7. CSS的文本属性

    CSS 文本属性可定义文本的外观. 通过文本属性,可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进等. ㈠缩进文本   text-indent  通过使用 text-indent 属性 ...

  8. css常用的属性方法 上篇

    自己是从java后台自学转前端的,所以平时一些简单的css+html就不写了,列出的都是新手常用的一些属性,会持续更新,大神勿喷,留给新手做个参考! 尤其是跟我一样自学前端的.     背景关联 ba ...

  9. css常用的属性

    CSS------属性值篇 display: none | block | inline(默认值) | inline-block(css2新增) | inherit none :此元素不会再显示 {注 ...

随机推荐

  1. Java映射

    1.Student类 package com.zdsofe.javaweb.lianxi1; public class Student { public String stuName; private ...

  2. Nlpir Parser智能语义分析系统文本新算法

    文本挖掘或者文档挖掘是一个从非结构化文本信息中获取用户感兴趣或者有用的模式的过程文本挖掘涵盖多种技术,包括信息抽取,信息检索,自然语言处理和数据挖掘技术.它的主要用途是从原本未经使用的文本中提取出未知 ...

  3. asp.net 程序,当发生找不到文件的错误时,如何正确定位是哪个文件?

    需要在Global.asax.cs中添加Application_Error代码如下,在Log中查看是哪个文件缺失: protected void Application_Error(object se ...

  4. struts2增删改查---layer---iframe层---通配符---国际化

    在前一篇文章的基础上,修改一部分即可(在此只是简单介绍) struts.xml页面 在原来的基础之上 action的name="*_*"  class="包名.{1}&q ...

  5. UUID.randomUUID().toString() 的作用

    public static String createNewId(){ return UUID.randomUUID().toString() ; } UUID.randomUUID().toStri ...

  6. webpack+react搭建环境

    近日自己项目遇到需要用webpack搭建react环境,查了挺多 ,自己总结一下 1.下载安装最新版node.js(https://nodejs.org/en/) 2.主要看自己网络情况,可以选择安装 ...

  7. JSP是什么?

    JSP      [1] 简介           > HTML                - HTML擅长显示一个静态的网页,但是不能调用Java程序.           > Se ...

  8. Nexus3 配置3

    Nexus3 配置3 案例通过 NPM 的包管理 proxy : 表示设置公网仓库 hosted : 设置私网仓库 group : 将多个仓库合并在一起 设置 proxy 这里我用的 https:// ...

  9. Andrew Ng机器学习课程笔记--week1(机器学习介绍及线性回归)

    title: Andrew Ng机器学习课程笔记--week1(机器学习介绍及线性回归) tags: 机器学习, 学习笔记 grammar_cjkRuby: true --- 之前看过一遍,但是总是模 ...

  10. Struts2学习笔记(一)——环境搭建

    1.创建Web项目并导入Struts2的主要jar包 在MyEclipse中新建Web项目,然后在lib目录下添加必须的jar包: 2.创建jsp页面 1).创建test.jsp页面: <bod ...