CSS概述以及CSS与HTML结合方式以及CSS语法格式

CSS概述

CSS：页面美化和布局控制

 1、概念：Cascading style sheets 层叠样式表

　　　层叠：多个样式可以作用来同一个html的元素上，同时生效

 2、好处 

　　1、功能强大

　　2、将内容展示和样式控制分离

　　　　　　降低耦合度，解耦

　　　　　　让分工协作更容易

　　　　　　提高开发效率

 

 

 

CSS与HTML结合方式

CSS的使用：CSS和HTML结合的方式

　　1、内联样式

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

<div style="color: red">hell css</div>

　　2、内部样式

　　在head标签内，定义style标签，style标签的标签体内容就是css代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>

    <!--
        内部样式：
            在head标签内，定义style标签，style标签的标签体内容就是css代码
    -->
    <div>hell css</div>


</body>
</html>

　　3、外部样式

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

a.css：

div{
    color: yellow;
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/a.css">
</head>
<body>

    <!--
        外部样式：
            1、定义css资源文件
            2、在head标签内定义link标签，引入外部的资源文件
    -->
    <div>hell css</div>

</body>
</html>

 

 

 

 

 

 

 

CSS语法格式

CSS语法

　　格式：
​ 　　　　选择器{
​　　　　 　　属性名1:属性值1；
​ 　　　　　　属性名2:属性值2；
​ 　　　　　　…
​ 　　　　}
　　选择器：筛选具有相似特征的元素
　　注意：

　　　　每一对属性需要使用 ; 隔开，最后一对可以不用

div{
    color: yellow;
    width: 500px;
    height: 500px
}

 

posted @ 2022-08-01 14:50  xjw12345  阅读(206)  评论(0)    收藏  举报