CSS定义和三种引入方式

最新推荐文章于 2022-11-19 16:07:03 发布

iheyu

最新推荐文章于 2022-11-19 16:07:03 发布

阅读量178

点赞数

分类专栏： html 文章标签： Cascading Style Sheets 选择器 style link stylesheet

本文链接：https://blog.csdn.net/iheyu/article/details/100099589

版权

html 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

1.CSS：层叠样式表CSS(Cascading Style Sheets)

2.HTML+CSS ——>相当于人的肉体 ——>JavaScript——>相当于人的思想行为；

3.HTML——>主要负责页面的结构；

4.CSS ——>主要负责页面的样子；

5.早期HTML的样式由标签的属性来决定页面的样子：

1.属性多——>浏览器麻烦——>HTML要改许多东西；

2.对于开发的人员——>代码属性多复杂，难维护；

w3c推出CSS这样的一个标准——>把所有和外观相关的属性全部合并样式中：

<xiao style="颜色：红色；

大小：大；

种类：黄娇；

形状：好看；

">苹果</xiao>

以上写的是伪代码；

6.选择器——>样式属性和标签建立关系；

7.为了提升代码的可复用性——>html里面只有标签——>CSS只有样式；

三种引用方法：

1.内敛样式——>在标签里面使用style属性——>把样式写在style属性里面；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样式1</title>
</head>
<body>
    <div style="color:greenyellow;width:100px;height:100px">苹果</div>
</body>
</html>

2.怎么引入style标签——>style标签是为了提取多个样式——>选择器——>标签选择器

内部样式——>把CSS写在head里面；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式1</title>
    <style>
        div{
            color:red;
            width:100px;
            height:100px;
            background:yellow;
        }
    </style>
</head>
<body>
    <div >苹果</div>
</body>
</html>

3.外部样式表——>把CSS放在文件里面——>通过link标签引入外部文件

在vscode中创建23.css文件

div{
    color:red;
    width:100px;
    height:100px;
    background:yellow;
}

html代码段为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式1</title>
    <link type="text/css" rel="stylesheet" href="./23.css" />
</head>
<body>
    <div>苹果</div>
</body>
</html>