一、字体类属性:

1.字体类型:

font-family:字体1,字体2,字体3;

常用写法: font-family:"微软雅黑",Arial;

注:a) 多个字体之间用逗号分隔;

b)中文字体要放在双引号中,英文字体由多个单词组成时也要加双引号;

c) 浏览器优先识别字体1,如果找不到字体1,识别字体2,如果都找不到,显示浏览器默认字体。

2.字体大小:

font-size:数值+单位;

注:a)浏览器默认字体大小为16px;

b) font-size:medium;等价于 font-size:16px;

c)字体大小一般设置偶数不设置奇数;

3.字体加粗:

font-weight:normal(常规字体)|bold(加粗)|bolder(加粗)|100-500(常规字体)|600-900(加粗字体);

4.字体倾斜:

font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

5.文本是否大写:

font-variant:normal(常规字体)|small-caps(小型的大写字母字体);

注:此属性主要应用于英文

6.字体颜色:

color:颜色值;

颜色值的几种设置方式:

a)十六进制写法  #000 黑色  #fff 白色  #f00 红色

b)rgb写法       rgb(0,0,0) 黑色  rgb(255,255,255) 白色

c)rgba写法     a代表透明度,取值范围0-1  rgba(0,0,0,0.6)

d)颜色单词     red(红色) black(黑色) white(白色) green(绿色) yellow(黄色) gray(灰色) pink(粉色) blue(蓝色)

7.font简写方式:

font:italic bolder 12px "微软雅黑",Arial;

注:使用简写方式时,font-size和font-family不可与其他属性互换位置,也不能分开写

font:12px/1.5 "微软雅黑",Arial;  (字体大小为12px,行高是字体大小的1.5倍)

注:将font-size和line-height结合在一起时,用/来表示,/前表示字体大小,/后表示字体行高,当行高不加单位时,表示行高为

字体大小的多少倍

注:只有在同时指定font-size和font-family时才能使用/这种写法

二、文本类属性:

1.水平对齐方式:

text-align:left(默认值,左对齐)| center(居中对齐)|right(右对齐)|justify(两端对齐,只对英文起作用);

注: text-align只对文本,图片,内联元素起作用,给文本,图片,内联元素所在父元素加

2.垂直对齐方式:

vertical-align:top|middle|bottom;

  top:居顶部对齐

  middle:居中对齐

  bottom:居底部对齐

注:该属性只对行内块元素有效,给本元素添加此属性;

一般在设置图片和文字居中对齐的时候会用到,input控件垂直居中对齐时会用到;

3.行高:

line-height:数值+单位;

注:当单行文本的行高等于容器高时,可以实现单行文本在容器中垂直居中;

line-height只写数值不加单位时,表示倍行高,行高为字体大小的多少倍;

eg: line-height:3; 字体大小的三倍

注:line-height不允许设置负值

4.文本修饰:

text-decoration:none(默认值)|underline(下划线)|overline(上划线)|line-through(删除线);

常用: a{text-decoration:none;}

5.首行缩进:

text-indent:数值+单位;

注:向前缩进为负值,会达到一种隐藏的效果,向后缩进为正值

只对第一行有效!

6.字符间距(汉字与汉字,字母与字母的间距):

letter-spacing:normal(默认间隔)|数值+单位;

注:值越大,间距越大,值越小,间距越小,允许设置负值

7.词间距(主要针对英文):

word-spacing:normal(默认值)|数值+单位;

注:允许设置负值

8.文本是否大小写:

text-transform:none(默认值)|capitalize(首字母大写)|uppercase(全部大写)|lowercase(全部小写);

9.长单词换行:

word-wrap:normal(默认值)|break-word;

注:在长单词或 URL 地址内部进行换行时设置为break-word

10.强制在一行显示:

white-space:normal(默认值)|nowrap(不换行);

注:常在省略号设置中用到

11.文本流控制:

layout-flow:horizontal(从左到右)|vertical-ideographic(从上到下);

前端之CSS字体和文本类属性的更多相关文章

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

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

  2. 前端之CSS列表及背景类属性

    一.列表类属性: 1.列表符号样式: list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式); 2. ...

  3. 前端学习 -- Css -- 字体的几个属性学习

    font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体 ...

  4. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

  5. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

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

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

  7. 前端开发css禁止选中文本

    在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...

  8. 2020年12月-第02阶段-前端基础-CSS字体样式

    CSS字体样式属性调试工具 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字 ...

  9. css字体样式+文本样式

    font-family属性值:具体字体名或者字体集 如果是中文或者有单词之间有空格,需要加双引号 字体集: Serif (有装饰线) Sans-serif (无装饰线) Monospace Cursi ...

随机推荐

  1. 003 - 修改Pycharm的项目文件树样式

    相信习惯了Eclipse或者Windows的小伙伴对于Pycharm的目录树一定觉得特别别扭 因为它总是在文件前加一个三角形标注, 这样的标注在视觉上十分误导层级关系 修改的方式为   File -& ...

  2. 关于内存DC

    使用CreateCompatibleDC 创建了内存DC之后,要再调用SelectObject选择一张位图放入此DC,然后才可以使用此DC进行绘制,之后绘制的数据会保存在内存中, 详细说明看后文. 在 ...

  3. bootstrap 学习笔记(5)---- 图片和响应式工具

    (一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. heig ...

  4. HDU1852 Beijing 2008(快速幂+特殊公式)

    As we all know, the next Olympic Games will be held in Beijing in 2008. So the year 2008 seems a lit ...

  5. 点分治 [IOI2011]Race

    BZOJ2599. 放板子.利用agc009-D 代码简洁了很多 #include <bits/stdc++.h> #define N 200005 using namespace std ...

  6. Linux中进程控制块PCB-------task_struct结构体结构

    Linux中task_struct用来控制管理进程,结构如下: struct task_struct { //说明了该进程是否可以执行,还是可中断等信息 volatile long state; // ...

  7. Tomcat之the jre_home environment variable is not defined correctly this environment variable is need

    参考https://blog.csdn.net/qq_30507287/article/details/53981851 今天在服务器的tomcat上部署.war文件,双击startup闪退,然后在t ...

  8. 技术胖Flutter第四季-21导航的参数传递和接受-2

    21导航的参数传递和接受-2 视频地址 https://www.bilibili.com/video/av35800108/?p=22 博客地址:https://jspang.com/post/flu ...

  9. CCF 201509-2 日期计算 (水题)

    问题描述 给定一个年份y和一个整数d,问这一年的第d天是几月几日? 注意闰年的2月有29天.满足下面条件之一的是闰年: 1) 年份是4的整数倍,而且不是100的整数倍: 2) 年份是400的整数倍. ...

  10. kuangbin带你飞 - 合集

    [题目列表] 之前有一些做过了的,这次从数论开始?