css样式表

CSS发展史

•1996年12月 css第一版诞生。

•1998年5月 css2正式发布

•2004年 css2.1发布

•Css3的发布……。不是一个时间而是一个时间段

CSS的基本概念

–CSS是层叠样式表(Cascading Style Sheet)

CSS的作用

用于控制网页的外观，修饰和美化html标签的,实现了结构和形式的分离。

使用CSS+DIV的优点

采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优

1：表现和内容相分离

2：提高页面浏览速度

3：易于维护和改版

–样式的定义方式

选择器{样式1：样式值1；样式2：样式值2；……}

样式表的分类

1、行内样式表

在html标记内，使用style属性定义css样式。

如：<p style=”color:#00ffdc;”></p>

、内嵌样式就是将css添加到<head>与</head>之间，并用<style></style>标记声明的一种样式。

　　语法如下：

<style>

　　/*这里写css内容*/

</style>

3、在外部定义css样式表，通过<link/>链接标记链接到页面中的一种样式。

语法：

4、在外部定义css样式表，通过导入方式链接到页面中的一种样式。

语法：

<style>

　　 @import url();

</style>

样式表优先级

•就近原则

CSS选择器

•样式的定义方式

选择器{样式1：样式值1；样式2：样式值2；……}

–Css选择器

•全局选择器

设置所有标签使用同一样式，用*来表示

全局选择器语法:*{ }

•标签选择器

标签选择器的语法：p{}

类选择器

类选择器：用来为一系列标签定义相同的样式

类选择器的语法: .classname{}

先定义

.blue{color:#00000ff;}

然后再引用

<h2 class=“blue” >一站式建店</h2>

ID选择器

ID选择器的语法:#idname{}

先定义

#green{color:#0000ff;}

再引用样式

<h2 id=“green” >一站式建店</h2>

用法和class类似，但要注意同一id名在同一个页面中只能出现一次

选择器的优先级及权重

• 行内>id>class>element>*

•权重：

–行内/1000

–id/100,

–class/10,

element/1,

*/0

•基础样式属性

•Color：颜色；规定颜色值为颜色单词名称例如（red）或者十六进制值得颜色例如（#ff0000）或者为rgb值得颜色例如（rgb(255,0,0)）；

•Width:宽度；设置元素的宽度值，值为数字；单位为px（像素)、em（字符）、%（百分比）；默认值为auto（自动，通过浏览器自动计算出宽度值单位为像素）

•Height：高度；设置元素的高度值，值为数字；单位为px（像素)、em（字符）、%（百分比）；默认值为auto（自动，通过浏览器自动计算出宽度值单位为像素）

•Background-color:背景颜色；规定颜色值为颜色单词名称例如（red）或者十六进制值得颜色例如（#ff0000）或者为rgb值得颜色例如（rgb(255,0,0)）；

•Inherit：属性值，大部分属性都有该属性值意义为继承。

颜色值的表示法

•单词表示法

–Red green blue yellow pink orange…

•十六进制表示法

–#ff0000 #00ff00 #0000ff #000000 #ffffff

–#f00 #0f0 #00f #000 #fff

•Rgb表示法

–(255,0,0)

•Rgba表示法

–(255,255,0,0.3)

posted on 2016-09-03 18:59 ayal 阅读(157) 评论(0) 收藏举报