码迷,mamicode.com
首页 > 编程语言 > 详细

JavaWeb8.3【CSS概述、CSS与HTML的结合方式】

时间:2021-06-28 18:54:11      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:结合   imp   就是   cas   耦合度   好处   越来越大   作用   code   

  1. 概念: Cascading Style Sheets 层叠样式表

    • 层叠:多个样式可以作用在同一个html的元素上,同时生效
    • 页面美化和布局控制
  2. 好处:

    1. 功能强大
    2. 将内容展示和样式控制分离
      • 降低耦合度。解耦
      • 让分工协作更容易
      • 提高开发效率
  3. CSS的使用:CSS与html结合方式

    1. 内联样式

      • 在标签内使用style属性指定css代码
      • 如:<div style="color:red;">hello css</div>
    2. 内部样式

      • 在head标签内,定义style标签,style标签的标签体内容就是css代码
    3. 外部样式

      1. 定义css资源文件。
      2. 在head标签内,定义link标签,引入外部的资源文件
    • 注意:
      • 1,2,3种方式 css作用范围越来越大(当前标签-->当前页面-->引入.css的所有页面)
      • 1方式不常用,后期常用2,3
      • 第3种格式在html页面中可以这样引入:
<link rel="stylesheet" href="../css/a.css">
或
<style>
	 @import "../css/a.css";
</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css&html结合方式1</title>
</head>
<body>

<!--内联样式
在标签内使用style属性指定css代码-->
<div style="color: red">hello css</div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css&html结合方式2</title>

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

<body>

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

</body>
</html>
div{
    color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css&html结合方式2</title>

    <!--<link rel="stylesheet" href="../css/a.css">-->
    <!--或者也可以这样引入-->
    <style>
        @import "../css/a.css";
    </style>
</head>

<body>

<!--外部样式
    1. 定义css资源文件。
    2. 在head标签内,定义link标签,引入外部的资源文件-->
<div>hello css</div>

</body>
</html>

JavaWeb8.3【CSS概述、CSS与HTML的结合方式】

标签:结合   imp   就是   cas   耦合度   好处   越来越大   作用   code   

原文地址:https://www.cnblogs.com/yppah/p/14934818.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!