CSS 样式和选择器

目录

1 概述

  1. CSS是 Cascading Style Sheets 层叠样式表。层叠的意思就是，多个样式可以作用在同一个 html 元素上，同时生效。
  2. 有点
    1. 功能强大
    2. 将内容展示和样式控制分离
      1. 降低耦合度，解耦
      2. 让分工协作更容易
      3. 提高开发效率

2 CSS的使用

2.1 内联样式

  • 当特殊的样式需要应用到个别元素时，就可以使用内联样式。

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

2.2 内部样式

  1. 当单个文件需要特别样式时，就可以使用内部样式表。

    <!-- 在 head 标签内，定义 style 标签，style 标签的标签体内容就是 css 代码 -->
<style>
    div{
        color:blue;
       }
 </style>
 <div>hello css</div>

  2. 语法

    选择器 {
    属性名1: 属性值1;
    属性名2: 属性值2;    
	...
}
<!-- 选择器：筛选具有相似特征的元素 -->
<!-- 注意：每一对属性需要使用 `；`隔开，最后一对属性可以不加(但为了格式统一尽量加上) -->

2.3 外部样式

  • 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
<!-- 先定义css资源文件，然后在head标签内，使用 link 标签引入外部的资源文件 -->
<!-- mystyle.css 文件内容如下 -->
div{
    color:green;
}
<!-- html 文件内容如下 -->
<link rel="stylesheet" href="css/mystyle.css">
<div>hello css</div>
<div>hello css</div>
  • 注：内联样式、内部样式、外部样式这三种方式，CSS 的作用范围越来越大；内联样式不太常用，内部样式和外部样式比较常用。

3 选择器

3.1 基础选择器

类型 介绍 语法
id选择器 选择具体的id属性值的元素，建议在一个html页面中id值唯一 #id属性值{}
类选择器 选择具有相同的class属性值的元素 class属性值{}
元素选择器 选择具有相同标签名称的元素 标签名称{}

注：id选择器优先级高于元素选择器，类选择器选择器优先级高于元素选择器。

3.2 扩展选择器

类型 介绍 语法
选择所有元素 *{}
并集选择器 * 选择器1,选择器2{}
子选择器 筛选选择器1元素下的选择器2元素 选择器1 选择器2{}
父选择器 筛选选择器2的父元素选择器1 选择器1 > 选择器2{}
属性选择器 选择元素名称，属性名=属性值的元素 元素名称[属性名="属性值"]{}
伪类选择器 选择一些元素具有的状态 元素:状态{}

4 属性

类型 属性
字体、文本 font-size 、color
text-align 、 line-heigth
背景 background
边框 border
尺寸 width、height
盒子模型 margin(外边距)
padding(内边距)
float(浮动)
posted @ 2021-10-31 21:48  lkf-newlife  阅读(53)  评论(0)  编辑  收藏  举报