html与css结合方式(四)

转载

mb5fed440247fb5 2021-09-07 16:13:00

文章标签 css html 内部样式外部样式资源文件 文章分类 代码人生

1、CSS：页面美化和布局控制

概念： Cascading Style Sheets 层叠样式表，层叠：多个样式可以作用在同一个html的元素上，同时生效

2、css 优点：

1）功能强大
2）将内容展示和样式控制分离

3）降低耦合度。解耦
4）让分工协作更容易
5）提高开发效率

3、CSS的使用：CSS与html结合方式

3.1 内联样式：

在标签内使用style属性指定css代码

<!--控制了hello css文本的颜色，样式未分离-并不推荐使用-->
<div style="color:red;">hello css</div>

3.2 内部样式：

在head标签内，定义style标签，style标签的标签体内容就是css代码

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
内部样式
    * 在head标签内，定义style标签，style标签的标签体内容就是css代码
-->
    <style>
        div{
            color:blue;
        }
    </style>
    
</head>
<body>
<!--将当前页面所有的div颜色都变为蓝颜色-->
<div>hello css</div>
<div>hello css</div>

</body>
</html>

3.3 外部样式

1）定义css资源文件。

2）在head标签内，定义link标签，引入外部的资源文件

例子：

第一步：新建一个.css文件：

div{
    color:green;
}

p{
    color: red;
    font-size: 30px
}

第二步：html引入.css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <!-- 引入css的第一种方式,常用-->
    <link rel="stylesheet" href="css/a.css">
  
    <!-- 引入css的第二种方式-->
<!--    <style>-->
<!--        @import "css/a.css";-->
<!--    </style>-->
  
</head>

<body>
<div>hello css</div>
<div>hello css</div>
<p>呵呵</p>
</body>

</html>

结果：
html与css结合方式(四)_css