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形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
随机推荐
- OpenGL ES 2.0 摄像机与投影
1.摄像机的设置 摄像机的位置坐标 摄像机的位置 摄像机up方向 Matrix.setLookAtM( mVMatrix, //存储生成矩阵元素的float[]类型数组 0, //填充起始偏移量 cx ...
- Reverse digits of an integer.
class Solution { public: int reverse(int x) { ;//long 是怕中间过程溢出 <<,max=-min-){ ans=ans*+x%; x=x ...
- Hadoop集群日常运维
(一)备份namenode的元数据 namenode中的元数据非常重要,如丢失或者损坏,则整个系统无法使用.因此应该经常对元数据进行备份,最好是异地备份. 1.将元数据复制到远程站点 (1)以下代码将 ...
- 【干货】.NET开发通用组件发布(一) 介绍
组件介绍 集合个人和团都开发中遇到的一些通用组件,邮件发送组件.内容采集.CSV数据文件导入工具.日志记录组件.MVC验证登陆组件.MVC分页组件.短信发送组件和强大的Repeate和Repeater ...
- poj 1037 A decorative fence
题目链接:http://poj.org/problem?id=1037 Description Richard just finished building his new house. Now th ...
- 现有C2B模式小总结
现有的C2B模式 目前常见的C2B模式有: l 聚合需求形式(反向团购.预售等) l 要约形式(逆向拍卖,客户出价,商家选择是否接受等) l 服务认领形式(企业发布所需服务,个人认领,类似威客等 ...
- SVN取消记住密码
百度上面找的,SVN取消记录密码的方法: 找到这个文件夹首先需要在文件夹选项里面,显示所有的文件和文件夹,不能隐藏. SVN取消记住用户名的方法 打开C:\Documents and Settings ...
- BZOJ 1090 字符串折叠(区间DP)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1090 题意:字符串AAAAAAAAAABABABCCD的最短折叠为9(A)3(AB)CC ...
- IQC IPQC FQC OQC QA QE SQE CQS QM 简介区别
IQC Incoming quality control 来料质量控制.是企业产品过程质量的第一关,在这个部门工作的同事最主要的是要注意文件和资料,即:图纸 样品承认书 样板 ***配件检验规范 ,还 ...
- Eclipse配置JDK的源代码的src.zip
Eclipse配置JDK的源代码的src.zip包很简单.只需要简单的几个步骤. 1.点 “window”-> “Preferences” -> “Java” -> “Install ...