1、Web之美,浅谈CSS,Azure 陈恩明,CSS概念含义与基础语法 CSS与html 选择器 CSS样式 盒状模型 定位 DIV+CSS 一些想法与心得,版权所有啊，你们懂的,CSS的概念含义,CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中,CSS与HTML,两个文件：单文件：, /*CSS*/ ,CSS的基础语法,CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
2、。,selector declaration1; declaration2; . declarationN ,CSS基础语法,属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。,h1 color:red; font-size:14px;,CSS基础语法,大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：,body color: #000;background: #fff;margin: 0;padding: 0;font-family: Georgia, Palatino
3、, serif;,选择器,如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：,html color:black; h1 color:blue; h2 color:silver;,选择器中值的不同写法,p background-color: gray; 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：为了节约字节，我们可以使用 CSS 的缩写形式：,p color: #f00; ,p color: #ff0000; ,选择器中值的不同写法,我们还可以通过两种方法使用 RGB 值：,p color: rgb(
4、255,0,0); p color: rgb(100%,0%,0%); ,CSS 类选择器,在 CSS 中，类选择器以一个点号显示：,这是green theme这是red theme,p.green_themebackground-color:#0F0 p.red_themebackground-color:#F00 ,CSS,HTML,CSS ID选择器,id 选择器以 “#“ 来定义。 用“#”跟“id”配合使用：,#red color:red; #green color:green;,这个段落是红色。 这个段落是绿色。,CSS 属性选择器,下面的例子为带有 title 属性的所有元素设置
5、样式：,title color:red; ,CSS 样式-背景,可以使用 background-color 属性为元素设置背景色。,p background-color: gray;,CSS 样式-文本,这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：,p text-indent: 5em;,CSS 样式-字体,如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：,body font-family: sans-serif;,CSS 样式,CSS中的样式部分多为细小点，内容大同小异，皆可在网上轻松查阅，这里只
6、举几个实例，不多做赘述。不过要注意：正是这些细小的部分，不断的拼接组合，换成不同花色，配以不同的特效，才组成这一张张漂亮的页面。,CSS 盒状模型,元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。话不多说，上图：,Width：30px,Padding:5px,Margin:10px,border,CSS盒装模型 代码样例,p border-style: solid; border-width: 5px;,hello!this is what!hello helllllllllll
7、llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllo! ,CSS定位,CSS 定位 (Positioning) 属性允许你对元素进行定位。 “一切皆为框”：div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。,定位的分类,相对定位 绝对定位 浮动,#box_relative position: relative;left: 30px
8、;top: 20px; ,#box_relative position: absolute;left: 30px;top: 20px; ,相对定位,绝对定位,CSS定位-浮动,请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：,CSS定位-浮动,浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。 因此，创建浮动框可以使文本围绕图像：,DIV,DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。 DIV本身就是容器性
9、质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码,什么是DIV+CSS,DIV+CSS布局 这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了,DIV+CSS布局,DIV+CSS布局入门,color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color colo
10、r=#aaaaaa/color ,DIV+CSS布局入门,/*基本信息*/ body font:12px Tahoma;margin:0px;text-align:center;background:#FFF; /*页面层容器*/ #container width:100% /*页面头部*/ #Header width:800px;margin:0 auto;height:100px;background:#FFCC99 /*页面主体*/ #PageBody width:800px;margin:0 auto;height:400px;background:#CCFF00 /*页面底部*/ #
11、Footer width:800px;margin:0 auto;height:50px;background:#00FFFF,DIV+CSS优点,结构化HTML，提高易用性 结构清晰，表现和内容相分离。 更好的控制页面布局。 结构的重构性强，缩短改版时间。 大大缩减页面代码，提高页面浏览速度，缩减带宽成本,一些想法与心得,CSS的语言从开始接触，学习到理解并不是很难。 细节较多，应该多做练习 多关注一些潮流网站以及潮流技术 多上 你们懂的 仅仅3天的CSS学习，肯定有细节疏漏错误之处，希望能够起到抛砖引玉的作用。,点开IE，一张张漂亮的网页，舞动的文字，网站的设计师们，不，应该说他们是虚拟世界的造物主，他们正像艺术家一样，在虚拟的世界中，用他们的灵感将枯燥的程序语言糅合在一起，勾勒出美妙的虚拟世界，这也就是所谓的“web之美”吧。-Azure 陈恩明 -2011.7.21,
