CSS-概念和与HTML结合方式

CSS概念

 css:页面美化和布局控制

概念:Cascading Style Sheets 层叠样式表

  • 层叠:多个样式可以作用在同一个html的元素上 同时生效

好处

1.功能强大

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

  • 降低耦合度 解耦
  • 让分工协作更容易
  • 提高开发效率

CSS与HTML结合方式

css的使用：CSS与HTML结合方式

1.内联样式

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

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS练习</title>
    </head>
    <body>
        <div style="color:blueviolet;">hello css</div>
    </body>
</html>
复制代码

运行结果

2.内部样式

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

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS练习2</title>
        
        <style>
            #a{
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="a">hello css</div>
    </body>
</html>
复制代码

运行结果

3.外联样式

  • 定义css资源文件
  • 在head标签内 定义link标签 引入外部的资源文件

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS练习3</title>
        <link rel="stylesheet" href="css/CSS练习3.css">
    </head>
    <body>
        <div>hello css</div<>
    </body>
</html>
复制代码

css代码

div{
    color:gray;
}

运行结果

注意

  • 1，2，3种方式 css作用范围越来越大
  • 1方式不常用 后期常用2，3
posted @ 2022-11-16 17:17  想见玺1面  阅读(61)  评论(0)    收藏  举报