CSS基础(一)

72 阅读1分钟

简介

CSS,Cascading Style Sheets,层叠样式表

Cascading,层层叠起来的样式

Style,即文字大小、颜色、背景等等的表现

Sheets,即样式列表

CSS行内样式(内联样式)

在 HTML 标签的style属性内书写的 CSS,就是行内样式

<!-- style 属性,属性值为 name: value -->
<h1 style="name: value;"></h1>

CSS内部样式

将 CSS 统一书写在<head>中的<style>

<head>
  <style>
    h1{
      color: green;
      font-size: 10px;
    }
  </style>
</head>
<body>
  <h1>hello, world</h1>
</body>

CSS外部样式

<head>中使用<link>引入外部 CSS 样式文件

  • rel,relation
  • href,referemce
<head>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>hello, world</h1>
</body>

将样式统一写index.css文件中

h1{
  color: green;
}

CSS样式表优先级

  • 行内样式 > 内部样式
  • 行内样式 > 外部样式
  • 内部样式 = 外部样式

CSS语法规范

选择器 { 属性名: 属性值; }

CSS三大特性

层叠性

当多个样式规则作用于同一个 HTML 元素时,这些样式规则会根据优先级进行层叠,决定最终的样式表现

继承性

元素会继承父元素、祖先元素的部分样式;优先继承父元素

优先级

!important >> 行内样式 >> ID选择器 >> 类选择器 >> 元素选择器 >> 通配选择器 >> 继承性