CSS基础 && CSS选择器

爱笑的狐狸
138 阅读8分钟

一、CSS基础

1.1 什么是CSS

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。

1.2 CSS的使用方式

使用方式有三种：行内样式、内部样式、外部样式

三种方式的基本用法不过多描述

  • 样式表的优先级
    • 优先级规则：行内样式 > 内部样式 = 外部样式

​

分类优点缺点使用频率作用范围
行内样式优先级最高1. 结构与样式未分离
2. 代码结构混乱
3. 样式不能复用		很低当前标签
内部样式1. 样式可复用
2. 代码结构清晰		1. 结构与样式未彻底分离
2. 样式不能多页面复用		一般当前页面
外部样式1. 样式可多页面复用
2. 代码结构清晰
3. 可触发浏览器的缓存机制 
4. 结构与样式彻底分离		需要引入才能使用最高多个页面

1.3 CSS语法规范

使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。

  • CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
    • 选择器是用于指定 CSS 样式的 HTML标签（现阶段如此）
    • 花括号内是对该对象设置的具体样式
    • 属性和属性值以“键值对”的形式出现
    • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
    • 属性和属性值之间用英文“:”分开 5.多个“键值对”之间用英文“;”进行区分
    • 选择器和{}之间要有一个空格
    • 属性后面的分号也要有一个空格
    • 每一个声明的后面都要添加一个分号，但是最后一个声明可以加也可以不加，但是最好是加

1.4 css注释

/*注释的内容*/

快捷键（与html注释一样）：ctrl+/或者shift+Alt+A

二、CSS选择器

2.1 CSS基本选择器

1、标签选择器

2、ID选择器

3、类选择器

4、通配符选择器

2.1.1 标签选择器

  • 概念：标签选择器是指用HTML 标签名称作为选择器，按照标签名称分类。

  • 使用方法：

div{
    
}

2.1.2 ID选择器

  • 概念：可以标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以#来定义。
  • 使用方法：
<div id="box"></div>

#box{
      
    }
  • 注意：
    • id属性只能在每个HTML文档中出现一次
    • 起名时要去英文名，不能用关键字。

2.1.3 类选择器

  • 概念：如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

  • 使用方法：

    • 单类名选择器
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>test</title>
        <style>
            .demo{
                color: aqua;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            吃饭睡觉打豆豆
        </div>
    </body>
</html>
    • 多类名选择器
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>test</title>
        <style>
            .demo{
                color: aqua;
            }
		   .demo1{
                font-size:90px;
            }
        </style>
    </head>
    <body>
        <div class="demo demo1">
            传说中你为爱甘心被搁浅
        </div>
    </body>
</html>

2.1.4 通配符选择器

  • 概念：通配符选择器不需要调用， 自动就给所有的元素使用样式 特殊情况才使用

  • 使用方法：

/* 选中所有元素 */
* {
    color: orange;
    font-size: 40px;
}

2.1.5 选择器总结

基础选择器作用特点使用情况用法
元素选择器可以选出所有相同的标签，比如p不能差异化选择较多p{color:skyblue}
类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav{color:skyblue}
ID选择器一次只能选择一个标签id属性只能在每个HTML文档中出现一次一般和js一起使用#nav{color:skyblue}
通配符选择器选择所有的标签选择的太多样式初始化使用*{color:skyblue}

2.2 CSS复合选择器

常用的复合选择器包括：后代选择器、子元素选择器、交集选择器、并集选择器、属性选择器、伪类选择器、链接伪类选择器等等

2.2.1 后代选择器

  • 概念：后代选择器又称为包含选择器，可以选择父元素里面子元素。
  • 语法：
元素1 元素2{样式声明}

上面语法表示选择元素1 里面所有元素2

  • 语法说明
    • 元素1 和元素2中间用空格隔开
    • 元素1是父级，元素2 是子级
    • 元素1 和 元素2 可以是任意基础选择器

2.2.2 子代选择器

  • 概念：子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

  • 语法：

元素1 > 元素2{样式声明}

上述语法表示选择元素1 里面所有直接后代 元素2

  • 语法说明：
    • 元素1 和 元素2 中间用大于号 隔开
    • 元素1 是父级，元素2 是子级，最终选择的是元素2
    • 元素2 必须是 元素1 的亲儿子

2.2.3 交集选择器

  • 概念：交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，交集选择器是并且的意思。 即...又...的意思。

  • 语法：

h3.class{color:red font-size:100px;}

2.2.4 并集选择器

  • 概念：并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

  • 语法：

元素1，元素2{
  样式声明
}
  • 语法说明：
    • 元素1 和 元素2 中间用逗号隔开
    • 逗号可以理解为和的意思
    • 并集选择器通常用于集体声明

2.2.5 兄弟选择器

  • +选择器

    • 概念：“+”选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的

  • ~选择器

    • 概念：作用是查找某一个指定元素的后面的所有兄弟节点

2.2.6 属性选择器（了解就行）

  • 作用：选中属性值符合一定要求的元素。

  • 语法：

    • [属性名] 选中具有某个属性的元素。
    • [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
    • [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
    • [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
    • [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。
    • [属性名~=“值”]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）
    • [属性名|=“值”]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

2.2.7 伪类选择器

2.2.7.1 动态伪类选择器
  • E:link设置超链接a在未被访问前的样式。
a:link{
       color: greenyellow;
  }

a:hover必须位于a:link 和 a:visited之后 ,a:active必须位于a:hover之后

  • E:visited 设置超链接a在其链接地址已被访问过时的样式。
 a:visited{
      color: #ccc;
  }
  • E:hover 设置元素在其鼠标悬停时的样式。
  a:hover{
     color: red;
  }
  • E:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
 a:active{
      color: blueviolet;
  }
  • E:focus 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
  :focus{
         outline: none;
         border: 1px solid hotpink;
  }
2,2,7.2 UI元素伪类选择器
  • E:checked

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

  • E:enabled

匹配用户界面上处于可用状态的表单元素

  • E:disabled

匹配用户界面上处于禁用状态的表单元素

2.2.7.3 结构伪类选择器（常用）
  • E:first-child
匹配父元素的第一个子元素E。
  • E:last-child
匹配父元素的最后一个子元素E。
  • E:only-child
匹配父元素仅有的一个子元素E。
  • E:nth-child(n)
匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
  • E:first-of-type
匹配同类型中的第一个同级兄弟元素E
  • E:last-of-type
匹配同类型中的最后一个同级兄弟元素E

2.2.8 伪元素选择器

常用的就两个：

  • E::before
动态地给元素创建一个子元素,位于最开始的位置，必须设置 content 属性才生效。 
非常重要。
  • E::after
动态地给元素创建一个子元素位于最后的位置，必须设置 content 属性才生效。

2.3 选择器的优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

行内样式优先级大于所欲选择器

! important>的优先级，大于行内样式，大于所有选择器，优先级最高

avatar
文章
阅读
粉丝