字体样式

front-family 字体类型
front-size 字体大小
front-weight 字体粗细
front-style 字体风格

文本样式

颜色 color rgb（颜色） RGBA（颜色和透明度）
文本对齐方式 text-align
首行缩进 text-indent
行高 line-height

一、字体样式

1、字体类型

font-family：后面可以直接打出来字体的样式，或者直接选择

font-family: Times,"Times New Roman", "楷体";

如果浏览器认识Times，就采用Times的字体，如果不认识Times字体，就采用"Times New Roman"字体，如果也不认识 "Times New Roman"字体，那我就采用"楷体"，

★如果楷体也不认识，那么就用浏览器默认的字体

2、字体大小

font-size：px 物理像素

em 根据父元素大小来显示

rem 根据（根元素html）大小来显示

现在用em比较少，一般是在移动端的适配各种机型（兼容各种手机屏幕大小页面显示的更好）的时候会用

3、字体粗细

ont-weight：bold 粗体字体

bolder 更粗的字体

lighter 更细的字体

normal 默认值，标准的粗细大小

数值数值越小越细， 400为normal，700为bold

当字体设置到300 就已经是浏览器显示最细的字体的极限了

当设置到600的时候浏览器粗体的显示就已经是极限了

当你设置成 400 和 500的时候都是标准字体不会加粗也不会变细

4、字体风格

font-style：italic; oblique;表示斜体 <i>、<em>这种也可以变斜

normal；表示普通的

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

二、文本样式

1、颜色属性

color：red / yellow /... 可以直接使用英文单词找到的

RGB （1）十六进制方法表示颜色：

前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

（2）还可以使用这种方式：rgb(r,g,b) : 正整数的取值为0～255

RGBA: 在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

alpha透明度值为0 表示全透明

值为1 表示不透明

值为0.5或者.5 为半透明

利用qq截图工具快捷键ctrl+alt+a 用鼠标移到需要取色的位置

ctrl+c 可以取到十六进制的颜色

按c键可以取到rgb的色值

选好后可以按左上角的Esc退出即可

2、排版文本段落

----水平对齐方式（中英文本皆可）

text-align: right 把文本排列到右边

left 把文本排列到左边。默认值：由浏览器决定

center 把文本排列到中间

justify 实现两端对齐文本效果

★text-align left center right 对img依然有用图片排列中justify实现不了

3、首行缩进

text-indent: px

em 根据父元素 body默认16px

示例：给p设置一个字体大小为20px，在此2em就是40px

4、行高

line-height: px;

使用line-height属性设置行高，值越大，行间距也就越大

line-height一般要设置的比字体的大小要大一点，不然就会挤在一起

就如这里的默认字体大小是16px 如果你设置10px 就会挤在一起

☆设置垂居中，line-height的值要和height的值一样

CSS字体、文本样式相关推荐

CSS 字体文本样式
文章目录 CSS字体文本样式字体样式 color 字体颜色 font-size 字体大小 font-family 字体类型 font-weight 字体粗细 font-style 字体风格综合简写 ...
CSS之【字体/文本样式】
为什么要美化网页? 有效的传递页面信息美化网页,页面漂亮,才能吸引用户凸显页面的主题提高用户的体验 span标签: 重点要突出的字,使用span套起来. 字体样式: front-family: ...
CSS初识(三)：CSS字体文本相关属性
属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...
css 字体颜色样式大全
CSS 颜色大全 css 字体颜色,将颜色代码代替css里面的颜色,就可以. div中控制某段字体颜色 html代码 divid=sidebar spanCSS 颜色大全 css 字体颜色/span ...
第五章 css字体相关样式
css字体相关字体样式 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
CSS 字体文本过渡盒子初步
12.17 学习笔记主要内容: 1.CSS字体样式 2.CSS文本样式 3.CSS使用过渡 4.盒子初步一.CSS字体 1 font-size :字体大小 2.font-family:样式(后加字 ...
CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
0基础快速入门CSS技术栈（3）—图解详细阐述CSS文字文本样式及综合案例、样式调试工具、快速开发html的emment语法（附详细案例源码解析过程）
文章目录 1. CSS字体样式属性调试工具 2. font字体 2.1 font-size:大小 2.2 font-family:字体 2.2.1 CSS Unicode字体 2.3 font-wei ...
CSS字体默认样式设置
//1. 字体族: 表示一堆字体的东西分类如下衬线字体 serif 宋体就是衬线字体带有弯弯勾勾的样子非衬线字体sans-serif 不带有弯弯勾勾的样子 monospace 等宽字体 ...
CSS文字文本样式（font字体、css外观属性）
1. font字体 1.1. font-size:大小作用:font-size属性用于设置字号. p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. ...

CSS字体、文本样式