第五章 文字与图像

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 设计彻底研究(五)文字与图像的更多相关文章

  1. CSS 设计彻底研究(三)深入理解盒子模型

    第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“ ...

  2. CSS 设计彻底研究(四)盒子的浮动与定位

    第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元 ...

  3. CSS 设计彻底研究(一)(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  4. 【基础笔记】《html&CSS设计与构造网站》一书导读

    ◉HTML 1.结构网页使用HTML HyperText Markup Language 来描述页面结构超文本标记语言允许对文本建立链接,允许对文本进行标记网页开头都有一个DOCTYPE 文档类型 声 ...

  5. (11)用css设计电子相册 {上}

    本篇学习资料讲解:       通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ...

  6. 谈谈一些有趣的CSS题目(十五)-- 奇妙的 background-clip: text

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. 结构化CSS设计思维

    LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...

  8. 朱晔的互联网架构实践心得S1E9:架构评审一百问和设计文档五要素

    朱晔的互联网架构实践心得S1E9:架构评审一百问和设计文档五要素 [下载文本PDF进行阅读] 本文我会来说说我认为架构评审中应该看的一些点,以及我写设计文档的一些心得.助你在架构评审中过五关斩六将,助 ...

  9. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

随机推荐

  1. OpenGL ES 2.0 摄像机与投影

    1.摄像机的设置 摄像机的位置坐标 摄像机的位置 摄像机up方向 Matrix.setLookAtM( mVMatrix, //存储生成矩阵元素的float[]类型数组 0, //填充起始偏移量 cx ...

  2. Reverse digits of an integer.

    class Solution { public: int reverse(int x) { ;//long 是怕中间过程溢出 <<,max=-min-){ ans=ans*+x%; x=x ...

  3. Hadoop集群日常运维

    (一)备份namenode的元数据 namenode中的元数据非常重要,如丢失或者损坏,则整个系统无法使用.因此应该经常对元数据进行备份,最好是异地备份. 1.将元数据复制到远程站点 (1)以下代码将 ...

  4. 【干货】.NET开发通用组件发布(一) 介绍

    组件介绍 集合个人和团都开发中遇到的一些通用组件,邮件发送组件.内容采集.CSV数据文件导入工具.日志记录组件.MVC验证登陆组件.MVC分页组件.短信发送组件和强大的Repeate和Repeater ...

  5. poj 1037 A decorative fence

    题目链接:http://poj.org/problem?id=1037 Description Richard just finished building his new house. Now th ...

  6. 现有C2B模式小总结

    现有的C2B模式 目前常见的C2B模式有: l  聚合需求形式(反向团购.预售等) l  要约形式(逆向拍卖,客户出价,商家选择是否接受等) l  服务认领形式(企业发布所需服务,个人认领,类似威客等 ...

  7. SVN取消记住密码

    百度上面找的,SVN取消记录密码的方法: 找到这个文件夹首先需要在文件夹选项里面,显示所有的文件和文件夹,不能隐藏. SVN取消记住用户名的方法 打开C:\Documents and Settings ...

  8. BZOJ 1090 字符串折叠(区间DP)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1090 题意:字符串AAAAAAAAAABABABCCD的最短折叠为9(A)3(AB)CC ...

  9. IQC IPQC FQC OQC QA QE SQE CQS QM 简介区别

    IQC Incoming quality control 来料质量控制.是企业产品过程质量的第一关,在这个部门工作的同事最主要的是要注意文件和资料,即:图纸 样品承认书 样板 ***配件检验规范 ,还 ...

  10. Eclipse配置JDK的源代码的src.zip

    Eclipse配置JDK的源代码的src.zip包很简单.只需要简单的几个步骤. 1.点 “window”-> “Preferences” -> “Java” -> “Install ...