【HTML（2）css详解】

goldm68

已于 2023-03-18 21:58:57 修改

阅读量140

点赞数

文章标签： css html 前端 Powered by 金山文档

于 2023-01-03 20:44:43 首次发布

本文链接：https://blog.csdn.net/goldm68/article/details/128531435

版权

这篇文章介绍了CSS的基本概念，包括层叠样式表的作用和使用方法，如行内样式、内部样式和外部样式的优缺点。接着详细阐述了CSS选择器，包括选择器的优先级、不同类型的简单和复杂选择器，以及伪类选择器的用法。此外，还提到了字体样式、文本样式和背景样式的设置。

摘要由CSDN通过智能技术生成

1、css简介

css介绍：CSS 指层叠样式表 (Cascading Style Sheets)，定义如何显示 HTML 元素的计算机语言

css作用：可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。让页面更加美观

使用方法：1. 直接写在标签style属性；2. 写在style 标签内；3. 使用外部 .css 文件。

2、css选择器

2.1、作用：指定元素添加样式，精准且效率高

行内样式 style=“” 样式属性

优点：书写简单，权重高

缺点：没有实现样式结构分离，只能控制一个标签

内部样式，写在head标签内，style标签里面，通过样式选择器书写，叫嵌入式样式

优点：结构分离

缺点：没有彻底实现结构分离，只能控制当前页面

外部样式 rel="stylesheet" 表示引用的是css样式表

写在head标签内和标签外，link标签引入， href里面写的是文件路径

优点：完全实现了结构分离，可以控制整个站点

缺点：需要引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    2、内部样式
写在head标签内，style标签里面，通过样式选择器书写，叫嵌入式样式

优点：结构分离
缺点：没有彻底实现结构分离，只能控制当前页面
-->
    <!-- <link rel="stylesheet" href="css基本引用.css"> -->
    <style>
        p {
            color: #3366bb;
        }
    </style>
</head>
<!--3、外部样式 rel="stylesheet" 表示引用的是css样式表
写在head标签内和标签外，link标签引入， href里面写的是文件路径
优点：完全实现了结构分离，可以控制整个站点
缺点：需要引入
-->
<link rel="stylesheet" href="css外部样式.css">

<!--优先级：行内样式>内部样式=外部样式（就近）-->
<body>
<!--1、行内样式  style  样式属性
优点：书写简单，权重高
缺点：没有实现样式结构分离，只能控制一个标签-->
<p style="color:deeppink">这是内部---bady css引入样式方式</p>
<p>这是外部 css引入样式方式</p>
</body>
</html>

2.2、优先级：选择器有权重差别，当多个选择器同时选择一个标签引发冲突时，需要看优先级

id选择器>class选择器>标签选择器

内部==外部，权重相等，就近原则

2.3、选择器分类：

2.3.1、简单选择器：

id选择器：#+id名 {}

class选择器：.+class名 {}

标签选择器：标签 {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 简单选择器：id选择器  class选择器  标签选择器*/
        /*优先级： id选择器>class选择器>标签选择器*/
        /*标签选择器*/
        p {
            color: #006d21;
        }

    /*    每个元素都具有class属性，至于属性值是自定义的*/
    /*   class选择器  ，通过class去进行中, .作为标识符*/
        .box1 {
            color: darkred;
        }

    /*id标签器 #作为标识  身份证，是唯一的*/
        #box {
            color: purple;
        }

        #box2 {
            color: pink;
        }
    </style>
</head>
<body>
<p>这是css选择器---标签</p>
<p class="box1" id="box2">这是css选择器---class=box1 id=box2</p>
<p>这是css选择器</p>
<p id="box">这是css选择器---id=box</p>

<span class="box1">这是css选择器---class=box1</span>
<p>这是css选择器---标签/p>
</body>
</html>

2.3.2、复杂选择器：

子代选择器：父标签 > 子标签 {} 多层

后代选择器：父标签子标签 {} 多层

兄弟选择器：兄标签 ~ 弟标签 {} 多个弟

相邻选择器：楼上标签 +楼下标签{} 一个邻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--    层次选择器 也叫做 复杂选择器-->
        <style>
        /*  子代选择器*/
            div > p {
                color: red;
            }

        /*   后代选择器*/
            div span {
                color: greenyellow;
            }

        /*    兄弟选择器*/
            .p2 ~ p {
                color: blue;
            }

        /*   相邻选择器  相邻的一个*/
            .p2 + p {
                color: purple;
            }

        /*    属性选择器 针对name属性
        可以指定name属性值 name=sp*/
            span[name=sp] {
                color: pink;
            }

        /*    群组选择器*/
            div, p, .p2 {
                color: #dcb444;
            }

        /*    全选选择器*/
            * {
                font-size: 20px;
            }
        </style>

</head>
<body>
<div>
    <p>这是个复杂选择器</p>
    <p class="p2">这是个复杂选择器</p>
    <p>这是个复杂选择器</p>
    <p>这是个复杂选择器</p>
    <p>
        <span>我是嵌套的哦</span>
    </p>
    <span name="sp">我是单独的span</span><br>
    <span name="sp1">我是单独的span</span><br>
    <span>我是最后一个span</span>
</div>
</body>
</html>

2.3.3、伪类选择器：

link：未访问；hover：鼠标悬停；

active：鼠标点击；visited：鼠标点击后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 未访问时*/
        a:link {
            color: red;
        }

    /*    鼠标悬浮时*/
        a:hover {
            color: blue;
        }

    /*    鼠标点击时*/
        a:active {
            color: #dcb444;
        }

    /*    鼠标访问后*/
        a:visited {
            color: grey;
        }

        /*id个数不同， id优先
        id个数相同 class优先
        id，class， 标签*/
        #boss span {
            color: blue;
            background-color: powderblue;
            
        }

        #boss .box1 span {
            color: blanchedalmond;
        }
    </style>
</head>
<body>
<a href="#">这是一个伪类选择器</a>

<div class="box" id="boss">
    <div class="box1">
        <span>优先级</span>
    </div>
</div>
</body>
</html>

3、字体样式：

4、文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
        /*    字体样式*/
        /*    字体类型*/
            font-family: 幼圆;
            

        /*    字体粗细 300-700(bold)*/
            font-weight: normal;

        /*    字体大小 谷歌浏览器默认最小字体不能12px*/
            font-size: 36px;

        /*    字体样式 italic 斜体*/
            font-style: italic;

        /*    颜色*/
            color: hotpink;

        /*    字体大小写  针对英文*/
        /*    font-variant: all-small-caps;  全部大写*/
        /*    font-variant: all-petite-caps; 短身大写*/
        /*    font-variant: full-width; 对英文字母加粗*/

        /*    复合样式*/
        /*    顺序：字体样式 字体大小写 字体粗细 字体大小 字体类型*/
            font: italic bold 24px "幼圆";

        /*    文本样式*/
        /*    对齐方式 字体居中  center*/
        /*    text-align: center;*/

        /*    缩进两个中文长度 em相当于中文字符的宽度的倍数*/
            text-indent: 2em;

        /*    下划线*/
        /*    text-decoration: underline;*/

        /*    删除线*/
            text-decoration: line-through;

        /*    字体行高*/
            line-height: 40px;

        /*    词距 因为程序分不清，所以程序以空格作为标识*/
            word-spacing: 40px;
        }

        a {
        /*    取消下划线*/
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="#">a标签被取消了下划线</a>

<p>这是字体样式设置了</p>
<p>这是字体样 式设置了</p>
<p id="p3">hello Pehuge</p>
</body>
</html>

5、背景样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            height: 150px;
        /*    背景颜色 transparent 透明*/
        /*    background-color: #dcb444;*/

        /*    背景图片*/
            background-image: url("https://cc.fp.ps.netease.com/file/62a74b3400722e4011bb9573BtVghvND04");

        /*    此时图片没有得到完全加载：
        1、div的宽高太小了，不足以加载出来，把div变大一点；
        2、去设置一下图片的大小，对图片进行缩放*/

        /*    背景图片大小*/
            background-size: 100px 100px;

        /*    取消平铺 no-repeat*/
        /*    background-repeat: repeat-x;*/

        /*    背景定位 center 居中*/
            background-position: center;


        /*    复合样式*/
        /*    背景颜色 背景图片 是否需要平铺 背景定位/背景大小*/
            background: transparent url(
                "https://cc.fp.ps.netease.com/file/62a74b3400722e4011bb9573BtVghvND04") 
                repeat center/150px 70%;

        /*    边框*/
            border: red 1px solid;
        /*    边框弧度*/
        /*    border-radius: 10px;*/
            border-radius: 50% ;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>