css小知识

CSS知识

Web网站开发

功能设计与实现

外观设计： 舒适与和谐，美观又实用

CSS外观 设计

页面和控件的背景色

页面和控件的网页布局

页面和控件的前景色

页面和控件的外观样式

页面和控件的……

页面和控件的字体

CSS

级联样式表

一种设计网页样式的工具，借助CSS的强大 功能，网页将在你丰富的想象力下千变万化

是W3C为弥补HTML在显示属性设定上的不 足而制定的一套扩展样式标准，它重新定义 了HTML中文字显示样式，并增加了一些新 的概念，如类、层等，可以实现对文字重叠、 定位等显示效果

§ §

CSS样式表定义

通过HTML标签定义样式表

使用id定义样式表

使用class定义样式表

样式表定义

通过HTML标签定义样式表

 •基本语法： 引用样式的对象{标签属性:属性值；标签属性:属性值；标签属性:属性值；……} 

•CSS规定，如果属性名称是两个或者两个以上的单词组成的时候，单词之间以 “-”隔开，

如背景颜色属性background-color： h1,h2{text-align:center;color:blue}

样式表定义

使用id定义样式表

 •在HTML页面中id选择符用来对某个单一元素定义单独的样式，定义id选择符 要在id名称前加上一个“#”号。 

•基本语法： 

#id名称{标签属性:属性值；标签属性:属性值；标签属性:属性值；……} 

•例如：

 #sample{font-family:宋体;font-size:60pt}，

段落文本

。

样式表定义

使用class定义样式表 

•使用CSS类，可以为同一元素创建不同的样式或者为不同元素创建相同的样式。

 •基本语法： 

（1）标签名.类名{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}         

 例如：h1.center{text-align:center}，该center类的样式只能用在

标签上。 

（2） .类名{标签属性:属性值；标签属性:属性值；标签属性:属性值；         

 例如：.text {font-family: 宋体;color: red;}                     

段落文本

在HTML中加入CSS

嵌入式样式表

内联式样式表

外联式样式表

加入样式表

嵌入式样式表 

•嵌入式样式表最简单，只要在需要应用样式的HTML标签上添加CSS属性就可 以了。主要用于对具体标签做具体的样式设置，作用范围也只局限于本标签 

•例如：

     

我爱我的祖国

这个样式表只是让当前的

标签对中的文字为红色，字体大小为10pt。

加入样式表

外联式样式表 

•外联式样式表是将定义好的CSS单独放到一个以.css为扩展名的纯文本 文件中，再使用标签链接到网页中

 •优点：便于使用，容易修改 

•定义一个样式可以用到大量网页中，从而使整个站点风格保持一致， 避免重复的CSS属性设置 

•当遇上站点改版或者某些重大调整要对风格进行修改时，可直接修 改CSS文件，而不用打开每个网页进行修改 

•例如：

   

总结

•CSS是级联样式表，级联是指继承性，即在标签中嵌套的标签继承外层 标签的样式 

•级联的优先级顺序是：

嵌入式样式表（优先级最高）

内联式样式表其次

然后是外联式样式表

浏览器默认（优先级最低）

当样式表继承遇到冲突时，总是以最后定义的样式为准 

END