CSS初涉

来源：互联网发布：博卡软件多少钱编辑：程序博客网时间：2024/05/07 04:00

为什么会有CSS？

之前仅仅通过HTML来控制页面显示时，例如改变颜色：修改样式颜色时候只能通过对每一个标签进行修改来进行。为了改进这种繁杂的操作，引入了CSS层叠样式表从而分离了页面内容以及页面显示设置。

      <h2><font color=”#0000EF” face=”黑体”>CSS学习</font></h2>

下面通过使用CSS和未使用CSS前后代码对比为例：

（未使用CSS代码）

 <html>   <head>      <title>未使用CSS的HTML</title>   </head>   <body>      <h2><fontcolor=”#0000EF” face=”黑体”>静夜思 </font></h2>      <P>床前明月光</P>      <h2><font color=”#0000EF” face=”黑体”>疑是地上霜</font></h2>      <p>举头望明月</p>      <h2><font color=”#0000EF” face=”黑体”>低头思故乡</font></h2>   </body></html>

（使用CSS代码）

<html> <head><title>未使用CSS的HTML</title><style> h2{  color:blue ;font-family:”黑体”;}</style></head><body>  <h2>静夜思</h2>  <P>床前明月光</P><h2>疑是地上霜</h2><p>举头望明月</p><h2>低头思故乡</h2>  </body> </html>

通过简单的代码比较，发现使用了CSS之后，对于字体、颜色等显示效果的设置，不必像之前那样，每一句都写在<body>标签当中，集中在<head>里的<script>标签中，符合面向对象的思想。

CSS的概念：

1、什么是CSS？

中文译为层叠样式表，用于控制网页样式并将网页样式和网页内容相分离的一种标记性语言。和之前学习过的Javascript相似属于一种补充式的语言，用于使得HTML页面更加美观，且运行时使得所占带宽减小。

2、CSS基础学习

引入CSS对于页面样式进行设计，有如下三种方式进行操作：

（1）行内样式

<body>   <p style=”color:blue;font-family:”黑体”;font-size:20px;”>使用行内样式</p></body>

可维护性不强，但是适合于对单句进行标记。

（2）内嵌样式

<html> <head><title>内嵌式CSS样式</title><style type=”text/css”> p{  color:blue;font-family:”黑体”;}</style></head><body>  <P>使用内嵌式进行设计</P>  </body> </html>

这种设计方式也是CSS较为常见的一种方式，通过在head部分和body部分将样式与内容进行分离，从而实现效果，使得页面瘦身，而且维护性增强。

（3）链接样式

 <html>    <head>        <title>链接式CSS效果</title>        <linkhref=”CSS1.css” type=”text/css” rel=”stylesheet”>                             </head>    <body>        <h2>链接式CSS样式</h2>    </body></html>

在CSS1.css文件中：

h2{    color:blue;}

链接式除了将样式和内容分离之外，将样式与HTML页面进行了分离，这种操作是HTML页面设计最为常用的一种手法。

总结：

对于CSS的认识，在牛腩新闻发布系统已经接触，在js之后学习更加容易上手，其强大的功能有待于进一步的学习。

2 0