第1章 CSS的初步体验_css初步体验-CSDN博客

本文链接：https://blog.csdn.net/junqiand/article/details/80473872

一个网页一般由3部分组成：HTML、CSS和JS，其中html负责数据内容，CSS负责样式外观，JS负责行为，从而有效地将数据、样式和行为隔离，降低耦合度。

1.1 CSS的概念

CSS（CascadingStyle Sheet），中文为层叠样式表，用来控制网页样式并将样式外观和网页内容分离的一种标记语言。1996年由W3C组织审核并推荐。一句话概括CSS的功能就是让网页更好看。

1.1.1 传统HTML的缺点

维护困难

举个例子：

<h1><fontcolor=”red”>css概念</font><h1><br/>
<h1><fontcolor=”red”>css概念</font><h1><br/>
<h1><fontcolor=”red”>css概念</font><h1><br/>

现在需要将上面的字体颜色改成蓝色，则需要改3处。假如整个页面字体颜色都要改呢？甚至是多个页面都要改呢？很难想象，这个工作量多么艰巨。

标记不足

HTML标记基本上都是为了内容服务的，而关于样式的标记很少

网页过胖

由于没有统一的样式标记，导致网页传输时占用了较大带宽

定位困难

缺乏灵活的定位标记，而只能通过table标签进行定位，造成后期维护困难

1.1.2 CSS开发工具

notepad
dreamweaver
notepad++
aptana studio
myeclipse + aptana插件

推荐aptana studio或myeclipse+aptana插件，aptana具有非常友好的提示功能。

`1.1.3 浏览器兼容性`

不同的浏览器对CSS的支持力度不一样，请写完CSS后，一定要在各个浏览器上进行调试，以满足要求。

`1.2 CSS的使用`

在HTML页面中使用CSS有4种方式，分别为：行内样式、链接式、内嵌式、导入式。

CSS采用用/* */进行单行或多行注释。

`1.2.1 行内样式`

行内样式直接在标签中使用style属性，如下所示：

<pstyle=”color:red”>CSS行内样式</p>

这种方式有如下两个缺点：

- - - - 不符合W3C规范（内容、样式、行为三者分开），并且代码乱，不好维护。
      - 代码冗余，相同的style得写多次，不可复用。

`1.2.2 内嵌式`

内嵌式将CSS代码写在标签<style>和</style>之内，如下所示：

<head>
   <style type=”text/css”>
        <!—
            P{
                 color:red;
             }
         -->
  </style>
</head>

其中<!-- à是为了解决某些浏览器不支持CSS的问题；<style>css代码</style>一般放在head标签内。

这种方式仅适合于一个页面特殊样式的设置，但如果多个页面有同样的样式就不满足了。

1.2.3 链接式

链接式将CSS代码写到一个单独的CSS文件中，然后通过link标签将CSS文件链接到HTML文件中，如下所示：

<head>
     <link href=”1.css” type=”text/css” rel=”stylesheet”>
</head>

1.css文件内容
P{
     color:red;
 }

这种方式是目前最常用的使用方式，它的优势在于：内容和样式完全分离，可以将一个css文件应用于多个页面，可以在浏览器本地缓存。不足之处：太多的css文件下载会导致服务器连接压力增大。

1.2.4 导入式

导入式将CSS代码写到一个单独的CSS文件中，然后通过import将CSS文件导入到HTML文件中，如下所示：

  <head>
       @import1.css
   </head>

   1.css文件内容
   P{
       color:red;
    }

导入方式有如下6种方式：

@import1.css

@import‘1.css’

@import“1.css”

@importurl(1.css)

@importurl(‘1.css’)

@importurl(“1.css”)

可以在一个HTML文件中用导入式导入多个CSS文件，也可以在某个CSS文件内部导入其它的CSS文件。

1.2.5 各种方式比较

若四种方式同时使用，那么他们都会生效果；

若碰到相同的属性，且都修改了同样属性，后定义的生效；

如何选择使用内嵌式还是链接式？

内嵌式虽然没有解决多个html页面服用一个css样式的问题，但是浏览器在加载的时候只需要加载这一个css样式，速度比较快。而链接式，若一个html页面用多个css样式，那么在浏览器加载的时候每个css文件都得单独下载，速度相对内嵌式较慢。根据实际情况考虑，若追求的是速度，对代码复用问题不较真，推荐使用内嵌式若追求的是代码的可服用，那么就得舍弃一点速度，来使用链接式来嵌入CSS样式。

如何选择使用链接式还是导入式？

链接式是将CSS文件下载完成后再将HTML内容和CSS样式一起渲染。而导入式是先渲染HTML，再渲染CSS，因此在网络不好的情况下，会让用户看到一个毫无美感的页面。这也是现在大部分网站的CSS都采用链接方式的最主要原因；

导入样式可以避免过多页面指向一个css文件。当网站中使用同一个CSS文件的页面不是非常多时，这两种方式在效果方面几乎是没有不同的，但网站的页面数达到一定程度时（比如新浪等门户），如果采用链接的方式可能就会使得由于多个页面调用同一个CSS文件而造成速度下降，但是一般页面能达到这种程度的网站也会有资本用最好的硬盘，所以这方面的因素也不用怎么担心。