css(上)

r囧r小猫 2023-08-17 15:20 69阅读 0赞

# CSS #

## 　　　　　　　　　　（层叠样式表） ##

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

css的三种引用方式:

link标签中 href指定 mycss.css 文件的地址

style标签中 直接写css代码

在每个单独的标签中写css

![1727285-20190904161452024-842054520.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三种方式</title>
    <style>
        #d9 {
         
            color: black;
        }
    
        p{
         
            color:orangered;
        }
    </style>
    </head>
    <body>
    <p style="color: fuchsia;">你们一定努力啊!</p>
    
    <p style="color: blue">你们</p>
    <p id="d9" >???没了</p>
    <hr>
    </body>
    </html>
    结果:

![1727285-20190904160649944-1697584876.png][]

标签选择器:标签名
     p {
         
         color: red;
     }
     类选择器:点+类名
     .c1 {
         
         color: yellow;
     }
     id选择器:#+id值
     #d1 {
         
         color: green;
     }
    通用/全局选择器 
     * {
         
         color: blue;
     }

1.选择器相同的情况下:就近原则
    2.选择器不同的情况下:
    
    
    行内  > id选择器 > 类选择器  > 标签选择器

![1727285-20190904161537891-613079320.png][]

![1727285-20190904161549900-1355780456.png][]

![1727285-20190904161603609-1715343917.png][]

![1727285-20190904161613411-132952421.png][]

组合选择器:

后代选择器
    div span {
         
        color: red;
    }
    儿子选择器
    div>span {
         
        color: aqua;
    }
    毗邻选择器:紧挨着的下面的一个
    div+span {
         
        color: orange;
    }
    弟弟选择器:同级别的下面所有的标签
    div~span {
         
        color: brown;
    }

![1727285-20190904161654503-1492747219.png][]

属性选择器

![1727285-20190904161718726-65787384.png][]

### 分组 ###

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

例如div,p,a\{

color : red ;\}

嵌套

\#a1 ,.b1,span 即各个不同的选择器使用逗号链接

/*连接态*/
        a:link {
         
            color: pink;
        }
        /*鼠标悬浮态*/
        a:hover {
         
            color: red;
        }
        /*鼠标点击态*/
        a:active {
         
            color: purple;
        }
        /*访问过后的状态*/
        a:visited {
         
            color: dimgrey;
        }
    /*    input框被点击的状态 称之为获取焦点*/
        input:focus {
         
            background-color: orange;
        }
        input:hover {
         
            background-color: red;
        }

伪类选择器

a:link\{

color:red

a :hover\{

color : yello

a:vistied\{

color:blue

input :focus\{

outline:none;

background-color:\#eee\}

![1727285-20190904165258780-709089734.png][]

示

例[:first-child 实例][first-child]的效果。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p:first-child {
                font-weight: bold;
                color: gold
            }
    
            li:first-child {
                text-transform: uppercase;
                color: red
            }
        </style>
    </head>
    <body>
    <div>
        <p>These are the necessary steps:</p>
        <ul>
            <li>Intert Key</li>
            <li>Turn key <strong>clockwise</strong></li>
            <li>Push accelerator</li>
        </ul>
        <p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
    </div>
    </body>
    </html>

演示结果如下可以看到只有 第一个元素得到改变

![1727285-20190904165901930-864779765.png][]

<head>
    <style type="text/css">
    p > i:first-child {
      font-weight:bold;
        color: gold;
      }
    </style>
    </head>
    
    <body>
    <p>some <i>text1</i>. some <i>text2</i>.</p>
    <p>some <i>text1</i>. some <i>text2</i>.</p>
    <p>some <i>text1</i>. some <i>text2</i>.</p>
    <p>some <i>text1</i>. some <i>text2</i>.</p>
    </body>
    </html>

![1727285-20190904170821343-2144863657.png][]

其中p>i代表作所有属于p的i的第一个i会被选做一个类.

伪元素选择器

### first-letter ###

p:first-letter\{

font-size:48px;

color:red;

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

### before ###

在每个<p>元素前面插入内容gkd

p:before\{

content:'gkd'

color:'bule'\}

### after ###

在解决浮动问题上很有用,可用来在结尾增加内容

p:after\{

content:"???总结"

color : red\}

![1727285-20190904164847712-865007655.png][]

优先级的示意图:

>>>> >>>> >>>>>

![1727285-20190904164938260-1681943965.png][]

>>>> >>>> >>>>>

转载于:https://www.cnblogs.com/Sunbreaker/p/11460265.html

[1727285-20190904161452024-842054520.png]: /images/20230810/f7665d849dd841bb9a4623793ef26f50.png
[1727285-20190904160649944-1697584876.png]: /images/20230810/c986b58988174a73a89beb9f9e3781cd.png
[1727285-20190904161537891-613079320.png]: /images/20230810/c4131b181f76438eb396fb8d414a8489.png
[1727285-20190904161549900-1355780456.png]: /images/20230810/866a4c42448a472a8aebc5935e2e42eb.png
[1727285-20190904161603609-1715343917.png]: /images/20230810/dbb70d8dff334a0a92b14e99ff5cb8b1.png
[1727285-20190904161613411-132952421.png]: /images/20230810/e1fdf8a0ee4e44d3959a5a91ccdfcf5a.png
[1727285-20190904161654503-1492747219.png]: /images/20230810/d88bfc6f1ec649c9879cf6d9773bd5e2.png
[1727285-20190904161718726-65787384.png]: /images/20230810/a2e577ab5a7f4a92a6ce6bf13b4cd5ba.png
[1727285-20190904165258780-709089734.png]: /images/20230810/a3150dd903014eaaa05fdb16800d3e56.png
[first-child]: https://www.w3school.com.cn/tiy/t.asp?f=csse_first-child
[1727285-20190904165901930-864779765.png]: /images/20230810/f3e92d4edb9349d08a93ee8888a6a111.png
[1727285-20190904170821343-2144863657.png]: /images/20230810/0d53608f0ad044ca9f04ad48315da21f.png
[1727285-20190904164847712-865007655.png]: /images/20230810/a09d6a76ebbf4433ab4bdff88e989772.png
[1727285-20190904164938260-1681943965.png]: /images/20230810/538751d5ac2c4d4d84bd877be337b2fb.png