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 @   baimingze  阅读(57)  评论(0)  编辑  收藏  举报
相关博文：
· CSS-属性
· CSS-语法格式和基础选择器
· CSS-概念和与HTML结合方式
· CSS_概述和CSS_与html结合方式
· CSS-概述和CSS与html的结合方式
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示