前端css引入方式与选择器

╰+哭是因爲堅強的太久メ 2023-08-17 17:18 128阅读 0赞

# CSS介绍 #

CSS（**C**ascading **S**tyle **S**heet，层叠样式表)定义**如何显示**HTML元素，给HTML设置样式，让它更加美观。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

# CSS语法 #

## CSS实例 ##

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

![867021-20171215115756808-909989248.png][]

## CSS注释 ##

/*这是注释*/

# CSS的几种引入方式 #

## 行内样式 ##

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

## 内部样式 ##

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{
       
               
           }
       </style>
    </head>

## 外部样式 ##

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

# 文件内容是 ： #

p {color:blue;}
    /*注释*/
    
    注释一般都使用来描述后面这段css代码是给页面上哪一个板块用的
    /*标题样式*/
    xxxxx
    
    /*个人中心设置*/

# CSS选择器（如何找到对应的标签） #

## 基本选择器 ##

### 元素选择器（标签名） ###

p {color: "red";}

![988061-20181207154535392-1283987175.png][]

那如果有多个p标签，把其中一个p标签中的文字颜色改为红了，或者背景改成红色怎么办？看下面的选择器：

### ID选择器 ###

#i1 {   #号表示id属性，后面的i1表示id属性的值
        #背景色，color:red是字体颜色
    }

id不能重复，如果想给多个p标签同时添加一个css样式怎么办？看下面

### 类选择器 ###

.c1 {  .表示class属性，c1表示class的值
      font-size: 14px;
    }p.c1 {  找到所有p标签里面含有class属性的值为c1的p标签，注意之间没有空格昂  color: red;}

![988061-20181207154821357-384846956.png][]

![988061-20181207154839045-1988394987.png][]

效果：

![988061-20181207154850682-1189151070.png][]

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

![988061-20181207155053020-334897599.png][]

![988061-20181207155038265-444493330.png][]

![988061-20181207155201914-1801640927.png][]

通用选择器

* {  *表示所有的标签
      color: white;
    }

## 组合选择器 ##

### 后代选择器（子子孙孙） ###

/*li内部的a标签设置字体颜色*/
    li a {
       
      color: green;
    }

![988061-20181207163748136-1783319719.png][]

![988061-20181207163802796-1673302120.png][]

![988061-20181207163826196-470686187.png][]

### 儿子选择器（只找儿子） ###

/*选择所有父级是 <div> 元素的 <p> 元素*/
    div>p {
       
      font-family: "Arial Black", arial-black, cursive;
    }

### 毗邻选择器 ###

/*选择所有紧接着<div>元素之后的<p>元素*/
    div+p {
       
      margin: 5px;
    }

![988061-20181207164109814-1949794423.png][]

![988061-20181207163955780-1105802712.png][]

![988061-20181207164121448-1753236300.png][]

![988061-20181207164331412-1198604198.png][]

### 弟弟选择器 ###

/*i1后面所有的兄弟p标签*/
    #i1~p {
       
      border: 2px solid royalblue;
    }

![988061-20181207164314772-187291471.png][]

找id为d2的div标签下的兄弟标签中的p标签，往下找

![988061-20181207164521198-435909979.png][]

![988061-20181207164255117-1940454691.png][]

## 属性选择器 ##

/*用于选取带有指定属性的元素。*/
    p[title] {
       
      color: red;
    }
    /*用于选取带有指定属性和值的元素。*/
    p[title="213"] {
       
     color: green;
    }

通过属性或者属性的值来查找，这个属性是自己定义的，不是id啊class这种html自带的属性

![988061-20181207172603956-754637152.png][]

![988061-20181207172623777-933352862.png][]

每个标签里面都可以可一个title属性，这个属性就是鼠标移动到这个标签上，就显示出一个title属性的值

还有下面这些不太常用的，正则的写法，属性值以什么开头，以什么结尾等

/*找到所有title属性以hello开头的元素*/
    [title^="hello"] {
       
      color: red;
    }
    
    /*找到所有title属性以hello结尾的元素*/
    [title$="hello"] {
       
     color: yellow;
    }
    
    /*找到所有title属性中包含（字符串包含）hello的元素*/
    [title*="hello"] {
       
     color: red;
    }
    
    /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
    [title~="hello"] {
       
     color: green;
    }

看示例：title\*='hello'

![988061-20181207173144383-514496721.png][]

![988061-20181207173216433-1105814886.png][]

看示例：title~=’hello‘

![988061-20181207173520306-1036032135.png][]

![988061-20181207173357177-980916999.png][]

上面这个属性选择器不常用，简单了解一下就行了。

### 分组和嵌套 ###

### 分组（多个选择器逗号分隔） ###

当多个元素的样式相同的时候，没有必要重复地为每个元素都设置样式，可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div, p {
       
      color: red;
    }

上面的代码为div标签和p标签统一设置字体为红色。

![988061-20181207173824845-656763365.png][]

通常，会分两行来写，更清晰:

div, #如果你这样写，千万别忘了逗号，不然就成了div下的子子孙孙里面找p标签
    p {
       
      color: red;
    }

### 嵌套 ###

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
       
      color: red;
    }

## 伪类选择器（比较特殊，CSS3版本新加的特性） ##

可以根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态。

/* 未访问的链接 */
    a:link {
       
      color: #FF0000
    }
    
    /* 已访问的链接 */
    a:visited {
       
     color: #00FF00
    } 
    
    /* 鼠标移动到链接上 */ 这个用的比较多
    a:hover {
       
     color: #FF00FF
    } 
    
    /* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
    a:active {
       
     color: #0000FF
    }
    
    /*input输入框获取焦点时样式*/
    input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
     #outline: none;
     #框里面的背景色}

## 伪元素选择器（通过css来造标签，不推荐使用） ##

### first-letter ###

常用的给首字母设置特殊样式：

#将p标签中的文本的第一个字变颜色变大小
    p:first-letter { 
      font-size: 48px;
     color: red;
    }

### before ###

/*在每个<p>元素之前插入内容*/
    p:before {
       
      content:"*";
      color:red;
    }

### after ###

/*在每个<p>元素之后插入内容*/
    p:after {
       
      content:"[?]";
      color:blue;
    }

![988061-20181207205335813-740898590.png][]

上面的这些前后添加的文本内容在页面上是无法选中的，正常的标签或者文字是可以选中的。before和after多用于清除浮动。

## 选择器的优先级（难点） ##

### CSS继承 ###

通过上面的学习可以发现，可以通过很多种选择器来选择标签，如果有不同的选择器选中了相同的标签，并且赋予了不同的css样式，那么该按照哪个css样式来进行渲染呢？首要浏览器拿到HTML文件的时候，它是从上到下加载我们的文件内容的，这也是为什么会先看到head标签里面的内容，比如那个title标签。再看下面的例子：我在style里面写了两个\#p1并且设置了不同的css样式，还有一个10.css文件，文件里面也写了一个\#p1，对应一个其他的css样式，最后页面渲染的时候是选择的最后一个link那个文件中的\#p1对应的那个css样式来渲染的，是因为按照顺序加载导致的，一个把一个覆盖了

![988061-20181207210600224-118716218.png][]

10.css文件里的内容：

![988061-20181207210830054-1277465540.png][]

最终效果：为蓝色

![988061-20181207210922975-606064073.png][]

总结：当选择器相同的时候，按照顺序来看css样式，谁最后就按照谁渲染。那如果是不同的选择器的时候呢？就要下面的优先级了，首先看一下继承：

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
       
      color: red;
    }

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的，他的权重是0。

只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
       
      color: green;
    }

此外，继承是CSS重要的一部分，甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

### 选择器的优先级 ###

上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

![867021-20180305155201408-1680872107.png][]

注：内联样式的意思是把css样式写在标签里面：

![988061-20181207211608760-1800506928.png][]

其他的权重：但是有一点说一下，就是上面那个权重计算永不进位的意思是：看上面知道class的权重是10，但是即便是11个class相加起来大于id的100权重，也还是id生效，也就是说，不会进位，class组合起来也无法超过id的权重

![988061-20181207211708586-1859067719.png][]

除此之外还可以通过添加 !important方式来强制让样式生效，不讲道理的操作，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护，使用方法：

![988061-20181207212107609-1208258871.png][]

**万不得已可以使用!important**

转载于:https://www.cnblogs.com/sundawei7/p/11497822.html

[867021-20171215115756808-909989248.png]: /images/20230808/ec3ce91910f342e4a5d95d00f8b94a2a.png
[988061-20181207154535392-1283987175.png]: /images/20230808/2c230b266743450abe196badc3b5e222.png
[988061-20181207154821357-384846956.png]: /images/20230808/515ac0d620c344c388485a153585b1b4.png
[988061-20181207154839045-1988394987.png]: /images/20230808/3f052beff39b495fa7b08ff6cb16f9a7.png
[988061-20181207154850682-1189151070.png]: /images/20230808/eb461cadddf7413f9582d30bce95fcde.png
[988061-20181207155053020-334897599.png]: /images/20230808/77c7a588700344bab079ba21afd9049b.png
[988061-20181207155038265-444493330.png]: /images/20230808/9bafb23c11df4eaa9d4ace283c37e021.png
[988061-20181207155201914-1801640927.png]: /images/20230808/755347f99f6e43c3a49384e959d9f5a7.png
[988061-20181207163748136-1783319719.png]: /images/20230808/e996cb3a8f2c433abfaadc1ad73a1d4f.png
[988061-20181207163802796-1673302120.png]: /images/20230808/2c9cfccdc54848a8844d631ded37ebab.png
[988061-20181207163826196-470686187.png]: /images/20230808/fc02872932614aef9de085d92b471294.png
[988061-20181207164109814-1949794423.png]: /images/20230808/5c74989cae894677ba074f46e6b61b67.png
[988061-20181207163955780-1105802712.png]: /images/20230808/0aa3b9abb43a4ee78d4aad7a4ab56455.png
[988061-20181207164121448-1753236300.png]: /images/20230808/819a2cbf178c4b558193f7ef3fad9766.png
[988061-20181207164331412-1198604198.png]: /images/20230808/762639a124fe4fa1b3793770816e0015.png
[988061-20181207164314772-187291471.png]: /images/20230808/08c58a011f564e7caaec728539db38c0.png
[988061-20181207164521198-435909979.png]: /images/20230808/4d8fb32400ce4f4cad8ea4bc53108543.png
[988061-20181207164255117-1940454691.png]: /images/20230808/790436fa873c48809c7c03b5a22528f4.png
[988061-20181207172603956-754637152.png]: /images/20230808/55dfa0aa1e914ec3a88fca149cb78373.png
[988061-20181207172623777-933352862.png]: /images/20230808/39fcb72784b9413a8198793262dfd9eb.png
[988061-20181207173144383-514496721.png]: /images/20230808/193c1c714f964f91a99d1977a9c8b0e6.png
[988061-20181207173216433-1105814886.png]: /images/20230808/63585705247e4133bac151ce9da47bb4.png
[988061-20181207173520306-1036032135.png]: /images/20230808/682f1c0f097143fa93a4dd1cacae2a7c.png
[988061-20181207173357177-980916999.png]: /images/20230808/bdcf070b24c144f7900c12775acd5b70.png
[988061-20181207173824845-656763365.png]: /images/20230808/2059a785b9f5445c808376da2889637b.png
[988061-20181207205335813-740898590.png]: /images/20230808/b6a0c4e8e2c24fd9bbd38bf0370b58dd.png
[988061-20181207210600224-118716218.png]: /images/20230808/613c2c2e19974b74b45e17a792ef4011.png
[988061-20181207210830054-1277465540.png]: /images/20230808/20902de796ba42e6812c16e6bec438be.png
[988061-20181207210922975-606064073.png]: /images/20230808/deea31d1e6164b98b81d74f250f2794c.png
[867021-20180305155201408-1680872107.png]: /images/20230808/efaf1ca1a25d42ab909bbceaeb5e505c.png
[988061-20181207211608760-1800506928.png]: /images/20230808/692a6282eacb428380e950b222aba07c.png
[988061-20181207211708586-1859067719.png]: /images/20230808/3035726532a84fd3bcd8d99d936f6ede.png
[988061-20181207212107609-1208258871.png]: /images/20230808/fc78e2a09eaf4b64a1a04c042dac2893.png