CSS基础-引入

最新推荐文章于 2022-06-27 19:40:41 发布

原创最新推荐文章于 2022-06-27 19:40:41 发布 · 390 阅读

CC 4.0 BY-SA版权

有人用一句话总结了HTML，CSS，JS的关系。HTML是名词，JS是动词，CSS是形容词和副词。

什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

HTML中CSS的使用

类型

内联引入（不常用）
缺点：与HTML混在一起，一个内联样式只能对一个标签起作用，复用性差

<body>
  <div style="font-size:20px;color:#f00;">Hello World!</div>
</body>

内嵌引入
缺点：可复用性差，维护性一般

<head>
  <style>
    div{font-size:20px;color:#f00;}
  </style>
</head>

外部引入（推荐）
好处：将CSS与HTML独立出来；使CSS可复用

<head>
  <link rel="stylesheet" href="css/03.css" />
</head>

03.css↓

div{
    font-size:40px;
    color:#00f;
}

优先级

内联引入的优先级最高，内嵌引入和外部引入的优先级尊崇“后来者居上”原则。

@import与link的区别

link是HTML标签，@import只能在CSS中使用
link会在网页加载时同时加载，而@import需要网页完全载入才能加载
link无兼容问题，@import 是CSS2.1以后加入的，兼容性一般
link可以使用JS脚本控制，而@import不可以

元素选择器

类型

.class

<head>
  <style>
  .yellow-text{
        font-size:40px;
        color:#ff0;
        !import;
      }
  </style>
</head>

<body>
  <div class="yellow-text">Hello World!</div>
</body>

<head>
  <style>
    #blue{
        background-color:#00f;
      }
  </style>
</head>

<body>
  <div id="blue">Hello World!</div>
</body>

<head>
  <style>
    *{border:2px solid #0f3;}
  </style>
</head>

优先级

！important > id > class > 标签 > *

注意

p标签和a标签不可以自己嵌套自己

关系选择器

类型

空格

<head>
  <style>
    div p{background-color:#ff0;}
  </style>
</head>

<body>
    <div>
      <p>text</p>
    </div>
</body>

<head>
  <style>
    div>a{background-color:#0ff;}
  </style>
</head>

<body>
    <div>
      <a>text</a>
    </div>
</body>