首页 > 其他分享> 文章详细

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

2022-08-01 15:05:09 阅读：171 来源： 互联网

标签：style 样式标签语法 HTML CSS 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
}

标签：style,样式,标签,语法,HTML,CSS,css,属性
来源： https://www.cnblogs.com/xjw12345/p/16539989.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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