CSS基本语法 和 样式规则

一、CSS简介

CSS(Cascading  Style  Sheet)层叠样式表,它是用来美化页面的一种语言,之前提到的W3C规范中的“样式”。

作用:

1、美化界面。

2、页面布局。

基本语法:

选择器{

样式规则

}

样式规则:

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

。。。

选择器:是用来选择标签的,选出来以后给标签加样式。

从Hello World说起,

<p style="background-color:#FFF;color:#000;font-size:30px;">Hello World!</p>

这样写可以实现将原本的白底黑字Hello World! 改成样式为 黑底白字的效果。但是这样写有一定的缺点:

缺点1:内容、样式、行为三者未分离,代码糅杂,不符合W3C规范,难以维护。

缺点2:代码冗余,不可复用。


二、如何引入CSS?

1)行内样式

即上述的一般形式,由于其存在的缺点,介绍下一种样式。

2)内嵌样式,给p标签加样式,加在head标签中

<style type="text/css">

p{

background-color:#FFF;

color:#000;

font-size:30px;

}

</style>

当本页面的p标签都需要相同的样式时,这样写大大降低了代码量,并让其他编程人员一眼分辨出来CSS样式。

3)链接样式(链入式)

在head标签中加入

<link href="../css/my.css" type="text/css" rel="stylesheet"/>

将CSS文件和html文件分开来放,这样增加了代码的重用性,但是每个浏览器都要单独读取css文件中的样式,比较慢,如果追求速度,内嵌样式会更好。

4)导入样式

<style type="text/css">

@import url("路径名");

</style>


四种样式的优先级:

如果一个页面中四种样式同时存在,这四种都会对标签起作用,但是重复样式的属性值,只有最后一个有效。如果内嵌样式和导入样式放在一起,则内嵌样式起作用。

如果内嵌样式和导入样式分成两个style定义,则在CSS样式中的最后一个style起作用。


附:css中注释的格式,没有单行注释,所有的注释均是/*注释内容*/






阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页