1、第四讲 CSS 基础,一本优秀的杂志不仅仅是具备一套完整的结构内容、巧妙出奇的页面布局，还需要一个统一的风格，好的风格代表了一种高级的品味。 优秀的网页制作也不再是漂亮的图形、优美的布局和完整的结构就能满足了，使网站整体保持一致的风格，例如字体字形的显示，页面边距等等，也是使网站作品有美感有品味的关键一步。层叠样式表为你完成这一任务。,通过大量的 HTML 语言实现，即每次遇上标题，用 HTML 标签进行设置： 这里是标题 显然你很容易就会为之头大如斗的，即使你有很好的耐心却难保挂一漏万，设置一多就会有所疏忽。,CSS的全称是Cascading Style Sheet，中文翻译为“层叠样式表”
2、。实用CSS可以改变HTML的基本特性，从而控制传统网页上的元素，诸如精确的空白、段落缩进、文本的外观和链接的状态等等。这样，你就可以实现对网页元素的格式控制。 CSS不仅允许你指定单个网页的外观，还可以被用来为网站提供一致的界面。,CSS样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。这样，创建的文档内容和文档的显示外观就有着明显的相互独立。当然，CSS样式也可以以标签的形式写在网页文件的标签中，或是直接将CSS语句书写在某个元素标签的属性部分。,当同一个 HTML 元素被不止一个样式定义时，会使用 哪个样
3、式呢？一般而言，所有的样式会根据下面的规则层叠于一个 新的虚拟样式表中，它们产生作用的优先级别为如下顺 序：内联样式（在 HTML 元素内部）内部样式表（位于 标签内部） 外部样式表（以CSS文件独立存在）,CSS 语法CSS 语法由三部分构成：选择器、属性和值：selector property: value选择器 (selector) 通常是你希望定义的HTML元素或标签，属性 (property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）,例如：body color: blue 如果值为若干单词
4、，则要给值加引号：p font-family: “sans serif“;,如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，但是一般在每条声明的末尾都会加上分号，包括最后一条规则。这么做的好处是尽可能的减少出错的可能性。 p text-align:center; color:red; 在书写的时候可以每行只描述一个属性，以便使样式定义的可读性更强。 p text-align: center; color: black;font-family: arial;,1 、内联样式表 例如我们要设置一 HTML 页面中所有 H1 标题字显示为蓝色，其代码如下： This
5、 is a CSS samples . 页面内容 ,1.样式表信息包括在 和 标记中。 2.放到 和 中去。 3.整个页面中产生作用，,注意， 1. 标记中包括了 TYPE “text/css” ，这是让浏览器知道你是使用 CSS1 样式规则。 2. 加入 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。,在使用样式表时，经常会有多标志用同一个属性 比如：B color: red I color: red H1 color: red 用逗号分隔各个 HTML 标志，把三行代码合并成一行，我们可以写成： B,I,H1 color: red 同一个 HTML 标志，可
6、能定义到多种属性，例如，我们规定把从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为： H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: “ 黑体 “ 注意各个标志属性之间用分号隔开。,内联样式表还包括一种直接插入方式，即单独指定 HMTL 页面中某一个标志，规定其风格样式，可以写为： 定义该表格内的字符大小为 10pt ，颜色为蓝色。,2 、外部样式表 建立一个完全独立的文本文件，其扩展名为 .css ，文件内容则输入样式表信息，除去任何相关的 HTML 语言。 例如在外部样式表中输入：
7、body line-height: 130pt H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: “ 黑体 “ b font-style: italic; color: #FF3333; text-decoration: underline 少了 和注释标记。 保存为 example.css 。,有两种办法可以实现引用外部样式表。 （一）使用 标记链接外部样式表 HREF 中应包含路径信息。 一个 HTML 文档可引用多个外部样式表，例如： 首先链接的 example.css 作为该文档缺省样式表，当样
8、式定义产生冲突时首先满足前者。,（二）使用 IMPORT 导入样式表信息 存在于在 和 标记中 例如： import “example.css”; import “style/other.css”; 样式表产生作用的优先级按照导入的先后顺序来设定。样式表信息规则一多，就比较容易产生冲突。这时就看哪一个样式表被引用在前，它就是具有第一优先权的。,四、创建CLASS 同一个HTML标志有多种风格时。应该创建类（CLASS），也可直接插入方式可以一一的对之进行定义，但繁琐。定义语法为： 标志.类名 标志属性：属性值； 标志属性：属性值； 标志属性：属性值 引用方法是： ,例如，我们打算让某一些段落缩
9、进0.5in，另一些段落缩进1.0in，我们知道段落采用这个标记。 代码如下： This is a sample 这个段落将缩进0.5in 这个段落将比上面缩进一倍距离 ,可以直接定义CLASS，应用于HTML页面中的各个标记。其语法只是比上面的少了一个标志： .类名标志属性：属性值；标志属性：属性值；标志属性：属性值 例如： 引用的方法： 例如设置某单元格中的字符大小： 设置某一段落字符： ,用ID建立多种风格，实现同一规则被应用到页面中不同的地方。 语法是： #id名 标志属性：属性值；标志属性：属性值；标志属性：属性值 如上面的例子，可以改写为： 引用的方法也相同：。,伪类和伪元素 伪类
10、和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。伪类或伪元素规则的形式如选择符:伪类 属性: 值 或 选择符:伪元素 属性: 值 伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:选择符.类: 伪类 属性: 值 或 选择符.类: 伪元素 属性: 值 ,定位锚伪类 伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visite
11、d links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。A:link color: red A:active color: blue; font-size: 125% A:visited color: green; font-size: 85% ,首个字母伪元素 首个字母伪元素用于加大(drop caps)和其他效果 P:first-letter font-size: 300%; float: left ,五:常用的样式属性,文本属性,使用font-size、font-family、 color实现,宋体，字体大小12px,字体大小
12、16px,要实现如下图所示的文本样式，该如何编写？, P font-size: 12px;font-family: “宋体“;text-align:left; .bigFont font-size: 16px;color:red; 【新闻】设搜狐为首页 9月1日 世锦赛刘翔12秒95夺冠成就大满贯 我国实施不安全食品召回制度 遏制非法出口 ,声明P标签样式,声明名称为bigFont类样式,它可被多个标签共享,应用类样式用 class“类名“,五:常用的样式属性,背景属性,table background-image: url(images/type_back1.jpg);background-
13、repeat:no-repeat; ,设置背景图像为images文件夹下的type_back1.jpg,设置背景图像不平铺,五:常用的样式属性,边框属性,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin,border,padding,border-width 边框的宽度,padding-left 左填充,padding-bottom 下填充,五:常用的样式属性,边框属性,边界样式（border-style） 该属性用以定义边框的风格呈现式样。共有九种。 none 不显示边框，为缺省值 dotted
14、点线 dashed 虚线 solid 实线 double 双线 groove 凹线 ridge 凸线 inset 使整个方框凸起 outset 使整个方框凹陷上边界（border-top） 右边界（border-right） 下边界（border-bottom） 左边界（border-left） 边界（border） 这几个是简写属性，它集合了上面几种属性的特点，可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。,边界颜色（border-color） 这个属性定义边界的颜色，可以用16种颜色名或RGB值来设置。16种颜色名分别为：aqua, black, blue, fuchs
15、ia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。RGB值则应表示为#RRGGBB或r%,g%,b%。,#rrggbb (如，#00cc00) rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0) rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如，rgb(0%,80%,0%),尺寸属性 定义方框的宽度width和高度height。 例：DIV.sample width: 300px; height: 200px 浮动
16、和清除属性 浮动属性是指某一对象在母体元素内的浮动位置，清除属性和浮动属性一起使用，则表示同一母体内的其他对象可以流到浮动对象的旁边。 例： .float1 float: left; clear: right 假如这个样式定义在表格单元中的某个对象，则该对象将浮动在单元中的左边，而同一单元格中的其他对象在它右边的周围部分。, - #logofloat:right,这里是一个比较完整的例子，把这个例子按样输入，建立一个HTML文件，看看它的显示样式： a sample 这是一个关于边框属性的完整实例 看看它的显示风格 ,空白属性white-space 制表符、空格和换行泛称空白，HTML页面显示
17、时，通常根据浏览器窗口的大小自动折行，多余的空白符忽略成一个空格。标记可以控制文本在浏览器中的显示，但该标记的限制性很大，只对一些非比例字体才有效，并且每次用到这个命令框起所有文本也相当麻烦，空白属性提供了这种方便。 空白属性有三个值： 普通（normal）该属性值保持浏览器自动换行的特性。保持原样（pre）这个值与使用标记一样，告诉浏览器按照文本输入原样显示，并不自动折行。不折行（nowrap）这个值把文本中的回车、换行和多个空格都显示成一个空格，换行只由标记来控制。,列表属性 1)列表样式类型list-style-type 该属性用以改变HTML中列表项的外形显示。它有下列值：disc（圆
18、盘）、circle（圆圈）、square（正方）、decimal（小数点）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）。 2)列表样式图像list-style-image 这个属性用来指定图像作为列表标记，缺省值为无，当它被设置时，list-style-type属性不显示，可使用绝对或相对位置指定图像。 例：,3)列表样式位置list-style-position 该属性决定了列表项标记放在列表项的什么位置，它的值有inside（内部）和outside（外部）。缺省值为外部，列表下一行缩进显示；值为内部，列表下一行则不缩进显示。显示效果如下： 内部 内部显示
19、 外部 外部显示4)列表样式list-style 该属性提供了上述列表属性的快捷方法，其书写格式为： 元素 list-style:type position url 括号表示任选一种。,2、CSS网页布局与定位,DIV+CSS布局是现在比较流行的一种布局技术.DIV是HTML的标签，也就是Dreamweaver 里面的图层，我们可以把DIV标签看成是网页中的一块区域，在这个区域中可以添加各种内容。然后通过结合样式表来控制不同命名的DIV标签在网页中的显示位置，从而实现网页布局的效果。,认识DIV,CSS网页布局的核心是布局定位，首先搭建一个可视的排版框架，这个框架有自己在页面中显示的位置、浮动
20、方式。然后再向框架中填充排版的细节。这就是css布局定位的基本作用。而div标签存在的目的就是为了浮动与定位。Div是一个容器，应用标签，将内容放置其中。Div标签只是一个标识，作用是把内容标识成一个块区域，而这个块区域到底是什么样子，它概不负责，剩下的就由css来处理。,Div代码根据内容与表现的分离，只能拥有下面两种格式：Xhtml中的所有对象，几乎都默认为两种对象类型：,Block块状对象 块对象指的是当前对象显示为一个方块， 默认状态下，它占据整行，其他对象只能显示在下一行。In-line行间对象（或者称内联元素）与block对象相反， 它允许下一个对象与之共享一行进行显示。,因此，d
21、iv在页面中并非用于类似于文本那样的行间排版，而是用于大面积、大区域的块状排版。Div本身与样式没有任何关系。在CSS布局中，所要做的工作可以归纳为两件事：一是使用div将内容标记出来，二是为这个div编写我们所需要的css样式。,Div的属性 Width div中内容的宽度 Height div中内容的高度 Border div的边框，共四条边框border是个总属性，代表四条边具备相同的宽度、样式、颜色，如：border:2px solid #000;如果四条边不一样，border又可以分为四个二级属性：border-top, border-right,border-bottom, bor
22、der-left 比如：border-top: thin solid #000; 如果省略了颜色，默认为黑色。省略了粗细，默认适中大小，但是必须至少包含样式（solid）这个值,每个二级属性下又可以分三个三级属性。比如：border-topborder-top-widthborder-top-styleborder-top-color前提是必须设置了border的style样式后才能设置color和width样式。,如果按照width、style、color来分，border又可以分为如下三个二级属性：borderborder-styleborder-widthborder-color也是只有先设置style后，才能设置width和color属性。,Border的width属性值：thin（细）、medium（中）、 thick（粗）、固定值，比如2px Border的style常用属性值：solid(实线)、dashed(点划线)、dotted(点线)、none(无)，有些其他属性值浏览器不支持。 Border的color属性值：十六进制颜色值如：#FF0,或者red、yellow、black、blue等规定的颜色代词，但是最好不用，还是用#FFF这种标准的十六进制值。,
