css相关

简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        第二种方式
        -将样式编写到head中的style标签里
            然后通过css的选择器来选中元素并为其设置各种样式
            可以同时为多个标签设置样式,并且修改时只需要改一处即可全部应用
        -内部样式表更加方便对样式进行复用
        -问题;
            我们的内部样式表只能对一个网页起作用
                它里边的样式不能跨页面进行复用
     -->
     <style>

        p{
        color: green;
        font-size: 50px;
    
        }

     </style>
     <!-- 
         第三种方式(外部样式表)
            -可以将css样式编写到一个外部的css文件中
                然后通过link标签来引入外部的css文件
            -外部样式表需要通过link标签进行引入,意味着只要想使用这些样式的网页都可以进行引用
                使样式可以在不同页面中进行复用
            -将样式编写到外部的css文件中,可以使用浏览器的缓存机制
                从而加快网页的加载速度,提高用户体验
      -->
      <link rel="stylesheet" href="./style.css">
</head>
<body> 
    <!-- 

        网页分成三个部分,
            结构(html)
            表现(css)
            行为(JavaScript)
        css
            -层叠样式表
            -网页实际上是一个多层的结构,通过css可以分别为网页的每一个层来设置样式
              而最终我们看到的只是网页的最上边一层
            -总之一句话,css用来设置网页中元素的样式

     -->

     <!-- 
         使用css来修改元素的样式

         第一种方式
            -在标签内部通过style属性来设置元素的样式
            -问题;
                使用内联样式,样式只能对一个标签生效
                    如果希望影响到多个元素必须在每一个元素中都复制一遍
                    并且当样式发生变化时,我们必须要一个一个修改,非常不方便

            -注意;开发时绝对不要使用内联样式

      -->

      <p style="color: red;  font-size: 60px;"> 少小离家老大回,乡音无改鬓毛衰 </p>

      <p style="color: red; font-size: 60px;"> 今天天气真不错! </p>

      <P> 落霞与孤鹜齐飞,秋水共长天一色</P>


</body>
</html>

语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*

        css中的注释,注释中的内容会自动被浏览器忽略
            css基本语法;
                -选择器;通过选择器可以选中页面中的指定元素
                        比如p的作用就是选中页面中的所有p元素
            
            声明块;通过声明块来指定要为元素设置的样式
                    声明块由一个一个的声明组成
                    声明是一个名值对结构
                        一个样式名对应一个样式值,名和值之间以:连接,以;结尾

        */
        p{
            color: red;
            font-size: 40px
        }
    </style>
</head>
<body>
    <p>今天天气真不错!</p>
    <p>今天天气真不错!</p>
    <p>今天天气真不错!</p>
</body>
</html>

选择器

(1)常用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        将所有段落设置为红色字体
        
        元素选择器
            作用;根据标签名来选中指定的元素
            语法;标签名{}
            例子;p{}  h1{}  div{}
            
        id选择器
            作用;根据元素的id属性值选中一个元素
            语法; #id属性值{}
            例子;#box{} #red{}

        类选择器;
            作用;根据元素的class属性值选中一组元素
            语法;class属性值


        通配选择器;
            作用:选中页面中所有元素
            语法;*

            */
    *{
        color: red;
    }
    /* 
    #red{
        color:red;
    } */
    .blue{
        color: blue;
    }

    </style>
</head>
<body>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="red">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <!-- 
        class是一个标签的属性,它和id类似,不同的是class可以重复使用
            可以通过class属性来为元素分组
            可以同时为一个元素指定多个class属性
     -->
    <p class="blue">少小离家老大回</p>
</body>
</html>

(2)复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        将class为red的元素设置为红色 */
        .red{
            color: red;
        }
        /* 将class为red的div字体大小设置为30px */
        /*  
        交集选择器
            作用;选中时同时符合多个条件的元素
            语法:选择器1选择器2选择器n{} 
            注意;
                交集选择器中如果有元素选择器,必须使用元素选择器开头
            
        */
        
            div.red{
                font-size: 30px;
            }
            .a.b.c{
                color: blue;
            }
            /* 
            选择器分组(并集选择器)
                作用;同时选择多个选择器对应的元素
                语法;选择器1,选择器2,选择器n{}
                
            */
            h1,span{
                color: green;
            }
    </style>
</head>
<body>
    <div class="red">我是div </div>
    <p class="red">我是p元素</p>
    <div class="red2 a b c ">我是div 2</div>
    <h1>标题</h1>
    <span>哈哈</span>
</body>
</html>

(3)关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 

            为div的子元素span设置一个字体颜色
            (为div直接包含的span设置一个字体颜色)

            子元素选择器;
                -作用;选中指定父元素的指定子元素
                -语法;父元素>子元素


        */
    /* div.box > span{
        color: orange;
    }
    div>p>span{
        color: red;
    } */

    /* 
        后代元素选择器
            作用;选中指定元素内的指定后代元素
            语法;祖先 后代
    */
    /* /* div span {
        color: skyblue; */
    
    /* 
    
        选择下一个兄弟
            语法;前一个+后一个
        选择下边所有的兄弟
            语法;兄~弟
    */
    p + span{
        color: red;
    }

    </style>
</head>
<body>

    <!-- 
        父元素;直接包含子元素的元素叫做父元素
        子元素;直接被父元素包含的元素是子元素
        祖先元素;直接或间接包含后代元素的元素叫祖先元素
                一个元素的父元素也是它的祖先元素
        后代元素;直接或间接被祖先元素包含的元素叫做后代元素
                子元素也是后代元素
        兄弟元素;拥有相同父元素的元素是兄弟元素
     -->

    <div class="box">
        我是一个div

        <p>
            我是div中的p元素
            <span>我是p中的span </span>
        </p>
        <span>我是div中的span元素</span>
    </div>

    <div>
        <span>我是第二个span</span>
    </div>
   
    
</body>
</html>

(4)属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
        [属性名] 选择含有指定属性的元素
        [属性名=属性值] 选择含有指定属性和属性值的元素
        [属性名^=属性值] 选择属性值以指定值开头的元素
        [属性名$=属性值] 选择属性值以指定值结尾的元素
        [属性名*=属性值] 选择属性值中含有某值的元素的元素
        
    */
    p[title]{
        color: orange;
    }
</style>
<body>

    <p title="abc">少小离家老大回</p>
    <p title="abcdef">乡音无改鬓毛衰</p>
    <p title="hello">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <p>秋水共长天一色</p>
    <p>落霞与孤鹜齐飞</p>
</body>
</html>

(5)伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    /* 
        将ul里的第一个li设置为红色
        
    */

    /* 
            伪类(不存在的类,特殊的类)
                -描述一个元素的特殊状态
                    比如,第一个子元素,被点击的元素,鼠标移入的元素
                -伪类一般使用:开头
                    :first-child 第一个子元素
                    :last-child最后一个子元素
                    :nth-child()选中第n个子元素
                            特殊值; n 第n个 n的范围是0到正无穷
                                    2n 或even 表示选中偶数位的元素
                                    2n+1 或 odd表示选中奇数位的元素
                以上这些伪类都是根据所有子元素进行排序

                :first-of type
                :last-of-type
                :nth-of type()
                    -这几个伪类的功能和上述功能相似,不同点是他们是在同类型元素中进行排序

                :not()否定伪类
                    将符合条件的元素从选择器中去除 */
     /* ul>li:not(:nth-child(3)){
         color:yellow;
     } */
     
    /* ul>li:first-child{
        color: red;
    } */
    /* ul>li:last-child{
        color: red;
    } */

</style>
<body>
    
       <ul>
           <li>第一个</li>
           <li>第二个</li>
           <li>第三个</li>
           <li>第四个</li>
           <li>第五个</li>
       </ul>

</body>
</html>

超链接元素的伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 
    :link 用来表示没访问过的链接(正常的链接)
     */
    a:link{
        color: red;
    }

    /* 
        :visited用来表示访问过的链接

        由于隐私的原因,所以visited这个伪类只能修改链接的颜色

    */
    a:visited{
         color: orange;
         /* font-size: 50px; */
    }

    /*
     :hover 用来表示鼠标移入的状态
     */
     a:hover{
         color: blue;
     }

     /* 
        :active用来表示鼠标点击
     */
     a:active{
         color: yellowgreen;
     }
</style>
<body>

    <!-- 
        1.没有访问过的链接
        2.访问过的链接
     -->
    <a href="https://www.baidu.com">访问过的链接</a>

    <br><br>

    <a href="https://www.baidu.com">没访问过的链接</a>

</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    p{
        font-size: 20px;
    }
    /* 
    
        伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊位置)
            伪元素使用::开头
            
            ::first-letter 表示第一个字母
            ::first-line 表示第一行
            ::selection表示选中的内容
            ::before 元素的开始
            ::after 元素的最后
                before 和after必须结合content属性来使用
            
*/
div::before{
    content: 'abc';
    color: red;
}
</style>
<body>
    <div>abchello hello hoe are you </div>

    
</body>
</html>

样式的继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            样式的继承,我们为一个元素设置的样式同时也会应用到它的后代元素上
        
            继承是发生在祖先后代之间的
        
            继承的设计是为了方便我们的开发,利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上
                这样只需设置一次即可让所有的元素都具有改样式

            注意;并不是所有的样式都会被继承,
                比如 背景相关的,布局相关等的这些样式都不会被继承  

        */

        p{
            color: red;
        }
        div{
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>

    <span>我是p外的span </span>
    
    <div>
        我是div 
        <span>
            我是div中的span
            <em>我是span中的em </em>
         </span>
    </div>
</body>
</html>

选择器的权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            background-color: orange;
        }

        div{
            color: yellow;
        }

        .red{
            color: red;
        }
        /* 
            样式的冲突
                -当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值
                    此时就发生了一个样式的冲突

            发生样式冲突时,应用哪个样式由选择器的权重决定(优先级)决定

            选择器的权重;
                    内联样式        1,0,0,0
                    id选择器        0,1,0,0
                    类和伪类选择器   0,0,1,0
                    元素选择器       0,0,0,1
                    通配选择器       0,0,0,0
                    继承的样式   没有优先级

            比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的)
                选择器的累加不会超过最大的数量级,类选择器再高也不会超过id选择器
            如果两个优先级相同,此时优先使用靠下的样式

            可以在某一个样式后面添加important,则此时改样式会获取最高优先级,甚至超过内联样式
                注意;在开发中一定要慎用
        */

    </style>
</head>
<body>
    <div id="box1" class="red" ;>我是一个div  </div>
</body>
</html>

单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{

            /* 
            长度单位,
                像素
                    -屏幕(显示器)实际上是由一个一个小点点构成的
                    -不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
                    -所以同样的200px在不同的设备下显示效果不一样

                百分比
                    -也可以将属性值设置为相对于其父元素属性的百分比
                    -设置百分比子元素可以随父元素改变而改变
                
                em
                    -em是相对于元素的字体大小来计算的
                    -1em=1font-size
                    -em会根据字体大小的改变而改变

                rem
                    -rem是相对于根元素的字体大小来计算的

                    
            */
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .box2{
            width: 50%;
            height: 50%;
            background-color: aqua;
        }
        .box3{
            font-size: 20px;
            width: 10em;
            height: 10em;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

颜色单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
            /* 
            
                颜色单位;
                    在css中可以直接使用颜色名来设置各种颜色
                    但是在css中直接使用颜色名非常不方便

                RGB值
                    -RGB通过三种颜色的不同浓度来调配出不同颜色
                    -R red, G green, B blue
                    -每一种颜色的范围在0-255(0%-100%)之间
                    -语法;RGB(红色,绿色,蓝色)

                RGBA
                    -语法;RGBA(红色,绿色,蓝色,透明度 (0是完全透明 1是完全不透明))

                十六进制的RGB值;
                    -语法;#红色绿色蓝色
                    -颜色浓度通过00-ff
                    -如果颜色两位两位重复可以进行简写
                        #aabbcc-->#abc
                    
                HSL值 HSLA值
                    H色相(0-360)
                    S饱和度,颜色浓度0%-100%
                    L亮度,颜色的亮度0-100
                    
            */
         .box1{
             width: 100px;
             height: 100px;
            background-color: red;
            background-color: rgb(255, 0, 0);
            background-color: rgba(255, 0, 0, 1);
            background-color: #ff0000;
            background-color: hsl(0, 100%, 0);
           
            
         }   
        
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

Q.E.D.