CSS样式及选择器

璃期

已于 2022-08-25 17:53:44 修改

阅读量1.8k

点赞数

分类专栏： HTML 文章标签： html css 前端

于 2022-06-26 10:02:47 首次发布

本文链接：https://blog.csdn.net/weixin_51209513/article/details/125467075

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、CSS样式

1.内部样式

/*写在head标签里，就近原则*/
<style>
  h1{
    color:red;
  }
</style>

2.外部样式

/*方法一*/
<link rel="stylesheet" type="text/css" href="css文件的路径">

/*方法二*/
<style type="text/css">
  @import url("css文件的路径")
</style>

3.行内样式

<div style="color:red;"></div>

4.样式的优先级

!important > 行内样式 > 内部样式 > 外部样式

div{
  color:red!important;
}

二、CSS选择器

1.标签选择器
    div{

    }
2.类选择器
  当一个标签被赋予多个类时，执行顺序为style标签的执行顺序
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .one{
                color: yellow;
            }
            .two{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="two one">1111111111</div>//结果为蓝色
        <div class="one two">2222222222</div>//结果为蓝色
    </body>
    </html>
3.id选择器（唯一选择）
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #one{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="one">1111111111</div>
    </body>
    </html>
4.通配符选择器
    *{//所有元素，边距清0
	   margin:0;
       padding:0;
    }
5.群组和后代选择器
<!--群组-->
    div,.box,p{

    }
<!--后代-->
    div p{//div下的p标签

    }
6.伪类选择器
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            /*顺序为link-visited-hover-active*/
            /*初始状态*/
            a:link{
                color: yellow;
            }
            /*访问之后*/
            a:visited{
                color: red;
            }
            /*鼠标悬停*/
            a:hover{
                color: orange;
            }
            /*点击激活*/
            a:active{
                color: green;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
    </body>
    </html>

选择器的优先级：id选择器 > 类选择器 > 元素选择器