CSS基础3——使用CSS格式化元素内容的字体
1、CSS属性单位:
(1)长度单位:包含绝对长度单位和相对长度单位
绝对长度单位包含:cm、mm、in、pt、pc等。
绝对长度单位最好用于打印输出设备。在仅作为频幕显示时。绝对长度值并没有什么意义。
相对长度单位包含:px、em、ex等。相对长度指元素尺寸相对于浏览器的系统默认值来对应的缩放。em是相对于当前对象中文本M的字体尺寸大小。
ex是相对于当前对象中文本x的字体尺寸大小。假设当前对行内文本额字体尺寸未被人为设置。则相对于浏览器默认字体尺寸。
px。em,百分比的转换:16px = 1em = 100% 1px = 0.0625em = 6.25%
(2)颜色单位:
百分比表示,如color:rgb(50%,0,50%);
用0-255之间的整数值来设置。如color:rgb(128,0,127);
使用十六进制数组定义颜色,如color:#e1e1e1。
使用简化的十六进制数定义颜色,如color:#fa1;等同于#ffaa11;
用颜色的英文,如black(黑色),white(白色)等。
(3)URL单位:格式是在"url"后面紧跟一个括号,括号里是url的地址。
2、设置元素内容的字体
(1)设置字体名称:font-family
能够设置如宋体,Arial等字体。要使用安全字体(如arial 、verdana、宋体等),不能使用偏僻字体。能够同一时候制定多个字体,使用时用逗号分开,这样设置优点在于。假设电脑里没有第一个字体,浏览器能够使用后面指定的字体。
(2)字体倾斜程度:font-style
属性值包含 normal/italic/oblique
(3)字体的变体:font-variant
属性值包含 normal / small-caps。使用small-caps属性的元素的字体中的大写字母看起来要比正常的大写字母小一些。
(4)字重:font-weight
属性值包含 normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 。400相当于normal,700相当于bold,900是最重字体。 bolder 或 lighter 表示字体的字重比父元素高或低一级
(5)字体大小:font-size
属性值包含:<绝对大小>(如12pt) / <相对大小>(如1.5em) / <百分比>(如150%)
(6)字体属性的缩写:font , 属性顺序依照{font-style 、 font-variant 、 font-weight 、 font-size 、 font-family},中间用空格分开。如 p{font:normal small-caps bold 120% 宋体。}
CSS基础3——使用CSS格式化元素内容的字体的更多相关文章
- CSS基础4——使用CSS格式化元素内容的文本
CSS的文本属性用于控制文本的段落格式,如设置首行缩进.段落对齐方式.字间距.行间距等. 1.设置文本首行缩进:text-indent 可选属性值包含: 长度 / 百分比 2.设置文本对齐方式:tex ...
- HTML&CSS基础-内联和块元素
HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- CSS基础(html+css基础)
css: CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 1.CSS代码语法: css ...
- css基础--简单介绍css
--引入 什么是css? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...
- CSS基础语法和CSS经常用到的知识点总结
1. [代码]css基础教程 CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代 ...
- CSS基础语法(二) CSS的9种选择器
样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性 .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素 #id值{ … } 3.标签选择器 ...
- CSS基础学习-12.CSS position
绝对定位 position:absolute,元素脱离文档流,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...
- HTML 网页开发、CSS 基础语法——十.CSS语法
CSS代码书写位置 • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明 1.内联式 ① 内联式简介 •内联式,也被习惯叫做行内式. •书写位置:在 HTML 标签之上的 style 属性 ...
- 【CSS基础】实现 div 里的内容垂直水平居中
方案一: 所有内容垂直水平居中 兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...
随机推荐
- Android系统设置— android.provider.Settings
android.provider.Settings Intent intent = new Intent(android.provider.Settings.ACTION_SETTINGS); sta ...
- Hello China操作系统STM32移植指南(一)
Hello China操作系统移植指南 首先说明一下,为了适应更多的文化背景,对Hello China操作系统的名字做了修改,修改为"Hello X",或者连接在一起,写为&quo ...
- Linux 下的多线程编程
随着你对编程的深入,多线程是一个免不了的话题,在这里就对多线程做一个比较详细的总结. 首先摆在我们面前的就是什么是线程,以及为么会有这个东西.记得之前学习的时候自己会画一张很大的图,在图中可以详细的写 ...
- Android 4.4及以上系统下应用的状态栏颜色渐变效果的实现
上一篇转载的博文里讲到了怎么开启状态栏透明的效果,不过如果在有ActionBar的情况下,会出现状态栏透明而ActionBar横亘在状态栏和内容之间的丑陋情况,如下图: 通过百度之后,发现了GitHu ...
- javascript中处理引号编码"
1. <c:out value='${jxOrgJsonStr}' escapeXml="false"/> 2.或者使用innerText 直接接受${jxOrgJso ...
- 【水一发next_permutation】poj 1146——ID Codesm
来源:点击打开链接 求字典序下一位,没有直接输出没有.全排列函数秒水过. #include <iostream> #include <algorithm> #include & ...
- beini破解无线
软件介绍 当你的笔记本有无线网卡却不能上网的时刻,也许你会很焦急. 又或许你的隔壁就有无线网络可以接的时刻,但你却由于米有密码而不能上网.下面我将简介一款可以令你惊讶的软件,奶瓶 有了奶瓶以上疑问都可 ...
- ZYB's Premutation(有逆序数输出原序列,线段树)
ZYB's Premutation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Othe ...
- C++ 函数映射使用讲解
想想我们在遇到多语句分支时是不是首先想到的是 switc case 和 if else if ... 这2种方式在编码方面确实简单少,但是当分支达到一定数量后,特别是分支内部有嵌套大段代码或者再嵌套分 ...
- [译]Stairway to Integration Services Level 4 - 增量更新数据
在本文中, 我们说下增量更新数据:即将数据源中更新了的数据替换掉目标表中对应的数据. 更新代码 操作之前我们先把目标表e (dbo.Contact). 的数据改掉 Use AdventureWorks ...