CSS 概述、CSS 语法(基础选择器)、CSS 单位

Luckies
177 阅读6分钟

1. CSS 概述

1.1. CSS 定义

CSS: Cascading style sheets 层叠样式表, 也称级联样式表, 通常简称样式表

1.2. CSS 的作用
  • 定义 HTML 页面中元素的样式的
  • 实现内容( HTML 元素 )与表现( CSS 样式 )的分离
  • 实现代码的可重用性和可维护性
1.3. CSS 与 HTML 之间的关系
  • HTML: 专门用于搭建网页, 构建内容
  • CSS: 专门定义页面元素的样式
  • 使用原则: 如果 CSS 样式属性与 HTML 属性相冲突时, W3C( 万维网联盟 )建议, 尽量使用 CSS 的属性来取代 HTML 属性
1.4. CSS 样式表的使用方式
1.4.1 内联方式( 行内样式 )

将样式定义在html元素中

  • 语法: 将样式定义在元素的 style 属性中 <p style="样式声明"></p>
    • style 样式声明: 由多个样式的 "属性" 和 "值" 组成 -> EX: 属性：值
    • 多个属性之间用分号( ; )分隔 -> EX: style="属性: 值; 属性: 值; 属性: 值;"
    • 常用属性和值:
      1. color 属性
        • 作用: 文本颜色
        • 取值: 颜色的英文单词
      2. background-color 属性
        • 作用: 背景颜色
        • 取值: 颜色的英文单词 或 RGB 值
      3. font-size 属性
        • 作用: 文字大小
        • 取值: 以 px 或 pt 为单位的数字
1.4.2. 内部样式

将样式定义在 html 头元素中( <head></head> )

  • 特点: 当前页面中可以随意使用定义好的样式

  • 步骤:

    1. 在 head 元素中增加一对 style 元素( 标签 )
    2. 在 style 元素中增加多个样式规则

  • 语法:

    <head>
  <style>
    样式规则
  </style>
</head>

  • 样式规则: 由选择器和样式声明组成

  • 选择器: 规范页面中哪些元素能够使用定义好的样式

  • 元素选择器: 由标签名称作为选择器, 来规范当前标记的样式 -> EX: p{ 属性: 值; }

1.4.3. 外部样式表

将样式定义在外部的 CSS 文件中, 然后再网页中对 CSS 文件进行引用

  • 特点: 使用样式表文件( .css 为后缀 )保存所有的样式规则

  • 步骤:

    1. 创建样式表文件( .css )
    2. 在 CSS 文件中定义样式规则
    3. 在网页中引入外部样式表，在 head 中引入

  • 语法:

    <head>
  <link rel="stylesheet" href="css文件路径">
</head>

2. CSS 语法

2.1. CSS样式特征
2.1.1. 继承性:

父元素定义好的样式可以直接用在子元素上

  • 大部分的样式属性可以被继承 -> EX: color, font-size, background-color....
2.1.2. 层叠性

为一个元素定义多个选择器, 当样式声明不冲突时, 多个样式层叠为一个

EX: div{ font-size：40px; } #d1{ color:red; }

2.1.3. 优先级

如果样式冲突时, 按照不同样式的优先级来应用

  • 优先级比较
    1. 浏览为缺省设置 ------ 最低
    2. 外部样式和内部样式 ------ 中( 就近原则 )
    3. 内联样式 ------ 最高
2.1.4. 调整显示优先级

冲突样式中, 用 ``!important来调整样式优先级 -> !important` 样式优先级最高

EX: 选择器{ 属性:值 !important； }

2.2. 基础选择器
  • 选择器的作用: 规范页面中哪些元素能够使用声明好的样式( 匹配页面元素 )
2.2.1. 通用选择器

  • 作用: 匹配页面中所有的元素

  • 语法: *{ 样式声明 }

  • 注意: 尽量少使用( 效率较低 ) 尽可能用继承性来取代

2.2.2. 元素选择器

又叫标签选择器或标记选择器

  • 作用: 定义页面中某一类元素的样式

  • 语法: 由元素名称作为选择器

  • EX: div{ } span{ } p{ } a{ } header{ }

2.2.3. 类选择器

  • 作用: 通过标签所附带的 class 属性值对类选择器进行引用

  • 特点: 一段公共的样式, 谁想用谁就可以用

  • 语法: .类名{ 样式声明 }

  • 引用：<p class="类名"></p>

  • 自定义类名注意:

    1. 不能数字开头
    2. 不能包含特殊字符( $,@,#,%,^,&) -> - _ ( 可以 )

  • 多类选择器:

    允许让一个元素应用多个类选择, 引用时, 选择器名称用空格分隔开 EX: <p class="类名1 类名2 类名3"></p>

  • 分类选择器:

    将元素选择器和类选择器联合使用, 从而实现对某种元素的不同样式的细分控制

    • 语法：元素选择器.类选择器{ 样式声明 } -> EX: div.mytitle{ color:red; } html: <div class="mytitle"> 锄禾日当午 </div>
2.2.4. id选择器
  • 作用: 使用元素所附带的 id 属性值进行样式的声明定义( 私人订制 )
  • 语法：#idvalue{ 样式声明 } -> EX: #p1{ color: red; } html: <p id="p1"> id选择器 </p>
2.2.5. 群组选择器

定义一组选择器的公共样式, 用逗号隔开选择器列表 -> EX: div, p, .myf, span.myC, #d1{ 样式声明 }

2.2.6. 后代选择器

依托于后代关系来匹配页面的元素

  • 后代: 一级或多于一级的父子关系
  • 语法: 选择器1 选择器2 选择器3{ 样式声明 }
  • EX
    1. 要匹配一个id为d1元素中所有span元素 #d1 span{}
    2. 要匹配 class 为 redB 元素中的所有 class 为 bigF 的元素 .redB .gigF{}
2.2.7. 子代选择器

依托于子代关系, 匹配页面的元素

  • 子代: 只有一级父子关系
  • 语法: 选择器1 > 选择器2{ 样式声明 }
  • 特点: 不想匹配任意后代, 而是想缩小范围
2.2.8. 伪类选择器
  • 作用: 为了匹配元素不同的状态
  • 语法: :伪类名称{ }
  • 特点:
    1. 所有的伪类选择器都是以冒号( : )作为开始
    2. 多数会配合其他选择器一起使用 -> 选择器 :伪类名称{ }
    3. 分类:
      • 链接伪类:
        1. :link: 匹配尚未访问过的超级链接状态
        2. :visited: 匹配访问过的超级链接状态
      • 动态伪类:
        1. :hover: 匹配鼠标悬停在元素上的状态
        2. :active: 匹配元素被激活时的状态
        3. :focus: 匹配元素获取焦点时的状态
2.2.9. 选择器的优先级
  • 权值: 标识当前选择器的重要程度, 权值越大优先级越高
    • 元素选择器 1
    • 类型选择器 10
    • 伪类选择器 10
    • ID选择器 100
    • 内联样式 1000
    • 特点:
      1. 选择器权值加到一起, 大的优先
      2. 权值相同,以后定义的为主
3. CSS单位
3.1. 尺寸单位
  1. %: 相对单位
  2. in: 英寸-->2.54cm
  3. cm: 厘米
  4. mm: 毫米
  5. pt: 磅 -> 1/72 in
  6. px: 像素, 表示文字大小

注意: CSS 中的数值, 如果有单位的就不能省略

3.2. 颜色单位( 颜色取值 )
  1. 英文单词 red ,blue ,green ,yellow ,black ,orange ,pink ,purple ,silver , gray ,......
  2. rgb( r, g, b )
    • r:0-255
    • g:0-255
    • b:0-255
  3. rgb( r%, g%, b% )
  4. #rrggbb
    • 0-9 或 a-f 组成
    • 常用的颜色:
      • #000000: 黑色
      • #ffffff: 白色
      • #111111: 灰色
      • #111111 到 #eeeeee, 数字相同时, 都是灰色
  5. #rgb: 上面的缩写形式 #000 #000 #fff #111
avatar
文章
阅读
粉丝