CSS

最新推荐文章于 2022-08-17 23:05:20 发布

小丁_　

最新推荐文章于 2022-08-17 23:05:20 发布

阅读量136

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_68905946/article/details/124676488

版权

一、css概述

1 什么是css

CSS 指层叠样式表 (Cascading Style Sheets)

2 作用

html：搭建网页的结构，承载页面的数据
css:美化页面，修饰标签

~样式定义如何显示 HTML 元素

~样式通常存储在样式表中

~把样式添加到 HTML 中

~外部样式表可以极大提高工作效率

~外部样式表通常存储在 CSS 文件中

~多个样式定义可层叠为一

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

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

二、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>css行内样式</title>
</head>
<body>
    <h3 style="color: #00F000;">老妹儿01</h3>
    <h3 style="color: #00FF;">老妹儿02</h3>
    <h3 style="color: #00F000;">老妹儿03</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>css内部样式</title>
    <style>
        /* 内部样式 */
        h3{
            color: #00F000;
        }
    </style>
</head>
<body>
    <h3>老妹儿01</h3>
    <h3>老妹儿02</h3>
    <h3>老妹儿03</h3>
</body>
</html>

结果：

3 外部样式

把 CSS 代码保存在一个单独的文件中，文件的扩展名为 .css，然后在 HTML 页面中引入这个 CSS 文件。

h3{
    color: #00FF00;
}

HTML文件

<!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>css外部样式</title>
</head>
    <link rel="stylesheet" type="text/css" href="./css/03.css">
<body>
    <h3>老妹儿01</h3>
    <h3>老妹儿02</h3>
    <h3>老妹儿03</h3>
</body>
</html>

结果：

三、css选择器

1 css标签选择器

<!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>css标签选择器</title>
    <style>
        p{
            color: rgb(241, 24, 97);
            font-size: 66px;
        }
    </style>
</head>
<body>
    <p>出淤泥而不染</p>
    <p>濯清涟而不妖</p>
</body>
</html>

结果：

2 css类选择器

<!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>css类选择器</title>
    <style type="text/css">
        p{
            color: aqua;
        }
        .a{
            color: rgb(231, 53, 151);
            font-size: 60px;
        }
    </style>
</head>
<body>
    <p class="a">出淤泥而不染</p>
    <p class="a">濯清涟而不妖</p>
    <p>哈哈哈</p>
</body>
</html>

结果：

3 cssID类选择器

id在一个页面中不能重复，所有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>cssID类选择器</title>
    <style type="text/css">
        p{
            color: aqua;
        }
        .a{
            color: rgb(231, 53, 151);
            font-size: 60px;
        }
        #ddl{
            color: rgb(232, 10, 240);
        }
    </style>
</head>
<body>
    <p class="a">出淤泥而不染</p>
    <p class="a" id="ddl">濯清涟而不妖</p>
    <p>哈哈哈</p>
</body>
</html>

结果：

4 css后代选择器

<!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>css后代选择器</title>
    <style>
        ul a{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <a href="">22</a>
        <li><span><a href="">33</a></span></li>
        <li><span><a href="">44</a></span></li>
    </ul>
    <a href="">55</a>
</body>
</html>

结果：

5 css子代选择器

<!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>css子代选择器</title>
    <style>
        ul>a{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <a href="">22</a>
        <li><span><a href="">33</a></span></li>
        <li><span><a href="">44</a></span></li>
    </ul>
    <a href="">55</a>
</body>
</html>

结果;

6 css直接相邻选择器

<!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>css直接相邻选择器</title>
    <style>
        #two+p{
            color: rgb(8, 247, 60);
            background-color: rgb(240, 4, 181);
            font-size: 66px;
        }
    </style>
</head>
<body>
    <span>
        <p>老大</p>
        <p id="two">老二</p>
        <p>老三</p>
        <p>老四</p>
        <p>老五</p>
    </span>
</body>
</html>

结果：

7 css间接相邻选择器

<!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>css间接相邻选择器</title>
    <style>
        #two~p{
            color: rgb(8, 247, 60);
            background-color: rgb(240, 4, 181);
            font-size: 66px;
        }
    </style>
</head>
<body>
    <span>
        <p>老大</p>
        <p id="two">老二</p>
        <p>老三</p>
        <p>老四</p>
        <p>老五</p>
    </span>
</body>
</html>

结果：

8 css属性选择器

<!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>css属性选择器</title>
    <style>
        input[type=text]{
            width: 300px;
            height: 100px;
            border-width: 30px;
            border-radius: 15%;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="" value="" placeholder="请输入账号" />
	<input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>
</html>

结果：

9 css公共选择器

<!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>css公共选择器</title>
    <style>
        [type=text],
        [type=password] {
            width: 300px;
            height: 50px;
        }
        [type=text]{
            border: 10px solid #123456;
        }
        [type=password] {
            border: 10px solid #654321;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="" value="" placeholder="请输入账号" />
	<input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>
</html>

结果：

10 css通配符选择器

<!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>css通配符选择器</title>
    <style>
        * {
            color: #f353a3;
            background-color: beige;
            font-size: 66px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">超链接</a>
        </li>
    </ul>
    <p>DD</p>
    <span>DL</span>
</body>
</html>

结果：

11 css伪类选择器

什么是伪类？

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

<!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>css伪类选择器</title>
    <style>
        a {
            text-decoration: none;
            font-size: 66px;
        }

         /* 未访问的链接 */
        a:link {
            color: rgb(247, 37, 37);
        }

        /* 已访问的链接 */
        a:visited {
            color: aqua;
        }

         /* 鼠标悬停链接 */
        a:hover {
           color: rgb(10, 240, 86);
        }

        /* 已选择的链接 */
        a:active {
            color: rgb(222, 8, 250);
        }

        img:hover {
            width: 600px;
            cursor: pointer;
            box-shadow: 30px 30px 30px 30px #f70893;
        }
        
        img:active {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">哈哈哈</a>
    <img src="./img/1.png" width="300px" title="点击进入">
    <a href="https://www.qq.com">嘿嘿嘿</a>
</body>
</html>
</body>
</html>

结果：

鼠标悬浮样式

这里我们要用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 此光标指示可用的帮助(通常是一个问号或一个气球)。

12 css伪对象选择器

伪对象选择器

伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号来定义。

伪类和伪对象（元素）的区别

伪类一般反映无法在CSS 中轻松或者可靠检测到的某个元素的状态或者属性；

伪元素表示DOM 外部的某种文档结构

常用伪元素

1.E:before/E::before

2.E:after/E::after

伪元素是在元素内容的前面或后面定义的，必须要添加content:""这个属性，不然伪元素无法定义成功。

p::after{ content:"在P 标签元素内容前加了内容"; color: red;}

<!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>css伪对象选择器</title>
    <style>
         ul > li{
            list-style: none;
        }
        input:checked+span{
            background-color: #9ee276;
        }
        input:checked+span::after{
            background-color: #0bd5f0;
            content: '哈哈哈';
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <fieldset>
            <legend>嘿嘿嘿</legend>
            <ul>
                <li><label><input type="radio" name="colour-grounp" value="0"><span>蓝色</span></label></li>
                <li><label><input type="radio" name="colour-grounp" value="0"><span>红色</span></label></li>
                <li><label><input type="radio" name="colour-grounp" value="0"><span>绿色</span></label></li>
            </ul>
        </fieldset>
    </form>
</body>
</html>

结果;