【css】基础（一）-EW帮帮网

本专栏内容为：前端专栏记录学习前端，分为若干个子专栏，html js css vue等

💓博主csdn个人主页：小小unicorn
⏩专栏分类：css专栏
🚚代码仓库：小小unicorn的代码仓库🚚
🌹🌹🌹关注我带你学习编程知识

什么是css

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中
*：也称级联样式表。

CSS演示，一个html页面可以有不同的效果：
在这里插入图片描述

CSS语法：

CSS 规则集（rule-set）由选择器和声明块组成：
在这里插入图片描述

选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个CSS属性名称和一个值，以冒号分隔。
多条CSS声明用分号分隔，声明块用花括号括起来。

举个例子：

在此例中，所有 <p>元素都将居中对齐，并带有红色文本颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
    <style>
        body{
            background-color: lightblue;
        }
        h1{
            color:green;
            text-align: center;
        }
        p{
            font-family: Verdana;
            color:red;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>我的第一个CSS实例</h1>
    <p>在此例子中,所有p元素都将居中对齐,并带有红色文本颜色</p>
    <p>这是一个段落</p>
</body>
</html>

在这里插入图片描述
例子解释：

p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：
）。
color 是属性，red 是属性值
text-align 是属性，center 是属性值

注意：

CSS要写到style标签中
style标签可以放到页面任意位置，一般放到head标签内
css使用/**/作为注释（使用ctrl+/快速切换）

CSS使用

有三种插入样式表的方法：

外部 CSS
内部 CSS
行内 CSS

内部CSS

如果一张HTML页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的<style>元素中进行定义。

示例：

内部样式在 HTML 页面的 <head> 部分内的<style>元素中进行定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: linen;
        }
        h1{
            color:maroon;
            margin-left: 40px;
        }
    </style>
</head>
<body>
    <h1>这是一个内部引入</h1>
    <p>这是一个段落</p>
</body>
</html>

在这里插入图片描述

行内CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: linen;
        }
        h1{
            color:maroon;
            margin-left: 40px;
        }
    </style>
</head>
<body>
    <h1>这是一个内部引入</h1>
    <p>这是一个段落</p>
    <h1 style="color: blue;text-align: left;">这是一个行内引入</h1>
    <p style="color: red;text-align: left;">这是一个段落</p>
</body>
</html>

在这里插入图片描述

外部CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的<link>元素内包含对外部样式表文件的引用。

而这个也是我们开发中最常用的方式

1.创建一个css文件
2.使用link标签引入css

<link rel="stylesheet" href="[css路径]">

创建demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>上帝为你关上一扇门，然后去睡觉了</div>
</body>
</html>

创建style.css

div{
    color:aqua;
    font-size: 80px;
}

在这里插入图片描述

选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML元素。

我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

此页会讲解最基本的 CSS 选择器。

CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

实例

在这里，页面上的所有<p>元素都将居中对齐，并带有红色文本颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            text-align: center;
            color:red;
        }
    </style>
</head>
<body>
    <p>每个段落都会受影响</p>
    <p>我也是</p>
</body>
</html>

在这里插入图片描述

id选择器

id 选择器使用HTML元素的id属性来选择特定元素。

元素的id在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

实例
这条CSS规则将应用于id="para1"的 HTML 元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #para1{
        text-align: center;
        color:red;
       }
    </style>
</head>
<body>
    <p id="para1">你好世界</p>
    <p>本段不受影响</p>
</body>
</html>

在这里插入图片描述
注意：id 名称不能以数字开头。

类选择器

类选择器选择有特定class属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例
在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #para1{
        text-align: center;
        color:red;
       }
       .center{
        text-align: center;
        color:red;
       }
    </style>
</head>
<body>
    <p id="para1">你好世界</p>
    <p>本段不受影响</p>
    <h1 class="center">这是一个类选择器</h1>
    <p class="center">居中的红色段落</p>
</body>
</html>

在这里插入图片描述
当然我们还可以指定只有特定的HTML元素会受类的影响。
在这个例子中，只有具有class="center"的<p>元素会居中对齐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #para1{
        text-align: center;
        color:red;
       }
       .center{
        text-align: center;
        color:red;
       }
       p.center{
        text-align: left;
        color:black;
       }
    </style>
</head>
<body>
    <p id="para1">你好世界</p>
    <p>本段不受影响</p>
    <h1 class="center">这是一个类选择器</h1>
    <p class="center">居中的红色段落</p>
</body>
</html>

在这里插入图片描述
HTML 元素也可以引用多个类。
在这个例子中，<p> 元素将根据 class="center" 和 class="large" 进行样式设置：

<p class="center large">这个段落引用两个类。</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #para1{
        text-align: center;
        color:red;
       }
       .center{
        text-align: center;
        color:red;
       }
       p.center{
        text-align: center;
        color:black;
       }
       p.lage{
        font-size: 300%;
       }
    </style>
</head>
<body>
    <p id="para1">你好世界</p>
    <p>本段不受影响</p>
    <h1 class="center">这是一个类选择器</h1>
    <p class="center">居中的红色段落</p>
    <p class="center lage">本段是居中并且使用大号字体的</p>
</body>
</html>

在这里插入图片描述
注意：类名不能以数字开头！

CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

下面的 CSS 规则会影响页面上的每个HTML元素：

* {
  text-align: center;
  color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            text-align: center;
            color: blue;
        }
       #para1{
        text-align: center;
        color:red;
       }
       .center{
        text-align: center;
        color:red;
       }
       p.center{
        text-align: center;
        color:black;
       }
       p.lage{
        font-size: 300%;
       }
    </style>
</head>
<body>
    <p id="para1">你好世界</p>
    <h1>Hello world!</h1>

    <p>页面上的每个元素都会受到样式的影响。</p>
    <p >我也是！</p>
    <p>还有我！</p>
    <h1 class="center">这是一个类选择器</h1>
    <p class="center">居中的红色段落</p>
    <p class="center lage">本段是居中并且使用大号字体的</p>
</body>
</html>

在这里插入图片描述

分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

最好对选择器进行分组，以最大程度地缩减代码。

如需对选择器进行分组，请用逗号来分隔每个选择器。

实例：
在这个例子中，我们对上述代码中的选择器进行分组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
       h1,h2,p{
        text-align: center;
        color:red;
        font-size: 300%;
       }
    </style>
</head>
<body>
    <h1>这是一个分组选择器</h1>
    <h2>更小的标题</h2>
    <p>这是一个段落</p>
</body>
</html>

在这里插入图片描述

基础选择器小结：

后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素.

元素1 元素2 {样式声明}

元素 1 和元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

代码示例1: 把 ol 中的 li 修改颜色, 不影响 ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
       h1,h2,p{
        text-align: center;
        color:red;
        font-size: 300%;
       }
       ol li{
        color: green;
       }
    </style>
</head>
<body>
    <h1>这是一个分组选择器</h1>
    <h2>更小的标题</h2>
    <p>这是一个段落</p>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>
</body>
</html>

在这里插入图片描述
代码示例2: 元素 2 不一定非是儿子, 也可以是孙子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
       h1,h2,p{
        text-align: center;
        color:red;
        font-size: 300%;
       }
       ol li{
        color: green;
       }
       ul a{
        color:yellow;
       }
    </style>
</head>
<body>
    <h1>这是一个分组选择器</h1>
    <h2>更小的标题</h2>
    <p>这是一个段落</p>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>还可以是孙子</li>
        <li><a href="#">mmmm</a></li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>
</body>
</html>

在这里插入图片描述
代码示例3: 可以是任意基础选择器的组合. (包括类选择器, id 选择器)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
       h1,h2,p{
        text-align: center;
        color:red;
        font-size: 300%;
       }
       ol li{
        color: green;
       }
       ul a{
        color:yellow;
       }
       .one li a{
        color: red;

       }
    </style>
</head>
<body>
    <h1>这是一个分组选择器</h1>
    <h2>更小的标题</h2>
    <p>这是一个段落</p>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>还可以是孙子</li>
        <li><a href="#">mmmm</a></li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>
    
    <ol class="one">
        <li>可以是基础选择器的组合</li>
        <li>ddd</li>
        <li>eee</li>
        <li><a href="#">fff</a></li>
        <li><a href="#">fff</a></li>
        <li><a href="#">fff</a></li>
    </ol>
</body>
</html>

在这里插入图片描述

子选择器

和后代选择器类似, 但是只能选择子标签.

元素1>元素2 { 样式声明 }

使用大于号分割
只选亲儿子, 不选孙子元素

   <div class="two">
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>

后代选择器的写法, 会把链接1 和 2 都选中

.two a{
        color: aquamarine;
       }

在这里插入图片描述
子选择器的写法, 只选链接 1

       .two>a{
        color: aquamarine;
       }

在这里插入图片描述
练习1：

把以下代码中的 “小猫” 改成红色

    <div class="cat">
        <ul>
        <li>练习1</li>
        <li><a href="#">小猫</a></li>
        <li><a href="#">小猫</a></li>
        <li><a href="#">小猫</a></li>
        </ul>
    </div>

css：

       /* 练习1 */
       .cat a{
        color:red;
       }

在这里插入图片描述

把以下代码中的 “小猫” 改成红色

    <div class="cat">
        <li>练习2</li>
        <a href="#">小猫</a>
        <ul>
        <li><a href="#">小狗</a></li>
        <li><a href="#">小狗</a></li>
        </ul>
    </div>

css:

       .cat>a{
        color: red;
       }

在这里插入图片描述

伪类选择器

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

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

伪类的语法：

selector:pseudo-class {
  property: value;
}

锚伪类

链接能够以不同的方式显示

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问的链接 */
        a:link{
            color:black;
            /* 去掉链接中的下划线 */
            text-decoration: none;
        }
        /* 已访问的链接 */
        a:visited{
            color:red;
        }
        /* 鼠标悬停链接 */
        a:hover{
            color:aqua;
        }
        /* 已经选择的链接 */
        a:active{
            color:green;
        }

    </style>
</head>
<body>
    <h1>CSS 链接</h1>
    <p><b><a href="https://blog.csdn.net/weixin_72066135?spm=1011.2124.3001.5343" target="_blank">这是一个链接</a></b></p>
    <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
    <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
</body>
</html>

在这里插入图片描述

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致active失效. 记忆规则 “绿化”
浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.
实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多.

伪类和 CSS 类

伪类可以与CSS类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

a.highlight:hover {
  color: #ff0000;
}

悬停在 `<div>` 上

在

元素上使用 :hover 伪类的实例：

div:hover {
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问的链接 */
        a:link{
            color:black;
            /* 去掉链接中的下划线 */
            text-decoration: none;
        }
        /* 已访问的链接 */
        a:visited{
            color:red;
        }
        /* 鼠标悬停链接 */
        a:hover{
            color:aqua;
        }
        /* 已经选择的链接 */
        a:active{
            color:green;
        }
        div{
            background-color: green;
            color: white;
            padding: 25px;
            text-align: center;
        }
        div:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>CSS 链接</h1>
    <p><b><a href="https://blog.csdn.net/weixin_72066135?spm=1011.2124.3001.5343" target="_blank">这是一个链接</a></b></p>
    <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
    <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
    <p>请把鼠标移动到最下面的div元素来改变其背景色</p>
    <div>把鼠标移到我上面</div>
</body>
</html>

在这里插入图片描述

简单的工具提示悬停

把鼠标悬停到 <div> 元素以显示<p>元素（类似工具提示的效果）：

悬停到我上面来显示<p>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问的链接 */
        a:link{
            color:black;
            /* 去掉链接中的下划线 */
            text-decoration: none;
        }
        /* 已访问的链接 */
        a:visited{
            color:red;
        }
        /* 鼠标悬停链接 */
        a:hover{
            color:aqua;
        }
        /* 已经选择的链接 */
        a:active{
            color:green;
        }
        /* div{
            background-color: green;
            color: white;
            padding: 25px;
            text-align: center;
        }
        div:hover{
            background-color: blue;
        } */
        p{
            display: none;
            background-color: yellow;
            padding: 20px;
        }
        div:hover p{
            display: block;

        }
    </style>
</head>
<body>
    <h1>CSS 链接</h1>
    <p><b><a href="https://blog.csdn.net/weixin_72066135?spm=1011.2124.3001.5343" target="_blank">这是一个链接</a></b></p>
    <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
    <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
    <!-- <p>请把鼠标移动到最下面的div元素来改变其背景色</p>
    <div>把鼠标移到我上面</div> -->
    <div>请把鼠标移动到我上面来显示p元素
        <p>哈哈！我在这里</p>
    </div>
</body>
</html>

在这里插入图片描述

force 伪类选择器

选取获取焦点的 input 表单元素.

    <div class="three">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>

css:

        /* 此时被选中的表单的字体就会变成红色. */
        .three>input:focus {
            color: red;
        }

在这里插入图片描述

为超链接添加不同样式

本例演示如何向超链接添加其他样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a.one:link {color:#ff0000;}
        a.one:visited {color:#0000ff;}
        a.one:hover {color:#ffcc00;}
        
        a.two:link {color:#ff0000;}
        a.two:visited {color:#0000ff;}
        a.two:hover {font-size:150%;}
        
        a.three:link {color:#ff0000;}
        a.three:visited {color:#0000ff;}
        a.three:hover {background:#66ff66;}
        
        a.four:link {color:#ff0000;}
        a.four:visited {color:#0000ff;}
        a.four:hover {font-family:monospace;}
        
        a.five:link {color:#ff0000;text-decoration:none;}
        a.five:visited {color:#0000ff;text-decoration:none;}
        a.five:hover {text-decoration:underline;}
        </style>
</head>
<body>
    <p>请把鼠标移到链接上并观察样式的变化：</p>

    <p><b><a class="one" href="/index.html" target="_blank">此链接改变颜色</a></b></p>
    <p><b><a class="two" href="/index.html" target="_blank">此链接改变字体大小</a></b></p>
    <p><b><a class="three" href="/index.html" target="_blank">此链接改变背景色</a></b></p>
    <p><b><a class="four" href="/index.html" target="_blank">此链接改变字体族</a></b></p>
    <p><b><a class="five" href="/index.html" target="_blank">此链接改变文本装饰</a></b></p>
</body>
</html>

在这里插入图片描述

小结

在这里插入图片描述

【css】基础（一）

目录

什么是css

CSS语法：

CSS使用

内部CSS

行内CSS

外部CSS

选择器

CSS 元素选择器

id选择器

类选择器

CSS 通用选择器

分组选择器

后代选择器

子选择器

伪类选择器

锚伪类

伪类和 CSS 类

悬停在 `<div>` 上

简单的工具提示悬停

force 伪类选择器

为超链接添加不同样式

小结

网站公告

今日签到

热门文章

最新发布

【css】基础（一）

目录

什么是css

CSS语法：

CSS使用

内部CSS

行内CSS

外部CSS

选择器

CSS 元素选择器

id选择器

类选择器

CSS 通用选择器

分组选择器

后代选择器

子选择器

伪类选择器

锚伪类

伪类和 CSS 类

悬停在 <div> 上

简单的工具提示悬停

force 伪类选择器

为超链接添加不同样式

小结

网站公告

今日签到

热门文章

最新发布

悬停在 `<div>` 上