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

文本属性

介绍几个常用的。

文本对齐

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/bilx/p/11726888.html

时间: 2024-10-11 03:06:55

web前端——CSS 10 文本属性和字体属性的相关文章

web前端的10个顶级CSS UI开源框架

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计.本文分享了10个顶级的CSS UI开源框架,有几个确实不错,一起来看看. 1.Bootstrap – 最流行的Web前端UI框架 Bootstrap是由twitter推出的Web前端UI框架,它由Twitter的设计师Mark Otto和Jaco

web前端css技巧整理

"熟能生巧"这一词大家并不陌生吧,在学习web前端的时候,我们也需要做到这一点才能提高我们的工作效率等等.今天在网上发现了一篇css基础教程(http://www.maiziedu.com/course/web/421-5342/)文章,我觉得非常的有用,于是就分享给大家,这些技巧能让你更加专业. 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-h

零基础学WEB前端-CSS

CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现方法.样式 (style) 定义如何显示 HTML 元素:样式通常存储于样式表中:外部样式表存储于 CSS 文件中. CSS可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 1.CSS基础

web前端—css面试题

1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id > class > tag(important要优先于内联样式) 3.阐述一下CSS3的新增伪类. 4.如何居中 div?如何居中一个浮动元素?如何让绝对定位的div居中? div居中:给div一个宽度,然后添加margin: 0 auto;属性即可. 浮动元素居中: 绝对定位的div居中: 5

WEB前端--CSS样式优先级

转载信息: 作者: XuGang   网名:钢钢 出处: http://xugang.cnblogs.com 声明: 本文版权归作者和博客园共有.转载时必须保留此段声明,且在文章页面明显位置给出原文连接地址! 样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)I

web前端【第十一篇】jQuery属性相关操作

知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 removeAttr(属性名) -删除属性的值 prop(属性名|属性值) - 属性的返回值的是布尔类型 - 单选,反选,取消的例子 removeProp(属性名) -删除属性的值 循环:each(两种循环示例) - $.each(数组/对象, function(i, v){}) - $("div"

文本属性和字体属性

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

web前端入门到实战:内边距属性、外边距属性

一.内边距属性 1.定义:边框和内容之间的距离就是内边距 2.分开写 padding-top:数字px: padding-left:数字px: padding-bottom:数字px: padding-right:数字px: 3.连写: padding:上 右 下 左: 4.注意点: (1)给标签设置内边距之后,标签占有的宽度和高度会发生变化 (2)内边距也会有背景颜色 web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详

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

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