Web前端学习3

404我只想睡觉

已于 2022-11-13 16:29:16 修改

阅读量268

点赞数 1

文章标签：前端学习 css

于 2022-11-08 20:43:10 首次发布

本文链接：https://blog.csdn.net/weixin_71337144/article/details/127741563

版权

web前端学习3

一、CSS复合样式
二、CSS选择器
三、标签群组通配等选择器
四、属性选择器
五、hover等伪类选择器
六、after等伪类选择器
七、结构伪类选择器
八、css样式的继承
十、CSS优先级
十一、important优先级
十二、层次优先级

一、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式的写法：是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border……
但是，font 是字体的复合样式，需要关心顺序
1.background：red url () repeat 0 0;
2.border：1px red solid;
3.font :
注：最少要有两个值 size family（先写字体大小再写字体类型）
weight style size family
style weight size family
weight style size/line-height family
注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，这样样式才不会被覆盖掉。

    <style>
        div{width:300px;height:300px;
        background:red url(./img/dog.jpg)no-repeat center center;
    border-right:dashed 2px blue;
     font:bold italic 30px/100px 宋体；
    }
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

二、CSS选择器

ID选择器
css : #elem{}
html : id=“elem”
注：
（1）ID是唯一值，在一个页面中，
（2）命名规范：由字母、下划线、中划线、字母（并且第一个不能是数字)
（3）驼峰写法：searchButton（小驼峰）searchButton（大驼峰）searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button

部分CSS命名规则：
在这里插入图片描述
在这里插入图片描述

    <style>
        #div1{background: red;}
        #div2{background: blue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这是又一个块</div>
    <div id="xiaoming1"></div>
    <div id="xiaoming2"></div>
    <div id="searchButton"></div>
</body>
</html>

CLASS选择器（可以重复利用）
css : #.elem{}
html : class=“elem”
注：
（1）class选择器是可以复用的
（2）可以添加多个class样式
（3）多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
（4）标签+类的写法
代码：

   <style>
        p.box{background: red;}
    </style>
</head>
<body>
  <div class="box">这是一个块</div>
  <div class="box">这又是一个块</div>
  <p class="box">这是一个段落</p>
</body>
</html>

三、标签群组通配等选择器

标签选择器（TAG选择器)
css : div{ } <div></div>
使用的场景:
（1）去掉某些标签的默认样式时
（2）复杂的选择器中，如层次选择器
html : <div>
群组选择器(分组选择器)
可以通过用逗号隔开的方式，给不同的选择器添加统一的css样式，来达到代码的复用
css : div、p、span{ }
通配选择器
*{ } -> div，ul，li，p，h1，h2······{}
注: 尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用
使用场景: 去掉所有标签的默认样式时

<style>
        /* div{ background: red;}
        #text{ background: red;}
        .title{ background: red;} */
        /* div , #text ,.title{ background: red;} */
        *{ border: red solid;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>

二、层次选择器
后代 : M N{ }
父子 : M > N{ }
兄弟 : M ~ N{ } 当前M下面的所有兄弟N标签
相邻 : M + N{ } 当前M相邻的N标签

<style>
        /* #list li{ border: red solid;} */
        /* #list > li{ border: red solid;} */
        /* div ~ h2{ background: red;} */
        div + h2 { background: red;}
    </style>
</head>
<body>
    <!-- <ul id="list">
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol> -->
    <h2>这是一个标题</h2>
    <di>这是一个块</di>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
</body>

四、属性选择器

= : 完全匹配
*= : 部分匹配
^= : 起始匹配
$= : 结束匹配
[ ][ ][ ] : 多个中括号组合匹配

<style>
        /* div[class]{ background: red;} */
        /* div[class=box]{ background: red;} */
        /* div[class*=search]{ background: red;} */
        /* div[class^=search]{ background: red;} */
        /* div[class$=search]{ background: red;} */
        div[class][id]{ background: red;}
    </style>
</head>
<body>
    <div>我好困</div>
    <div class="box" id="elem">我还困</div>
    <div class="search">我一直困</div>
    <div class="search-button">睡不醒</div>
    <div class="button-search">我只想睡觉</div>
</body>

五、hover等伪类选择器

伪类选择器
M:伪类{ }
CSS伪类用于向某些元素添加特殊效果。一般用于初始样式添加不上的时候，用伪类来添加。
(1):link 访问前的样式(只能添加a标签)
(2):visited 访问后的样式 (只能添加a标签)
(3):hover 鼠标移入时的样式(可以添加给所有的标签)
(4):active 鼠标按下时的样式(可以添加给所有的标签)
注:
(1)link visited 只能给a标签加，hover和active可以给所有标签加。
(2)如果四个伪类都失效，一定要注意顺序 : L V H A。
(3)一般网站只这样去设置 : a{ } a:hover{ }。

 <style>
        /* div{ width: 200px; height: 200px; background: red;}
        div:hover{ background: blue;}
        div:active{ background: green;} */
        /* a:link { color:red;}
        a:visited{ color:blue;}
        a:hover{ color:green;}
        a:active{ color:yellow;} */
        a{ color:gray;}
        a:hover{ color: red;}
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
</body>

六、after等伪类选择器

:after、:before 通过伪类的方式给元素添加一些文本内容，使用content属性
:checked、:disabled、:focus都是针对表单元素的

<style>
    /* div::after{ content:"Word";} */
    /* div:before{ content:"Word"; color: red;} */
    /* :checked{ width: 100px; height: 100px;} */
    :disabled{ width: 100px; height: 100px;}
    :focus{ background: red;}
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="checkbox" checked>
    <input type="checkbox" disabled>
    <input type="text">
</body>

七、结构伪类选择器

(1):nth-of-type()、:nth-child()
角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大
(2):first-of-type、:first-child
(3):last-of-type、:last-child
(4):only-of-type、:only-child
nth-of-type()和nth-child()之间的区别
type : 类型
child : 孩子

<style>
        /* li:nth-of-type(n){ background: red;} */
        /* li:nth-of-type(2n){ background: blue;}
        li:nth-of-type(2n+1){ background: red;} */
        /* li:first-of-type{ background: red;}
        li:last-of-type{ background: blue;} */
        /* li:only-of-type{ background: red;} */
        /* li:nth-of-type(2){ background: red;} */
        /* div:nth-child(2){ background: red;} */
        /* li:nth-child(3){ background: red;} */
        /* li:nth-of-type(3){ background:red;} */
        div:only-of-type{ background: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <div>我只想睡觉</div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

八、css样式的继承

文字相关的样式可以被继承
布局相关的样式不能被继承(默认是不能继承的，但是可以设置继承属性)
注 : inherit值

<style>
        div{ width:300px; height: 300px; border: 1px red solid;
             color: red; font-size: 30px;}
        p{ border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

十、CSS优先级

（1）相同样式优先级：
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

（2）内部样式与外部样式：
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

（3）单一样式优先级：
style行间 > id > class > tag > * > 继承
注：
style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

<!-- <style>
        div{ color:red;}
        div{ color:blue;}
    </style>
    <link rel="stylesheet" href="./base.css"> -->
    <style>
        /* #elem{ color:red;} */
        /* .box{ color: blue;} */
        /* div{ color:green;} */
        /* *{ color:red;} */
        body{ color:blue;}
    </style>
    </head>
<body>
    <!-- <div id="elem" style="color:blue;">这是一个块</div> -->
    <div id="elem" class="box">这是一个块</div>
</body>

十一、important优先级

important
提升样式优先级，非规范方式，不建议使用。（不能针对继承属性进行优先级的提升）
标签+类与单类

群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。
标签+类 > 单类

style>
        /* #elem{ color:red !important;}
        *{ color:green;} */
        /* #elem{ color:red ;}
        *{ color:green !important;} */
        /* #elem{ color:red ;}
        *{ color:green ;}
        body{ color:gray !important;} */
        /* .box{ color:red;}
        div.box{ color:blue;} */
        /* div.box{ color:blue;}
        .box{ color:red;} */
        /* div,p{ color:red;}
        div{ color:blue;}*/
        div{ color:blue;}
        div,p{ color:red;}
    </style>
</head>
<body>
    <!-- <div id="elem" style="color:blue;">这是一个块</div> -->
    <div class="box">这是一个块</div>
    <p>这是一个段落</p>
</body>