CSS入门（1）

最新推荐文章于 2024-08-18 22:48:32 发布

Saltyswordfish

最新推荐文章于 2024-08-18 22:48:32 发布

阅读量124

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Salttswordfish/article/details/124882264

版权

1.1什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)

CSS:表现（美化网页）

1.2CSS发展史

20世纪90年代初，HTML语言诞生，各种形式的样式表也随之出现。但随着HTML功能的增加，外来定义样式的语言变得越来越没有意义了。1994年，哈坤.利提出了CSS的最初建议，伯特.波斯(Bert Bos)当时正在设计一个叫做Argo的浏览器，它们决定一起合作设计CSS。发展至今，CSS已经出现了4个版本，具体如下：
1. CSS1.0
1976年12月W3C发布了第一个有关样式的标准SS1.0。这个版本中，已经包含了m的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
2. CSS2.0
1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。
3. CSS2.1
2004年2月，CSS2.1正式推出。它在CSS2.0的基础，上略微做了改动，删除了许多不被浏览器支持的属性。
4. CSS3
早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。

1.3快速入门

命名规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

</body>
</html>

单独CSS文件

   /*规范*/
   /*     语法:*/
   /*     选择器｛*/
   /*     声明1；*/
   /*     声明2；*/
   /*     声明3；*/
   /*｝*/

h1{
color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</body>
</html>

CSS的优势

    1、内容和表现分离
    2、网页结构表现统一、可以实现复用
    3、样式十分的丰富
    4、建议使用独立于html的css文件
    5、利用SEO，容易被搜索引擎收录

1.4四种CSS导入方式(就近原则)

行内样式、内嵌样式、链接样式、导入样式

1、行内样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<h1 style="color: blueviolet">这是行内样式</h1>
</body>
</html>