css层叠样式表

最新推荐文章于 2025-09-10 11:07:46 发布

转载最新推荐文章于 2025-09-10 11:07:46 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zuiranlanyan/p/10637544.html

文章标签：

#前端 #javascript #ViewUI

本文介绍了CSS层叠样式表的基础知识，包括其优势、编辑方法及如何使用不同选择器来定义样式。并通过一个实例演示了如何利用外部样式表进行网页设计。

学习web的第五天

CSS层叠样式表，也称为级联样式表，用来设计网页风格。

老师说内联样式表不介意我们使用，我们只要了解并掌握就行了，重点给我们讲解了外部样式表。

css的优势：1、表现和内容相分离，css通过定义html标记的样式，使得页面内容和显示相分离，简化了网页格式设计。 2、加强了网页的表现力。 3、增强了网站风格的一致性。

css编辑方法：1、写在html文件里（内部样式表） 2、写在独立的*.css文件里（外部样式表）

选择器：1、标记选择器——对html的标记重新定义，该样式立即生效。 2、类选择器——以点号"."开头，并可以任意命名，该样式应用后生效。 3、ID选择器——以"#"开始，可以任意命名。

内联样式表的格式：

<head>
    <style type="text/css">
      body{background:#ccc;} /*标记选择器*/
      #p1{color:#222;size:14px;}  /*id选择器*/
      .pic{float:right;padding:20px;}  /*类选择器*/
     </style>
</head>
<body>
   ……
   ……
   ……
</body>

外部样式表引用方法：（在<head>标签部分引用）

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

简单的做了个例子：

　　html部分代码：

<!DOCTYPE html>
<html>
    <head>
        <title>简单网页制作</title>
        <link href="css1.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1 id="hh1">Web前段开发技术课程简介</h1>
        <hr />
        <p class="p1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《Web前端开发技术》课程是计算机科学与技术、信息管理与信息系统、软件工程等专业的一门基础课程，也是其他计算机相关专业的公共基础课程，通过对Web前端开发三大主流技术学习和研究，让学生理解和掌握HTML、JavaScript、CSS等相关知识，通过实验培养学生设计与开发Web站点的基本操作技能。</p>
    </body>
</html>

　　css部分代码：

#hh1{text-align:center;}
.p1{background:#ccc;color:red;}

结果：

转载于:https://www.cnblogs.com/zuiranlanyan/p/10637544.html