初识CSS（一）

最新推荐文章于 2024-07-16 15:41:31 发布

奋斗在阿尔卑斯的皮卡丘

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量306

点赞数

分类专栏： web前端文章标签： html 编程基础

本文链接：https://blog.csdn.net/qq_37289115/article/details/88719296

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、CSS基本使用

1. CSS 是什么

CSS 全称 Cascading Style Sheets。翻译过来就是层叠样式表。如果说HTML是网页的结构，那么CSS就是网页化妆师。

2. CSS 怎么学

多敲多练多思考

3. CSS 写在哪里

CSS 有三种写法：

直接写在标签内

<!--行间样式-->
<div style="width: 200px;height: 200px;background: red"></div>

写在 style 标签内

<style>
	/*内嵌的css样式*/
    div{
		width: 200px;
        height: 200px;
        background: skyblue;
        }
</style>

使用外部 .css 文件(开发都用这个形式)

<!--index.css-->
div{
    width: 300px;
    height: 200px;
    background: antiquewhite;
}

<!--外链css样式-->
<link rel="stylesheet" href="index.css">

CSS 使用的最多的就是这三种方式，各有各的优缺点，细心的同学可能会注意到一个优先级的问题，这个是CSS的一大特性。
CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
行间样式 > 内嵌css样式 > 外链css样式（在style之前引入）

二、选择器

1. 选择器是什么

CSS 的选择器是 CSS最基础也是最重要的一个知识点。很重要！！

2. 选择器权重

谁的权力大，就听谁的，同理，选择器权重也是一样，谁的权重值高，应用谁的。

3. 选择器用处

用于准确的选中元素，并赋予样式。

4. 基本的选择器

(1) 元素(标签)选择器

选择相同的元素对相同的元素设置一种css样式选中页面中所有的此元素。

div{
            width: 200px;
            height: 100px;
            background: skyblue;
        }

    <div>4</div>
    <div>5</div>

元素选择器

(2) id选择器

给标签设置一个id属性，在写样式时，在id名字前面加个 #

#box1{
            background: skyblue;
        }

<div id="box1">3</div>

id选择器

(3) class选择器

给标签设置一个class属性，在写样式时，在class名字前面加个.一般给具有相同属性的元素设置同一个class。

#box{
     background: red;
	}
	
.wrap{
      background: aqua;
	}

    <div class="wrap">1</div>
    <div id="box" class="wrap">2</div>

class选择器

(4) 通配符选择器

页面中标签之间有空白
问题引入
匹配任何元素

*{
  margin: 0;
  padding: 0;
  background: antiquewhite;
}

现在空白没有了
通配符选择器

(5) 基本选择器的优先级

id选择器 > class选择器 > 标签选择器 > 通配符选择器

div{
	background: skyblue !important;
}

!important 最高优先级(前端开发很少去用)

5. 复杂的选择器

(1) 群组选择器

对几个有相同属性的选择器进行样式设置两个选择器之间必须用逗号隔开

div,p{
     width: 100px;
     height: 100px;
     background: skyblue;
}

群组选择器

(2) 兄弟选择器

操作的对象是该元素下的所有兄弟元素

div~p{
     width: 200px;
     height: 200px;
     background: skyblue;
}

    <p>p1</p>
    <div>div1</div>
    <p>p2</p>
    <p>p3</p>
    <span>span1</span>
    <span>span2</span>
    <p>p4</p>
    <p>p5</p>
    <div>
        <p>55</p>
        <p>66</p>
    </div>

兄弟选择器
div下面是p标签，只有p标签是他的兄弟，span就不是兄弟，div也不是兄弟，只找同级的p标签
要想选择多个兄弟标签就要用到群组选择器

div~p, div~span{
	width: 200px;
    height: 200px;
    background: skyblue;
}

(3) 相邻选择器

操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素
挨着的兄弟元素

div+p{
     width: 200px;
     height: 200px;
     background: skyblue;
}

    <div>div1</div>
    <p>p2</p>

相邻选择器
只找相邻的p标签

<div>div1</div>
<span>span1</span>
<p>p2</p>

如果相邻不是p标签则无效
相邻选择器
如果找p3的话

div+p+p{
       width: 200px;
       height: 200px;
       background: skyblue;
}

<div>div1</div>
<p>p2</p>
<p>p3</p>

相邻选择器

(4) 子代选择器

选择某个元素下面的子元素

    <!--只去一个原点-->
    <div>
        <ul>
            <li>li1
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>li2</li>
            <li>li3</li>
        </ul>
    </div>

div>ul{
            list-style: none;
        }

子代选择器

6. 后代选择器

包含所有后代，例如子代，孙代

        div{
            background: yellow;
        }
        div ul{
            list-style: none;
        }

    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
        </ul>
    </div>

后代选择器

7. 伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*LoVeHAte*/
        a:link{/*link 未被点击的链接*/
            color: red;
        }
        a:visited{/*已被点击的链接*/
            color: skyblue;
        }
        a:hover{/*鼠标悬停其上的元素  这个一定要掌握*/
            color: bisque;
        }
        a:active{/*鼠标已经再其上按下但是还没有释放的元素*/
            color: blue;
        }

        div{
            width: 100px;
            height: 100px;
            background: skyblue;
        }
        div:hover{  /*div:hover  改变的是div本身*/
            background: red;
            width: 300px;
            height: 200px;
            cursor: pointer;/*手指*/
            /*cursor: default; 箭头*/
            /*cursor: wait; 等待*/
            /*cursor: help;*/
        }
        div:hover p{/*div:hover p 当div被鼠标划入的时候 改变后代p*/
            width: 50px;
            height: 30px;
            background: aqua;
        }

    </style>
</head>
<body>
    <a href="http://www.baidu.com">去百度</a>
    <div>
        <p></p>
    </div>
</body>
</html>

在这里插入图片描述

8. 复杂选择器的优先级

id > class > 标签

复杂后代选择器 1 1 1

先比id(最高位) class（中间位）标签名（个数位）
1 2 3
id选择器个数不相等，id越多，优先级越高
id选择器个数相同,则看class,class多的优先级高
class个数相等，就看标签名个数

9. 多个class

一个标签拥有多个class名，css会应用在同一个身上

<div class="box1 box2 box3"></div>

    <style>
        .box1{
            width: 500px;
        }
        .box2{
            height: 200px;
            background: skyblue;
        }
        .box3{
            background: blue;
        }
        /*li.box#wrap*/
        /*li标签，class叫box，id叫wrap*/
        /*li .box*/
        /*li 后代 class叫box*/
    </style>

li.box#wrap
li标签，class叫box，id叫wrap
li .box(有空格)
li 后代 class叫box

10. 同类型选择器

可以选择input标签类型为相同属性的标签。

        input[type=submit]{
            background: dodgerblue;
        }

奋斗在阿尔卑斯的皮卡丘

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
初识CSS（一）

文章目录一、CSS基本使用1. CSS 是什么2. CSS 怎么学3. CSS 写在哪里二、选择器1. 选择器是什么2. 选择器权重3. 选择器用处4. 基本的选择器(1) 元素(标签)选择器(2) id选择器(3) class选择器(4) 通配符选择器(5) 基本选择器的优先级5. 复杂的选择器(1) 群组选择器(2) 兄弟选择器(3) 相邻选择器一、CSS基本使用1. CSS 是什么 ...
复制链接

扫一扫