CSS基础教程：样式、选择器与应用场景-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_74417484/article/details/130546133

一.css简单介绍
css样式：层样叠式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

作用：CSS就是网页的化妆师，可以让页面变得更加美观。

使用方法：
1.行内样式——直接写在标签
2.内部样式——写在style 标签内
3.外部样式——引入外部.css 文件

详细看代码即注释：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    style标签-->
<!--    将style标签写在head头部；-->
    <style>
        .opt1{
            color: gray;
        }
    </style>

<!--    外部 .css 文件引入-->
<!--    引入css——在head里写link标签，属性rel写stylesheet，href写相对路径；-->
    <link rel="stylesheet" href="选择器介绍.css">
</head>
<body>
<p style="color: skyblue">写在标签内</p>
<p class="opt1">写在style标签里</p>
<p class="opt2">外部.css样式</p>
</body>

优先级（离元素最近的优先级最高）：行内样式最高，另外两个看谁写在前面谁就低级一点（因为代码是从上往下运行）

二.css选择器

选择器作用：给指定的元素设置样式，能够更加精准

选择器种类：有标签选择器、ID选择器、class选择器、兄弟选择器、后代/子代选择器、相邻选择器、伪类选择器

简单选择器：有标签选择器、ID选择器、class选择器

标签选择器
标签名加大括号，里面以键值对形式写，如p{color：green；}
id选择器
标签属性里写上id属性并且赋值（id值是唯一的），标识符为 #
class选择器
在标签里写class属性并且赋值，标识符为 .

优先级（越精确优先级越高）：id选择器>class选择器>标签选择器

层次选择器：有兄弟选择器、后代/子代选择器、相邻选择器

兄弟选择器：往下的兄弟标签，标识符为 ~ ，同时要使用class选择器
后代选择器：包括了所有后代，标识符为空格
子代选择器：针对父子关系，标识符为 >
（对于子代选择器而言，子代会继承父代的颜色,子代继承父代的高度和宽度时可以直接用百分比）
相邻选择器：给下一个标签加样式，标识符为 + ，同时要使用class选择器

还有群组选择器：混合几种选择器一起使用；中间用逗号隔开

使用形式看代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        div {
            background: rgba(0,0,0,0.2);
        }
        /*id选择器*/
        #first{
            color: skyblue;
        }
        /*class选择器*/
        .opt1{
            color: green;
        }
        /*兄弟选择器*/
        .opt1~ul{
            color: red;
        }

        /*后代选择器*/
        .opt2 span{
            color: brown;
        }
        /*子代选择器*/
        .p3>span{
            color: purple;
        }
        /*相邻选择器*/
        .ul1+span{
            color: yellow;
        }
        /*群组选择器*/
        .box,.last{
            background-color: black;
            color: pink;
        }
    </style>
</head>
<body>
<div>
    <p id="first">
        <span>长相思长相忆，</span>
        <span>短相思无穷极</span>
    </p>
    <p class="opt1">经过class选择器后字体变为绿色</p>
    <ul class="ul1">
        <li>我是ul子代</li>
        <li>经过兄弟选择器我变为了红色，子代li继承了父代ul的颜色</li>
    </ul>
    <span>我是ul邻居，经过相邻选择器变成了黄色</span>
    <p class="opt2">
        <span>我是p的后代，</span><span>经过后代选择器我变成了棕色</span>
    </p>
    <p class="p3">
        <span>我是p3的后代，</span><span>经过后代选择器我变成了紫色</span>
    </p>

</div>
<div class="box">
    <p class="last">通过群组选择器我们变成了粉色</p>
    <p class="last">通过群组选择器我们变成了粉色</p>
    <p class="last">通过群组选择器我们变成了粉色</p>
    <p class="last">通过群组选择器我们变成了粉色</p>
</div>
</body>
</html>

运行效果：

还有一个比较常用的——伪类选择器；
使用场景描述：当鼠标悬浮时会出现样式，当鼠标点击时会有效果，当访问后是什么状态；
关键字是：（冒号）

（超链接）未点击时状态——link（href内要有值，href是写跳转的网址，链接）
鼠标悬浮时状态——hover
鼠标点击时状态——active
点击后状态——visited

代码（因为这主要是一个动态过程，自己运行看效果吧）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: skyblue;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: black;
        }
        a:visited{
            color: gray;
        }
    </style>
</head>
<body>
<a href="#">伪类选择器</a>
</body>
</html>

三.css常用样式

css字体
字体大小——font-side
字体类型——font-family
字体粗细——font-weight(bold为加粗，加数值也行)
字体样式——font-style（italic为斜体）
字母小写变大写，大写加大——font-variant：small-caps；
复合样式——font：
（顺序：字体样式，字体粗细，字体大小，字体类型，后两个一定要写，空格隔开）

代码样例（其中的详细信息也看代码注释）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .p1{
        font-size: 30px;
    }
    .p2{
        font-family: 华文行楷;
    }
    .p3{
        font-weight: bold;
    }
    .p4{
        font-style: oblique;
    }
    .p5{
        font-variant: small-caps;
    }
    .p6{
        font:italic bold 20px 华文行楷;
     }
    </style>
</head>
<body>
<div>
    <p class="p1">font-size 字体大小  单位 px rem em %
    <ul>
        <li>px：谷歌浏览器默认字体单位，默认大小16px</li>
        <li>rem：相对于html（根标签）的字体大小</li>
        <li>em：等于父级的字体尺寸</li>
        <li>%：相对于父容器中字体的%调整</li>
    </ul></p><br>
    <p class="p2">font-family 更改字体，字体可以两个或以上备选，用逗号分隔即可</p>
    <p class="p3">font-weight 更改字体粗细
    <ul>
        <li>normal:默认字体</li>
        <li>lighter：较细</li>
        <li>bold：加粗</li>
        <li>bolder：更粗</li>
    </ul>
</p>
    <p class="p4">font-style 更改字体类型
    <ul>
        <li>normal:默认文字正常</li>
        <li>italic：文字斜体（属性）</li>
        <li>oblique：文字斜体</li>
    </ul>
</p>
    <p class="p5">i AM so SAd        EmO</p>
    <p class="p6">抽刀断水水更流，举杯消愁愁更愁</p>
</div>
</body>
</html>

运行效果：
在这里插入图片描述

css文本
文本类型主要是对于大段文本类型来进行样式设置

对齐方式——text-align
首行缩进——text-indent
文本线——text-decoration
字距——letter-spacing
词距——word-spacing
行高——line-height （单行文本的垂直居中：行高=高度）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        .box {
            width: 500px;
            /*background-color: rgba(0,0,0,0.2);*/
            /*控制换行*/
            white-space: nowrap; /*normal 正常换行  nowrap 不换行*/
            /*超出隐藏*/
            overflow: hidden;
            /*出现省略号*/
            text-overflow: ellipsis;
            /*-o-text-overflow: ellipsis;*/

        }

        .p1 {
            /*对齐方式*/
            text-align: center; /*水平居中*/
        }

        .p2 {
            /*首行缩进*/
            text-indent: 2em;
        }

        .p3 {
            /*文本线*/
            text-decoration: underline;
        }

        .p4 {
            /*字距*/
            letter-spacing: 2px;
        }

        .p5 {
            /*词距*/
            word-spacing: 2px;
        }

        .p6 {
            /*行高*/
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="box">
    <p class="p1">消极</p>
    <p class="p2">厌世</p>
    <p class="p3">十年生死两茫茫</p>
    <p class="p4">不思量，自难忘</p>
    <p class="p5">今人不见古时月</p>
    <p class="p6">今月曾经照古人</p>
</div>

<div class="box">
    <p>
        四时有序。春归尽，大自然的色调慢慢由浅变深；夏悄至，萌萌新绿已密布成荫……春的律动回响，延伸出夏的韵，昼与夜继续此消彼长，冷与暖在数月的拉锯中离分……初夏是四季的青春，从鲜衣怒马，披荆斩棘，策马狂奔，最终看尽烈焰繁花，去留无意，乐尽天真……
        立夏快乐</p>
</div>
</body>
</html>

效果：
在这里插入图片描述

css背景
背景颜色——background-color
背景图片——background-image
背景铺盖——background-repeat
背景大小——background-size
背景定位——background-position
复合样式——background（背景色，背景图，要不要平铺，背景定位/大小；）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        /*补充：全选选择器  关键字 * 作用 消除浏览器自带样式*/
        *{
            margin: 0;
            padding: 0;
        }
        .box1 {
            
            width: 200px;
            height: 200px;
            /*英文表示颜色*/
            /*background-color: skyblue;*/
            background: skyblue url("../../weather/qing.png") no-repeat center;
        }

        .box2 {
            width: 200px;
            height: 200px;
            /*十六进制表示颜色*/
            background-color: #888888;
        }

        .box3 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-image: url("../../weather/lieri.png")
        }

        .box4 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-image: url("../../weather/lieri.png");
            background-repeat: no-repeat;
            background-size: 50% 50%;
            background-position: center;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>