CSS常用选择器

港控/mmm° 2022-05-08 23:42 230阅读 0赞

CSS （层叠样式表） 编辑

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。  
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

# 一.行内标签和块级元素 #

1.  块级元素特点  
    总是在新行上开始；  
    高度、行高以及外边距和内边距都可控制；  
    宽度默认是它容器的100%，除非设定一个宽度；  
    可以容纳内联元素和其他块级元素。
2.  行内元素特点  
    和其他元素都在同一行；  
    高，行高及外边距和内边距不可改变；  
    宽度就是它的文字和图片的宽度，不可改变；  
    内联元素只能容纳文本或者其他内联元素。

3.（div）和（span）相关的技术:  
1). div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;  
2）. span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合CSS使用, 主要对括起来的内容进行样式的修饰;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <span style="color: green"><div style="color: red">hello</div></span>
    <div style="color: green"><span style="color: red">hello</span></div>
    
    
    <span style=" border: 1px solid red; text-align:center">hello</span><br/>
    <span style="width: 200px; height: 200px; border: 1px solid chartreuse">world</span><br>
    <div style="width: 100px; height: 100px; border-radius:25px;border: 1px solid blueviolet;
        box-shadow: 1px 1px 3px #888888;">hello</div><br>
    <div style="width: 100px; height: 100px; border: 1px solid aquamarine">world</div>
    he<strong>llo</strong><br>
    <span>hello</span><br>
     
    <div style="text-align: center; width: 100px; height: 100px; border-radius:25px;
    border: 1px solid blueviolet; margin: 0 auto">hello</div>
    
    </body>
    </html>

![在这里插入图片描述][70]

**3.总结:**

1.  学习的行内标签和 块级元素分别有哪些?  
    行内标签:span, strong, a, img, input, textarea  
    块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td
2.  两者的区别与特性；  
    1).块级元素独占一行空间， 行内元素只占据自身宽度的空间;  
    2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;  
    3). 块级元素可以设置宽和高， 行内元素设置的宽和高失效；
3.  如何让块级元素居中? 如何让行内元素居中?  
    1); 块级元素居中： margin: 0 auto  
    2> 行内元素居中: text-aligin:center

# 二.CSS 样式\_标签选择器 #

基本格式：  
在（title）标签下部建立（style）标签（CSS的标签选择器），  
再在（style）标签内先给某一种标签建立属性

![在这里插入图片描述][70 1]

# 三.CSS样式\_类选择器 #

基本格式：  
在（body）中为某些需要的标签定义类  
在（title）标签下部建立（style）标签（CSS的标签选择器），  
再在（style）标签内先给某一种标签建立属性  
给该种标签的某一类设置新的属性（类名前加‘.’）

注：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。  
定义的类中会覆盖掉之前定义的相同的属性

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
              
        <style>
            div{
                width:100px;
                height: 100px;
                border-radius:25px;
                border: 1px solid blueviolet;
                text-align: center;
                margin: 0 auto;
                padding-top: 20px;
                text-shadow: 5px 5px 5px gray;
            }
    
            /*选择div标签中类名为important的进行设置下面的样式*/
            .important {
                width: 20px;
                height: 20px;
                font-size: large;
                border-radius:25px;
                border: 1px solid blueviolet;
            }
        </style>
    </head>
    <body>
    
    <div class="important">1</div>
    <div>2</div>
    <div class="important">3</div>
    <div>4</div>
    <div class="important">5</div>
    
    </body>
    </html>

![在这里插入图片描述][70 2]

# 四.CSS样式\_id选择器 #

基本格式：  
在（body）中为某些需要的标签定义id  
在（title）标签下部建立（style）标签  
再在（style）标签内给某一种id建立属性（id名前加“\#”）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
              
        <style>
            #westos{
                width:100px;
                height: 100px;
                border-radius:25px;
                border: 1px solid blueviolet;
                text-align: center;
                margin: 0 auto;
                padding-top: 20px;
                text-shadow: 5px 5px 5px gray;
            }
        </style>
    </head>
    <body>
    
    
    <div style="text-align: center">1</div>
    <div id="westos">2</div>
    <div style="text-align: center">3</div>
    
    </body>
    </html>

![在这里插入图片描述][70 3]

# 五.CSS样式\_层级选择器 #

顾名思义，就是给一层下的某层标签设置属性

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
           ul li a {
               color: red;
           }
    
           input[type='submit']{
               background: palevioletred;
                width: 200px;
    
           }
    
        </style>
    
    </head>
    <body>
    
    <ol>
        <li><a href="#" > 新闻1</a></li>
        <li><a href="#"> 新闻2</a></li>
        <li><a href="#"> 新闻3</a></li>
    </ol>
    
    <ul>
        <li><a href="#"> 新闻1</a></li>
        <li><a href="#"> 新闻2</a></li>
        <li><a href="#"> 新闻3</a></li>
    </ul>
    
    <form>
        姓名: <input type="text"><br/>
        密码: <input type="password"><br/>
        <input type="submit" value="注册">
    </form>
    </body>
    </html>

![在这里插入图片描述][70 4]

# 六.CSS样式的引入方式 #

1.行内引入  
(a style=“行内引入的样式”)  
2.内部引入  
写在head标签里面的style标签里面的样式;  
3.外部引入  
外部引入CSS样式文件是通过标签实现的，它只能位于HTML文档的head标签内，且必须有href属性，用于指定需要引入的CSS文件的绝对路径

### 三种引入方式的优先级: 就近原则 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            li {
                background: red;
            }
        </style>
        <link rel="stylesheet" href="css/main.css">
    
    </head>
    <body>
    <div>
        <ul>
            <li style="background: blue">
                <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
            </li>
            <li>CSS</li>
            <li>JS</li>
            <li>python</li>
        </ul>
    </div>
    </body>
    </html>

![在这里插入图片描述][70 5]

该程序为“css/main.css”中的内容

div {
        width: 80%;
        margin: 0 auto;
        padding: 0;
    
    }
    
    ul {
        list-style-type: none
    }
    
    li {
        display: inline-block;
        width: 20%;
        background: snow;
        color: #333333;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        font-size: large;
        text-transform: capitalize;
    }
    
    li:hover {
        background: green;
        color: snow;
    }
    
    a:hover {
    
        color: snow;
    
    }

其中

li:hover {
                background: green;
                color: snow;

选择鼠标指针浮动在其上的元素，并设置其样式

[70]: /images/20220509/01e017ef07074420b441759b976b5b05.png
[70 1]: /images/20220509/b94cb7cb5ad044588ae0439e6c68afd8.png
[70 2]: /images/20220509/8232fdf011c94db38c100c5ecb3e9b78.png
[70 3]: /images/20220509/273e9bd8c3984952a7223a1b6c3d907d.png
[70 4]: /images/20220509/8abdeeaf938b4d5392e6fa7c5ff48a03.png
[70 5]: /images/20220509/b2c6613704cc4fd995d2ed8fccbfae86.png