初识css3

最新推荐文章于 2024-06-29 06:36:59 发布

小旭的前端笔记

最新推荐文章于 2024-06-29 06:36:59 发布

阅读量276

点赞数 1

分类专栏： html5 css3 js完整教程文章标签： css3 css html

本文链接：https://blog.csdn.net/ljxvvds/article/details/128166758

版权

html5 css3 js完整教程专栏收录该内容

12 篇文章 3 订阅

订阅专栏

从今天起，我们正式开始了css3之旅，要是说html是一朵花，那么css3可以为它增贴色彩，而js能为这朵五彩斑斓的花增加香气。话不多说，我们先来认识一下css3吧！

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 [1] 。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂.

这是它的定义，也许听不懂。概括起来就是给html中随便一个标签增贴属性，让它输出的内容是蓝色，也可以是绿色，随便什么颜色。看你的心情。

那怎么给html5增贴css3的属性呢？总共有3中方式。

1.内联式，如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color: red;"></p>
</body>
</html>

就是在一个标签后面加上style，在那里面加上需要的属性即可。

2.嵌入式，如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #hello{
            color: #000;
        }
        .hello{
            color: #000;
        }
    </style>
</head>
<body>
    <p id="hello"></p>
    <p class="hello2"></p>
</body>
</html>

如图所示，小编给了两种，也是最基本的两种。在head标签里输入style标签，然后给p标签增加class属性或id属性，随手给它取个名字。在style你会发现，你需要先输入它的名字，{}大括号将属性给扩起来。有一个小细节，id与class不同，id是大范围的，class是小范围的，需要注意哦！

另外，class查找需要“ . ”，id查找需要“ # ”。

3.外部式，如图