自学前端第三天~

弹走鱼尾纹~

已于 2022-03-12 16:04:36 修改

阅读量915

点赞数

文章标签：前端 css html

于 2022-03-12 15:32:47 首次发布

本文链接：https://blog.csdn.net/qq_41575188/article/details/123443846

版权

第三天已经开始学习css样式啦，了解到样式的定义可以在三个位置，行内定义、内部定义以及外部定义，外部定义就是要新建一个css的文件，把样式在css文件里面定义，然后用<link rel="stylesheet" type="text/css" href="./css/01.css">，link标签把样式导入html文件里面。内部定义就是在html内的一对<head></head>标签里面去加<style></style>标签，在style标签里面定义各种样式。而行内标签就是直接在之前的div等标签里面加上style属性，定义一些样式。

优先级：!important>行内>内部>外部，比较特别的是!important，不管加在哪种样式后面，都会使其优先级变为最高优先级。

style内定义的规则：

<style>

标签{

样式属性:样式值

}

</style>

定义样式的时候，我们需要将不同的模块对应不同的背景颜色、字体颜色等样式。所以又有了一个定义：选择器，为了适应于各种场景的样式定义，选择器有好几种。元素选择器、类选择器、id选择器、后代选择器、群组选择器、通用选择器、伪类选择器。

元素选择器

就是标签选择器，直接将标签拿出来用，定义其样式

<style>
        h1{
                color: red 
            }
            h2{
                color:rgb(9, 255, 0);
            }
            h3{
                color:blue;
            }
    </style>

类选择器

标签内定义一个class属性值，可以将所有有相同class属性的模块定义相同的样式。一个class属性里面可以定义很多值，共同组合装饰这个模块，在style内定义的时候用"."。如果.div1和.div2两个属性值里面有相同的样式属性，会遵循后来者居上的原则，后写的会生效。

 <head>
<style>
        .div1{
            background: rgb(72, 211, 106);
        }
        .div2{
            color: rgb(226, 11, 11);
        }
    </style>
</head>
<body>
    <div class="div1 div2">11111</div>
    <div class="div2">22222</div>
    <div>3333</div>
    <div>4444</div>
</body>

id选择器

id选择器是在标签里面定义一个id的属性，给这个模板一个独一无二的id值，一个id就像是一个人的身份证，不能两个标签共用一个id，也不能一个标签用两个id。在style中引用的时候用“#”，id选择器用来给特殊的模块做特殊的修饰。

   <style>
        #box1{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div id="box1">11111111</div>
    <div>22222222</div>
    <div>33333333</div>
</body>

后代选择器

后代选择器用于某一个组合标签下某一个标签的样式，比如下面一个div下面有很多的标题，我只想给h1标题修饰，就是div h1{}，，父标签和子标签用空格隔开。为什么不能直接用元素选择器div？会把h2也装饰上，不符合我的需求；为什么不能直接用h1{}?会修饰成和div平级的h1，而不是我需要的div内部的h1。

<div>

</div>

群组选择器

顾名思义，就是组合起来的选择器，可以将很多元素放在一起来共同定义它们的样式，div,h1,h2{},中间用逗号隔开。

通配选择器

用*{}来定义，会选中整个布局，一般用于页面边距的设置，取消一些不必要的边距。

伪类选择器

感觉这个最有意思，伪类选择器作用于超链接，访问超链接的一整个周期都可以定义超链接的样式。有link、vistited、hover、acive。分别表示链接没有被访问的样式、访问过后的样式、鼠标悬停在超链接上的样式、鼠标点下超链接的样式，顺序一定不能乱。

 /* 未访问的颜色 */
        a:link{
            color: blue;
        }
        /* 访问过之后的颜色 */
        a:visited{
            color: crimson;
        }
        /* 鼠标在上面的颜色 */
        a:hover{
            color: aqua;
        }
        /* 鼠标点击后的颜色 */
        a:active{
            color: chartreuse;
        }

一个练手的新闻导航案例

<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>
        a{
            background-color:midnightblue;
            color: white;
        }
        a:hover{
            background-color:red;
            color: white;
        }
        div{
            background-color:midnightblue;
             color: white;
        }
        #home{
            background-color:red ;
        }
    </style>
</head>
<body>
   <div>
        <a href="" id="home">首页</a>
        <a href="">国内</a>
        <a href="">国际</a>
        <a href="">军事</a>
        <a href="">财经</a>
   </div>
</body>

运行结果