01. CSS 基础

CSS（Cascading Style Sheets，层叠样式表），主要通过为 HTML 元素增添样式的方式修饰静态页面，实现了页面内容与样式分离。目前主流网页布局均采用 div+CSS 方式实现

一、CSS三大特性

  • 层叠性：权重高的样式会覆盖权重低的样式；

  • 继承性：子元素继承父元素的样式；

  • 优先级：作用域越小，优先级越大；

    • 不同级别：行内样式>id选择器>类选择器>标签选择器>通配符>继承；

    • 同一级别：后写的会覆盖先写的样式；

二、CSS语法规则

/* CSS注释内容 */
选择器{ 
    样式属性1:值1;
    样式属性2:值2;
}

三、引入CSS样式表

1. 行内样式表（内联表）：

<标签 style="属性1:值1;属性2:值2;"></标签>
  • 仅需要在一个元素上应用一次时，可以使用内联样式

2. 内部样式表（内嵌表）：

<style>
  选择器{ 
    样式属性1:值1;
    样式属性2:值2;
  }
</style>
  • 当单个文档需要特殊的样式时，就应该使用内部样式表

3. 外部样式表（外联表）：外部.css文件

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

样式优先级：内联样式 > 内部样式 > 外部样式

三种样式表总结：

样式表 优点 缺点 使用情况 控制范围
行内样式表 权重高 样式与结构未分离 较少 单个标签
内部样式表 样式与结构部分分离 未彻底分离 较多 整个页面
外部样式表 样式与结构完全分离 需引入 多，推荐 整个站点
  • 内部样式 > 外部式有一个前提，即内部样式的位置一定在外部样式的后面
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
...
</style>
posted @ 2019-07-16 12:04  胤小飞  阅读(94)  评论(0)    收藏  举报