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 @   xjw12345  阅读(199)  评论(0)  编辑  收藏  举报
相关博文：
· CSS基础选择器和扩展选择器
· JavaScript语法与html结合的方式以及注释和数据类型
· CSS概述以及与HTML结合方式以及css语法格式
· CSS_概述与CSS_与html结合方式与CSS_语法格式
· CSS-概述和CSS与html的结合方式
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示