css--文本属性和字体属性

介绍几个常用的。

文本对齐

text-align 属性规定元素中的文本的水平对齐方式。

属性值:none | center | left | right | justify

文本颜色

color属性

文本首行缩进

text-indent 属性规定元素首行缩进的距离,单位建议使用em

文本修饰

text-decoration属性规定文本修饰的样式

属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)

行高

line-height就是行高的意思,指的就是一行的高度。

阴影

text-shadow:水平方向偏移量 垂直方向偏移量 模糊度 阴影颜色;

文字溢出

text-overflow:clip | ellipsis

案例:文字超出部分显示...

css部分div{
   width: 200px;
   height: 200px;
   border: 1px solid red;

 }
div p{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
} html部分
<div>
       <p>变有钱 我变有钱多少人没日没夜地浪费时间</p>
       <p>变有钱 我变有钱多少人没日没夜地浪费时间</p>
       <p>变有钱 我变有钱多少人没日没夜地浪费时间</p>
</div>

字体属性

字体大小

font-size表示设置字体大小,如果设置成inherit表示继承父元素的字体大小值。

字体粗细

font-weight表示设置字体的粗细

属性值:none(默认值,标准粗细) | bold(粗体) | border(更粗)| lighter(更细) | 100~900(设置具体粗细,400等同于normal,而700等同于bold)| inherit(继承父元素字体的粗细值)

字体系列

font-family

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

行高 line-height

针对单行文本垂直居中

公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本。

针对多行文本垂直居中

行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。

第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px

第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

font-family

使用font-family注意几点:

1.网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面装没装
比如你设置: font-family: "华文彩云"; 如果用户电脑里面没有这个字体,
那么就会变成宋体
页面中,中文我们只使用: 微软雅黑、宋体、黑体。 
如果页面中,需要其他的字体,那么需要切图。 英语:Arial 、 Times New Roman

2.为了防止用户电脑里面,没有微软雅黑这个字体
就要用英语的逗号,隔开备选字体,就是说如果用户电脑里面,
没有安装微软雅黑字体,那么就是宋体:
font-family: "微软雅黑","宋体"; 备选字体可以有无数个,用逗号隔开。
3.我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体
就自动的变为后面的中文字体: 
font-family: "Times New Roman","微软雅黑","宋体";

4.所有的中文字体,都有英语别名
我们也要知道: 微软雅黑的英语别名:
font-family: "Microsoft YaHei";
宋体的英语别名: font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一: font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比,表示字号的百分之多少
一般来说,都是大于100%的,因为行高一定要大于字号。 
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 
反过来,比如: font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”

vertical-align

定义:vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

常用属性值:

  • baseline 默认值
  • top
  • bottom
  • middle

它的作用:

  • 内联元素之间的对齐

    • 文字与图片垂直方向的对齐
    • 图片与托片垂直方向的对齐
    • 行内块元素垂直方向的对齐
  • 单元格td的内容垂直方向的对齐

原文地址:https://www.cnblogs.com/shangping/p/12382304.html

时间: 2024-11-05 22:32:48

css--文本属性和字体属性的相关文章

web前端——CSS 10 文本属性和字体属性

文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 color属性 文本首行缩进 text-indent 属性规定元素首行缩进的距离,单位建议使用em 文本修饰 text-decoration属性规定文本修饰的样式 属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义

文本属性和字体属性

文本属性: 文本对齐: text-align 属性规定元素中的文本的水平对齐方式. 属性值:none,center,left,right,justify. 文本颜色: text-indent属性规定元素首行所进的距离,单位建议用em. 文本修饰:  text-decoration 属性规定文本修饰的样式. 属性值:none(默认),underline(下划线),overline(上划线),line-through(横穿文字的线),inherit(继承父元素的text-decoration属性的值

17-文本属性和字体属性

文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 color属性 文本首行缩进 text-indent 属性规定元素首行缩进的距离,单位建议使用em 文本修饰 text-decoration属性规定文本修饰的样式 属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义

第 15 章 CSS 文本样式[上]

学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节课,我们重点了解一下 CSS 文本样式中字体的一些设置方法,样式表如下: 属性名 说明 CSS 版本 font-size 设置字体的大小 1 font-variant 设置英文字体是否转换为小型大写 1 font-style 设置字体是否倾斜 1 font-weight 设置字体是否加粗 1 fon

CSS属性(字体与文本属性)

1.字体属性 (1)font-family 把要对这个网站要设置的字体都写上,如果这个浏览器支持第一个字体,则会用,如果不支持则会尝试第二个,如果设置的字体系统都不支持则会使用系统默认的字体作为网站的字体 (2)字重( font-weight ) 2.文字属性 /* 我这个文件是用来干什么的 小强 日期 */ /*全局通用样式*/ * { font-family: "Microsoft YaHei UI", "Arial"; font-size: 14px; } /

CSS文本与字体的属性

css文本与字体的属性 文本属性 text-decoration(文字装饰线)的属性 text-tabsform(设置文字大小写转换):用的比较少 text-indent 用于对第一行内容的缩进 text-align用于设置元素内容在元素中的水平对齐方式(默认左对齐) 字体属性 font-size设置字体大小 (p元素选择器会重叠掉box1,而span却会继承,因为父类的字体大小即为1em) font-family设置文字的字体 可以设置多个字体,从左到右按顺序直到找到可用的字体.英文字体只适用

CSS属性之字体(Font)

CSS属性之字体(Font) font:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ]  复合属性,各属性见下文. 必须同时包含font-size和font-family,且这两个值顺序不能变,其他关键字的值放到这两个值的前面,顺序可以随意打乱. 可以在字号值(font-siz

css 文本属性详细总结

CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 1,text-align 横向排列,也就是水平对齐 它会影响一个元素中的文本行互相之间的对齐方式 属性值有:left(默认),center,right p{ text-align:right } text-align:center 与 <CENTER> 您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相

CSS字体属性(font)

字体名称属性(font-family) 这个属性设定字体名称,如Arial, Tahoma, Courier等.例句如下: .s1 {font-family:Arial} 字体大小属性(font-size) 这个属性可以设置字体的大小.字体大小的设置可以有多种方式,最常用的就是pt和px(pixel).例句如下: .s2 {font-size:16pt} 字体风格属性(font-style) 这个属性有三个值可选:normal, italic, oblique.normal是缺省值,italic