css选择器

最新推荐文章于 2024-07-12 16:38:52 发布

膀大腰圆你大哥

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量172

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_67191787/article/details/124668743

版权

什么是CSS?

CSS指层叠样式表(Cascading Style Sheets), 样式定义如何显示HTML元素,样式通常存储在样式表中,添加到HTML中,外部样式表可以极大提高工作效率,通常存储在CSS文件中;

html在一个网页中负责的事情是宇哥页面的结构

css(层叠样式表)在一个网页中主要负责了页面的数据样式.

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>
</head>
<body>
    <h3>我爱北京天安门</h3>
    <h3 style="color: red;">天安门上太阳升</h3>
</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>
        h3{
            color: brown;
        }
    </style>
</head>
<body>
    <h3>我爱北京天安门</h3>
    <h3>天安门上太阳升</h3>
</body>
</html>

内部样式写在<head></head>标签里<style></style>内;

标签后加一对大括号,大括号里写入css内容;

这样的标签叫做标签选择器;

内部样式用于修改所有相同标签的属性

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>
    <link rel="stylesheet" href="./外部样式.css">
</head>
<body>
    <h3>我爱北京天安门</h3>
    <h3>天安门上太阳升</h3>
</body>
</html>

头部写入link标签之前,提前写好css文件,如下

h3{
    background-color: blueviolet;
}

css文件就是以.css为后缀的文件,内容直接写入内部样式里style标签里面的内容,用来修饰标签内容 .

效果如下,标签独占一整行,背景颜色填充!

4.标签选择器:

如上实例,每一个标签都可以当做标签选择器,写在内部外部样式中,美化生成的网页;

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>
    <style>
        .color{
            color: blueviolet;
        }
        .backgrd{
            background-color: brown;
        }
    </style>
</head>
<body>
    <h3>我爱北京天安门</h3>
    <h4 class="color">天安门上太阳升</h4>
    <p class="backgrd">你是我的眼</p>
</body>
</html>

如上代码块,类选择器通常以 . 开头,名字自己起,不能数字不能汉字

下方需要此效果的代码行,写入class=" ",引号写类选择器名字,不带 . ;

页面效果如下:

外部样式同样适用,这里为了简洁明了,全部在内部样式里体现;

6.id选择器 :

<!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>
        .color{
            color: blueviolet;
        }
        .backgrd{
            background-color: brown;
        }
        #fs{
            font-size: 80px;
        }
    </style>
</head>
<body>
    <h3 id="fs">我爱北京天安门</h3>
    <h4 class="color">天安门上太阳升</h4>
    <p class="backgrd">你是我的眼</p>
</body>
</html>

id选择器和类选择器一样,只不过它是唯一的,以#开头;

下方需要此效果的代码行,写入id=" ",引号写id选择器名字,不带 # ;

7.后代选择器:

<!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>
        ul a{
            /*a标签去除下划线的操作*/
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="">aa1</a>
    <ul>
        <a href="">aa2</a>
        <li><a href="">aa3</a></li>
        <a href="">aa4</a>
    </ul>
    <a href="">aa5</a>
</body>

</html>

如代码所示,一共有5个a标签,他们分别在无序列表的各个位置,此时style标签里写入的即为后代选择器,意思是ul 里面所有的 a 标签全部生效;如图!

8.子选择器:

<!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>
        ul>a{
            /*a标签去除下划线的操作*/
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="">aa1</a>
    <ul>
        <a href="">aa2</a>
        <li><a href="">aa3</a></li>
        <a href="">aa4</a>
    </ul>
    <a href="">aa5</a>
</body>

</html>

很简单,将style标签里的后代选择器改为ul > a,即可,意思是ul儿子全部生效,而aa3所在的a标签,属于ul孙子辈的,所以无改变;页面效果为:

9.直接相邻选择器:

<!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>
        ul+a{
            /*a标签去除下划线的操作*/
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="">aa1</a>
    <ul>
        <a href="">aa2</a>
        <li><a href="">aa3</a></li>
        <a href="">aa4</a>
    </ul>
    <a href="">aa5</a><br>
    <a href="">aa6</a>
</body>

</html>

将style标签里的子代选择器中的 > 改为 + ,例如:ul + a , 表示ul后面相邻的一个a标签生效

页面效果为:

10. 间接相邻选择器:

<!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>
        ul~a{
            /*a标签去除下划线的操作*/
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="">aa1</a>
    <ul>
        <a href="">aa2</a>
        <li><a href="">aa3</a></li>
        <a href="">aa4</a>
    </ul>
    <a href="">aa5</a><br>
    <a href="">aa6</a>
</body>

</html>

将style标签里的子代选择器中的 > 改为 ~ , 例如ul ~ a , 表示ul后面所有a标签都生效;页面效果为:

11.属性选择器:

<!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>
        input[type="text"]{
            border: 1px solid red;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="请输入账号">
    <input type="password" placeholder="请输入密码">
</body>

</html>

如上代码,之间用属性标签作为选择器,页面效果为:

12.公共选择器:

<!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>
        [type=text],
        [type=password]{
            background-color: yellow;
        }
        [type=text]{
            border: 2px solid red;
        }
        [type=password]{
            border: 2px solid blue;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="请输入账号">
    <input type="password" placeholder="请输入密码">
</body>

</html>

如上代码,两个属性有共用的背景色,所以将他们写在一起,用逗号隔开,

不同的地方再各自写在自己的选择其中,避免了代码的冗余; 效果如下

13.通配符选择器:

<!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>
       *{
           color: orange;
       }
    </style>
</head>

<body>
   <h1>这里是h1标签</h1>
   <h6>这里是h6标签</h6>
   <p>这里是p标签</p>
</body>

</html>

*{ // 所有标签都生效 } 如上代码所示,所有标签字体均为橙色,展示效果为:

14.伪类选择器:

什么是伪类?

伪类用于定义元素的特殊状态.

<!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>伪类选择器</title>
    <style>
    /*未访问的链接 鼠标没有点击过的字体颜色*/
    a:link{
        color: blueviolet;
    }
    /*已访问的链接 鼠标已经访问过的字体颜色*/
    a:visited{
        color:brown;
    }
    /*鼠标悬停的链接 鼠标移到超链接上显示的字体颜色*/
    a:hover{
        color: chartreuse;
    }
    /*已选择的链接 鼠标常按a标签的颜色*/
    a:active{
        color: cornflowerblue;
    }
    /*鼠标悬停的图片 图片阴影*/
    img:hover{
        cursor: pointer;
        /*阴影色*/
        box-shadow: 30px 30px 30px 30px red;
    }
    /*      鼠标悬浮样式
			这里我们要用cursor属性
			cursor 属性规定要显示的光标的类型（形状）。
			1、default 默认光标(通常是一个箭头)
			2、auto 默认。浏览器设置的光标。
			3、crosshair光标呈现为十字线。
			4、pointer 光标呈现为指示链接的指针(-只手)
			5、move 此光标指示某对象可被移动。
			6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。
			7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。
			8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。
			9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。
			10、se-resize此光标指示矩形框的边缘可被向 下及向右移动(南东)。
			11、sw-resize此光标指示矩形框的边缘可被向 下及向左移动(南西)。
			12、s-resize 此光标指示矩形框的边缘可被向下移动(北西)。
			13、w-resize 此光标指示矩形框的边缘可被向左移动(西)。
			14、text 此光标指示文本。
			15、wait 此光标指示程序正忙(通常是一只表或沙漏)。
			16、help 此光标指示可用的帮助(通常是一个问号或-个气球)。*/
            
            /*鼠标长按 图片显示*/
            img:active{
                /*百分之50的圆角*/
                border-radius: 50%;
            }
    </style>
</head>
<body>
    <a href="https://www.bilibili.com/">B站</a><br>
    <a href="https://pro.jd.com">京东</a><br>
    <a href="https://www.oracle.com/">甲骨文</a><br>
    <img src="./1.jpg" alt="" width="200px">
</body>
</html>

具体说明都在代码块里,详细阅读;

膀大腰圆你大哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

什么是CSS?CSS指层叠样式表(Cascading Style Sheets), 样式定义如何显示HTML元素,样式通常存储在样式表中,添加到HTML中,外部样式表可以极大提高工作效率,通常存储在CSS文件中;html在一个网页中负责的事情是宇哥页面的结构css(层叠样式表)在一个网页中主要负责了页面的数据样式.1.行内样式:<!DOCTYPE html><html lang="en"><head> <meta charset="
复制链接

扫一扫