css学习(1)

用CSS布局，首先要清楚思想：首先要先思考页面内容的语义和定义，先不考虑外观。这和我们传统的table表单定义刚好相反。

 

在多次使用table布局页面之后，总是觉得用代码来编写页面显得很力不从心，不知道从哪个方面入手，觉得不能所见即所得，一定要在脑子里面给自己硬加一个摸板，其实不然。我们应首先从内容入手，考虑的是结构。

第一步是分析你所需要的功能块：

如主页面内容，导航菜单，子菜单，功能框，等等。然后给他们配置以响应的div。如

<div id=”header”> </div>

这样就可以把原本只有head title body的功能块分成多个结构。注意这里谈到的仅仅是网页所要表达的结构。然后结构定义完成之后再做相应的布局，这时候使用的是css 。

 

良好的HTML页面几乎没有表现属性的标签，代码十分干净简单。

 

Css的float属性可以浮动任何元素：图片，段落，DIV，标题，表格，列表等等。当指定float元素时，必须给这个浮动元素定义一个宽度。

 

 

Xhtml规范：

1．  为页面添加正确的DOCTYPE

2．  设定一个名字空间

3．  申明你的编码语言

4．  用小写字母书写所有标签

5．  为图片添加alt属性

6．  给所有属性值加引号

7．  显示关闭所有标签：所有标签都要有关闭标签

8．  收藏夹小图标

9．  用css定义外观元素

l         颜色值

l         定义字体

l         群选择器：元素之间用 ，分隔

l         派生选择器：给一个元素的子元素添加定义

l         Id选择器

l         类别选择器： 点开头表示类别选择器

l         定义链接样式：a:link a:visited a:hover a:active

l         组合使用选择器

l         缩写时按照顺时针的顺序

l         行高

10．              结构化代码 div id class

11．              制作良好的网站可以到w 3c 进行校检

 

调用样式表：

外部调用样式表：

<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all”/>

双表法调用样式表：

有些在外部调用之后还要加上一句

<style type=”text/css” media=”all”>@import url </style>

表示当你希望某些效果在netscape4.0浏览器中隐藏，在4.0以上其他浏览器中又显示的时候采用。

 

为搜索引擎准备的内容：

l         允许机器人搜索站内所有链接：

<meta contant=”all” name=”robots”/>

设置站点作者信息：

<meta name=”author” content=ajie@123.com,姓名/>

设置站点版权信息：

<meta name=”Copyright” content=”www.w3cn.com,自由版权，任意转载”/>

站点的简要介绍（推荐）：

<meta name=”descripitong” content=”新网页设计师，web标准的教程站点，推动web标准在中国应用”/>

站点的关键词（推荐）：

<meta name =”keywords” content=”designing,with,web,standards,xhtml,css,graphic,dsign,layout

,usability,w 3c ,w3,w3cn,ajie”/>

 

 

 

Css:

定义div

Margin:层的边框以外留的空白，用于页边距或者和其他层制造一个间距。

Padding:层的边框到层的内容之间的空白。

Border：层的边框  solid 直线  dotted 虚线。

 

 

把网页上的对象都放在一个盒（box）中，设计师可以通过定义来创建这个盒的属性，这些对象包括段落，列表，标题，图片，以及层。

盒模型主要定义四个区域：内容（content）,边框距(padding),边界(border)，边距(margin)

 

*辅助图片一律用背景处理。

思维方式的转换：所有的辅助图片都用背景来实现。

Background:url(image/bg_poem.jpg) #ffffff no-repeat right bottom;

辅助图片：不作为页面表达内容的一部分，而仅仅用于修饰、间隔、提醒的图片。

原因：将表现与结构彻底分离，用css控制所有外观表现。

 

 

Css十八技巧：

1．  使用css缩写。

2．  明确定义单位。只有两种情况可以不定义单位：行高和0值。不要在数值和单位之间加空格

3．  区分大小写：建议所有定义名称都采用小写

4．  取消class,id前元素的定义。省略前面元素的限定

5．  默认值：通常padding默认值是0，background默认值是transparent.。可以在样式表一开始定义所有元素的margin和padding值都为0。

6．  不需要重复定义可继承的值。但浏览器可能用一些默认值覆盖你的定义。

7．  最近优先原则

8．  多重class定义： <div class=”one two”></div>

9．  使用子选择器：

10．              不要给背景图片路径加引号。引号可有可不有，但是为了方便可以不写

11．              组选择器。 H1,h2,h3{}

12．              用正确的顺序指定链接样式：当用css定义多个样式单时，要注意他们的书写顺序  :ling :visited :hover :active

13．              清除浮动：

14．              横向居中：用auto属性定义横向居中，如

        #wrap{width=”760px”;margin:0 auto;}

15．              导入(import)和隐藏css

16．              针对IE的优化：

(1)    注释的方法：

  

(2)    条件注释

 

详见css注释方法

17．              调试技巧，层有多大：通常在出问题的层上定义一个背景颜色，这样就能很明显的看到层占据多大空间。

            另外一个经常出问题的属性是outline

18．              Css代码书写样式：

 

 

在HTML中定义为id=”divid”时，在css对应的设置语法应该是#divid{}

在HTML中定义为class=”classid”时，在css对应的设置语法应该是.classid{}

如果id=”divid”这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divid img{}，相同的  对于class来说应该是.classid img{}

 

 

Float=left 设置内容在同一行。

 

用css去构件页面的时候宽度设置多为用固定的px值 一般不使用百分比。

 

Css的层次： 一个div包含有两个子div，在设置CSS的时候要将每个都设置成固定的px值。或者将外层设置背景色成100%  里层一定要使用px值。

  由于css设置div的时候并没有一个包容的关系在里面（这一点是和table要区分开的），包容并不代表着大小也包容。所以当你设置外层是600PX，里层是100%的时候宽会自动覆盖前面的成为整个页面的100%。（感觉这就好象是java中的继承与重勾一样去理解就可以了）