CSS初涉

2024-08-26 21:32

文章标签 css frontend 初涉

本文主要是介绍CSS初涉，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

为什么会有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文件中：