CSS 设计彻底研究(五)文字与图像
第五章 文字与图像
5.1.2 设置字体
通过font-family属性设置字体。可以声明多种字体,字体之间用逗号分隔开。如一些字体名称中间有空格,需用双引号将其引起来,使浏览器知道这是一种字体的名称。
p{ font-family:Arial,"Times New Roman";}
5.1.3 文字大小
通过font-size属性来控制文字大小。
1. 长度单位px。表示在浏览器上1个像素的大小。px是相对单位,也就是相对于1个像素的比例。因为不同访问者的显示器的分辨率不同,而且每个像素的实际大小也不相同。
p{ font-size:12px;}
绝对长度单位有以下5种,不会随显示器的变化而变化。
A. in : inch,英寸
B. cm: centimeter,厘米
C. mm: millimeter, 毫米
D. pt: point,印刷的点数,在一般的显示器中1pt相当于1/72inch
E. pc: pica,1pc=12pt
2. 长度单位em和ex
也是相对长度单位。1em表示的长度是其父元素中字母m的标准宽度,1ex则表示字母x的标准高度。当父元素的文字大小变化时,使用这两个单位的子元素的大小会痛比例变化。
头文字下沉,使用em 使首字母放大到父文字的3倍,再左浮动下沉: .firstLetter{ font-size:3em; float:left;}
3. 长度单位%
百分比作为单位,如 font-size:200%, 表示文字大小是原来的两倍。
5.1.4 行高
使用line-height 属性设置各行文本的高度。 属性值表示两行文字之间基线的距离,也就是每行文字的高度。上下划线及文字的基线。
line-height:1.5。 表示原像素大小的1.5倍
字体、大小和行高,可以写作: font:12px/18px Arial;
5.1.5 文字颜色与背景颜色
h1{ color:blue;} 使用颜色的英文名称
h1{ color:#0000ff;} 使用十六进制数值
h1{ color:#00f;} 第2中方式的简介方式
h1{ color:rgb(0,0,255);} 红绿蓝3个颜色分量的十进制数值
h1{ color:rgb(0%,0%,100%);} 红绿蓝3个颜色分量的百分比。
背景颜色:”background-color“
5.1.6 文字加粗、倾斜与大小写
使用font-weight属性控制文字的粗细。
font-weight:normal 正常
font-weight:bold 加粗
A. font-style:normal 正常字体
A. font-italic 即意大利提。
B. font-oblique 即真正的倾斜。
字母大小写:
A. text-transform: capitalize; 单词首字大写
B. text-transform:uppercase; 全部大写
C. text-transform:lowercase 全部小写
5.1.7 文字的装饰效果
下划线: text-decoration:underline;
定划线:text-decoration:overline
删除线:text-decoration:line-through
闪烁:text-decoration:blink (ie浏览器无效)
如果要同时有多重线,可 p{text-decoration:underline overline line-through}
5.1.8 文字的水平对其方式与段首缩进设置
text-align属性控制,属性值有:center、left、right、justify(两端对齐)
首行缩进,空两格:text-indent:2em;
5.1.10 段落的垂直对其方式
竖直对齐方式:vertical-align。 只能用表格单元格中的对象竖直方向的对其设置。对于一般块级元素 div等都不起作用。
块级元素中文字可以使用 height 和line-height相同的方法使文字竖直居中。
5.2 CSS图像样式
5.2.1 基本设置
图像的基本设置包括设置图像的边框、内外边距和大小等。
5.2.2 背景图像
1. 设置背景图像
background-image:url{bg.gif};
2. 控制图像平铺方向
默认情况下,图像会自动向水平和竖直两个方向平铺。可通过以下方式设置平铺:
A. repeat: 沿水平和竖直两个方向平铺;
B. no-repeat:不平铺,即只显示一次;
C. repeat-x:只沿水平方向平铺;
D. repeat-y:只沿竖直方向平铺。
3. 同时设置背景图像和背景颜色
同时设置背景图像和背景颜色,这样背景图像覆盖的地方就显示背景图像,没有覆盖的地方就按照设置的背景颜色显示。
4. 背景样式属性的简写,属性之间用空格
body{ background:#3399ff url(bg-grad.gif) repeat-x;}
5.2.3 标题的图像替换
1. "图像替换法“是使文字不显示在页面上,而使图片以背景图像的形式出现。通常使用PNG透明格式图片。
<h1><span>文字标题中英文</span></h1>
h1{ background:url(图像地址) no-repeat; height:高度;}
h1 span{ display:none;}
2. 标题的对齐方式:
标题背景图片对齐方式:background-positon: ; 值有:left, right,top, bottom。
如果设置两个属性 background-position: right bottom; 表示竖直位置 右对齐, 水平位置 下对齐。就是右下角位置。
如果只设置一个值,则表示另一个缺省的值为 center。
5.2.4 为图像增加投影效果。
1. 基本方法:
CSS 设计彻底研究(五)文字与图像的更多相关文章
- CSS 设计彻底研究(三)深入理解盒子模型
第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“ ...
- CSS 设计彻底研究(四)盒子的浮动与定位
第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元 ...
- CSS 设计彻底研究(一)(X)HTML与CSS核心基础
第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...
- 【基础笔记】《html&CSS设计与构造网站》一书导读
◉HTML 1.结构网页使用HTML HyperText Markup Language 来描述页面结构超文本标记语言允许对文本建立链接,允许对文本进行标记网页开头都有一个DOCTYPE 文档类型 声 ...
- (11)用css设计电子相册 {上}
本篇学习资料讲解: 通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ...
- 谈谈一些有趣的CSS题目(十五)-- 奇妙的 background-clip: text
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 结构化CSS设计思维
LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...
- 朱晔的互联网架构实践心得S1E9:架构评审一百问和设计文档五要素
朱晔的互联网架构实践心得S1E9:架构评审一百问和设计文档五要素 [下载文本PDF进行阅读] 本文我会来说说我认为架构评审中应该看的一些点,以及我写设计文档的一些心得.助你在架构评审中过五关斩六将,助 ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
随机推荐
- Js 时间间隔计算(间隔天数)
function GetDateDiff(startDate,endDate) { var startTime = new Date(Date.parse(startDate.replac ...
- Gruntjs构工具学习视频
在这里推荐一个Gruntjs的学习视频,非常不错! http://www.imooc.com/learn/30
- document.cookie
概念相关: cookie是存于用户硬盘上的一个文件,对应一个域名,当浏览器再次访问这个域名时,便使用这个cookie. cookie 可以跨越一个域名下的多个网页,但不能跨越多个域名使用. cooki ...
- Sql Server 面试题
1.用一条SQL语句 查询出每门课都大于80分的学生姓名 name kecheng fenshu 张三 语文 81张三 数学 75李四 语文 ...
- Unix,windows和Mac中的换行
Unix 系统里,每行结尾只有“<换行>”,即“\n”:Windows系统里面,每行结尾是“<换行><回车 >”,即“\r\n”:Mac系统里,每行结尾是“< ...
- 03_Elasticsearch如何安装以及相关插件的介绍
03_Elasticsearch如何安装以及相关插件的介绍 elasticsearch -d (-d参数是为了让服务后台运行) Elasticsearch 目录结构: 文件夹 作用 /bin 运行El ...
- Sliding Window Maximum 解答
Question Given an array of n integer with duplicate number, and a moving window(size k), move the wi ...
- 《Two Days DIV + CSS》读书笔记——CSS控制页面方式
1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...
- The Hitchhiker’s Guide to Python! — The Hitchhiker's Guide to Python
The Hitchhiker's Guide to Python! - The Hitchhiker's Guide to Python The Hitchhiker's Guide to Pytho ...
- ubuntu 14.04 下试用Sublime Text 3
很多源代码都没有IDE支持的,尤其是开源的源代码.从github上下载的,很多也不用IDE.包括我自己公司的代码,基本都是脚本,也不用IDE.通常情况下,都是用notepad++.UE之类的文本编辑器 ...