CSS常用-----选择器及样式

本章仅仅只是对CSS的一个汇总,方便查询使用


1. 什么是CSS?

    CSS 指层叠样式表 (Cascading Style Sheets),他的作用是为了显示HTML元素,优点在于让定义样式更加简单,让网页的内容和表现分离,使多个样式可以层叠使用。
CSS的使用格式是选择器+声明
Selector{Declaration;Declaration}
P{
    font-family:"楷体";
}

在这里临时插入CSS的三个特点:

1.继承

1.当给父元素设置一些属性,子元素(所有后代)也可以使用
(这里注意,

  • color/font/text/line开头的属性才可以继承
  • a标签中的文字颜色和下划线不可继承
  • h标签的文字大小不能继承

2.层叠

层叠是指当有多个选择器给同一个标签设置了相同属性的时候,会选择优先权高的

3.优先级

优先级是针对多选一时的解决方案,多选择器对同一标签同一属性进行选择时的解决。
即针对于层叠。

判断方式 解释
继承 谁最近听谁的
同类型选择器直接选中 谁在后面听谁的
不同类型选择器直接选中 按照选择器优先级:id>类>标签>通配符>继承>浏览器

(小知识:我们可以在属性后面分号前面使用!important来提升某个属性的优先级到最大,important只可以对直接选中有效)

例如:
{color:red !important;}

2. CSS选择器

1. id选择器

    根据指定的ID找到对应的标签,然后设置样式
        #id{
        属性:值;
        }
        //注意点:
        //1.同一个界面,id不可重复
        //2.注意#号
        //3.id不可是数字,不可使HTML标签,只可是数字,字母,下划线
        //4.id一般给JS使用

2. class选择器

    根据指定的类名找到对应的标签
        .类名{
        属性:值;
        }
        //注意点:
        //1.每个标签都可设置类名
        //2.类名可重复
        //3.注意加上点
        //4.注意命名规范,和id一样
        //5.类名是专门针对css的
        //6.每个标签可以有多个类名,中间用空格分开
    什么是类,类就是带有类似样式的标签,所以要学会抽取公共类,将一个类绑定给标签,类似于先想好类,再赋予标签,这更符合样式与代码分离,更加简单高效。

    而id呢,就是先有标签,然后专门为其赋予样式

3. 标签选择器

根据指定标签的名称,在当前页面查找所有该名称的标签,然后设置属性
    标签名称{
    属性:值;
    }
    //注意点:
    //1.标签选择器选中的是所有标签
    //2.无论标签多深都能选中
    //3.任何HTML标签均可以

4.其他选择方式

    下面以表格列举其他的选择方式,其实就是一种组合
名称 格式 作用
后代选择器 标签1 标签2{属性:值;} 特点是
1.中间使用空格,会查询后面所有的
2.可以用空格一直延续下去
3.后代选择器理解为在什么下面查找某个选择器 ,所以后面的可以是标签选择器,也可以是其他选择器
子元素选择器 标签1>标签2{属性:值;} 特点是:
1.只会查找儿子,不会查找其他,即下一个
2.后面可以是其他选择器
3.可以使用>一直延续
交集选择器 选择器1选择器2{属性:值;} 相交的标签,可以是3种选择器任何一种
并集选择器 选择器1,选择器2{属性:值;} 多个选择器选择的标签同时设置,相当于两个选择器选中的都设置
相邻兄弟选择器 选择器1+选择器2{} 后面紧跟的那个
通用兄弟选择器 选择器1~选择器1{} 后面所有的
序选择器:同级别第几个 选择器:first/:last/:nth/:nth-last/:only-child{} 同级别第一,最后,第几个,倒数第几个,父元素中唯一的那个
序选择器:同级别同类型第几个 选择器:first-of-type/:last-of-type/:nth-of-type/:nth-last-of-type/:only-child-of-type{} 同级别同类型第一,同类型最后,同类型第几个,同类型倒数第几个,同类型父元素中唯一的那个
序其他 odd/even/xn+y 奇数标签/偶数标签/公式
属性选择器 选择器 [属性]{} 通过选择器+属性,所有带某个属性的元素,例如img[alt]{},所有带alt属性的img元素
选择器[属性][属性]{} 所有带有两个属性的元素
选择器[属性=值]{} 属性等于某个值的元素
选择器[属性^=值]{} 属性的取值以value开头的元素
选择器[属性^=值]{} 属性的取值以value开头的元素
选择器[属性*=值]{} 属性的取值包含value的元素
通配选择器 *{} 所有标签

子元素选择器和兄弟选择器的区别在于:前者是里面的,后者是后面的

3. CSS的使用

    CSS的使用可以理解为怎样把CSS样式放入网页中
        CSS插入样式表的方式主要有三种

1. 外部样式表(External style sheet)

外部的嘛,就是与我们的HTML文件想分离,然后再在HTML页面中导入的一种方式,优点在于可以实现了真正的分离,可以在多个页面中使用听一个样式表

<head>
    <link rel=”stylesheet” type=”text/csshref=”acss.css”>
head>

2. 内部样式表(Internal style sheet)

内部,顾名思义,就是将我们的CSS样式定义在HTML文件中

<head>
    <style>
        h{
        color:red;
    }
    style>
head>

3. 内联样式(Inline style)

    内联样式可以理解为一个临时的只针对某一个的样式表
<p style=”color:red;font-size:20px;”>P>

//注意,内联样式没有大括号

  • 这里有一点可以提一下:

当拥有多个样式来源时,优先级时这样的:
内联样式>内部样式>外部样式>浏览器样式

怎么理解呢?
比如一个P标签,当内部样式定义了两个

    text-align:left; font-size:10pt;

外部样式定义了三个:

    color:red; text-align:right; font-size:18pt;

那么P标签采用的就会是:

    color:red;text-align:left;font-size:10pt;

意味着相同的样式定义优先选用了优先级打的,而没有的照搬了下来。

总结:

今天就先将这些列举出来,有时间再整理后面的

你可能感兴趣的:(前端,CSS)