CSS基础应用

来源：互联网发布：重复文件查找知乎编辑：程序博客网时间：2024/05/16 17:12

上一篇博文从思想理论方面阐述了对CSS的认识，思想理论离不开底层实践，本篇博文笔者将继续阐述CSS的在网页制作实战中的基础运用。

1、利用CSS控制页面的方式：

Css用于控制网页样式，实现样式信息与网页内容的分离，那么css是以什么形式打入网页内部进行操控的呢？

1.1、行内式：

在标记的style属性中，直接设定css样式。例如

行内式并没有体现出利用css进行页面样式控制的优越，与普通的标签设置元素属性没什么区别。

1.2、内嵌式：

内嵌式是将css样式集中写到网页的head></head>标签对的<style></style>标签对中。然后在该网页中需要使用到此样式的地方，直接使用该样式。格式如下：

<Html>

<head>

<styletype="text/css">

P{font-size:20px;text-decoration:underline;}

</style>

</head>

<Body>

</Body>

</Html>

在body中邪n个p标签，使用style里写好的css样式。

内嵌式缺点是如果网站包含很多网页，在每个网页中使用嵌入式，进行修改样式时也得挨个逐一修改，非常麻烦。且样式不利于复用。单一网页可以考虑使用嵌入式。

1.3、链接式:

将一个.css文件引入到HTML文件中，利用链接的方式引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，（可直接拖拽实现）使用语法如下：

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

1.4、导入式:

将一个独立的.css文件导入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

@import url(common.css); 此处要注意.css文件的路径

</style>

链接式 vs导入式

链接式会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

做网站时一般常把整个样式都写好，存放在单独的样式表中，再采用链接式引入一个总的CSS文件，如果有需要，再这个CSS文件中再使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。

2、CSS常用选择器：

2.1、元素选择器：

css选择器中最基础的就是元素选择器，样式使用在哪个元素中，则该元素便由该样式来控制界面显示效果。具体使用如下:

h1 {color:blue;}

h2 {color:silver;}

2.2、类选择器：

允许以一种独立于元素的方式来指定样式。如下，把common样式写好，在元素中直接使用。

.common{ color:blue;color:silver;}

h2 {color:silver;}

2.3、ID选择器：

使用方式类似于类选择器，用#号书写样式，同时引用ID即可。与类选择器不同的是，ID选择器在文档中只能使用一次，且不可结合使用。详见。。。。

#common{color:blue;color:silver;}

除了上述三种常用选择器外，随着css的更新还浮现了别的选择器，例如css2提出的属性选择器，大家有兴趣可以多查阅，本文不再赘述。

3、CSS样式：

Css样式中，分别针对文本、图片、页面布局、表哥表单等进行控制。具体应用都比较基础，也很容易上手，详见点击打开链接此处不再赘述。

4、总结

Css之所以被广泛接受，很重要一点就是它易上手，符合大家平时编程习惯，结合html、xml、js、ajax等技术，实现动静交替转化的神奇过程。对于和CSS相结合的常用技术，笔者还需继续研究再总结。敬请期待。

0 0