Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2857387
  • 博文数量: 471
  • 博客积分: 7081
  • 博客等级: 少将
  • 技术积分: 5369
  • 用 户 组: 普通用户
  • 注册时间: 2012-01-04 21:55
文章分类

全部博文(471)

文章存档

2014年(90)

2013年(69)

2012年(312)

分类: Html/Css

2013-01-20 17:00:17

publish.docx

一、理解表现和结构分离

1、内容:就是制作者放在页面内真正想要让访问者浏览的信息

2、结构:使内容更加具有逻辑性和易用性[类似于:12级标题、正文、列表等把它们称为结构]

3、表现:用于修饰内容的外观的样式的东西称为表现。

4、  行为:对内容的交互及操作效果,如通过javascript判断表单提交等

二、CSS语法结构

选择符 { 属性: }  例如:body{font-size:12px;}

参数说明:

1、选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,如body,h1;也可以是定义了特定的idclass的标签,如#main选择符表示选择

,即一个被指定了mainid的对象。

2、属性(proprety):选择符的样式属性,如颜色、大小、定位、浮动方式等。

3、值(value):是指属性的值。

4、同时可以为一个选择符定义多个属性,每个属性之间用分号“;”分隔,每赋完值都要加上分号才标准

 

三、CSS在网页的中应用方式

1、内联式样式表:直接写在现有的标记中,如:

这里文字是红色的


2、嵌入式样式表:使用“标签嵌入到HTML文件的头部中标记内,如:

用于当浏览器不支持样式表时,不会将样式表内容显示出来

3、外部链接式样式表:将样式表写在一个独立的.css文件中,然后在页面head标记内用标签调用它,如:

比较常用

4、导入式样式表:导入式样式表与链接式样式表的功能基本相同,只是语法和动作方式上略有不同,同样也将导入样式代码写在标记内。

语法:

四、CSS选择符类型

1、类型选择符:

就是HTML文档中的元素[作用于html标记]

如:p{属性:}

2、类选择符:可以自己定义样式,应用于一个或多个网页元素,类在网页中可以出现多次,用于定义重复的样式。类以英文“.”开头,后面的名字自己定义,类定义后还需要在网页中加入class=类名称,加以调用。

如: .warning {属性:}   

……

 


3ID选择符:与类基本相似,只是以英文“#”开头,因为ID具有唯一性,所以在网页中只能出现一次,用于定义只出现一次的样式。

如:#main {属性:}

……

 


4、包含选择符:语法e1 e2 {属性:}

l  含义是所有被e1包含的e2

l  如:table td {属性:}

5、同时给某个元素应用多个类与ID

  a2” id=“a6”>……

6、选择符分组:将同样的样式定义用于多个选择符,选择符之间用逗号分隔。

如:p,div,.waring {属性:}

7 8点比较少用

7、标签指定式选择符:如果既想使用idclass,也想同时使用标签选择符

l  h1#content{} 表示针对所有idcontenth1标签

l  h1.p1{} 表示针对所有classp1h1标签

8、组合选择符:将以上选择符进行组合使用

l  h1 .p1{}表示h1标签下的所有classp1的标签

l  h1 .p1,#content h1{}

五、CSS样式的特点

1、继承:

l  网页中子元素,将继承父元素的样式

l  例如:要控制段落p中的文字大小,可以直接给body标记加样式。

2、层叠:

l  网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖掉父元素的样式。

l  后面定义的样式,会覆盖前面定义的样式。

六、CSS样式的优先权

1、四种方式的优先权:

内联式[行内样式]----->内嵌式[内部式]----->链接式[外部式]---->@import导入式

l  CSS优先权:就近原则

l  作用范围越小,优先权越高。

l  离要修饰目标越近的样式优先权越高。

2、选择符优先权:

l  行内>id>class>类型选择符

阅读(1335) | 评论(0) | 转发(0) |
0

上一篇:javascript--函数

下一篇:CSS简明教程二

给主人留下些什么吧!~~