前端----CSS层叠样式表

最新推荐文章于 2024-07-29 19:56:40 发布

ZHBlog_

最新推荐文章于 2024-07-29 19:56:40 发布

阅读量1k

点赞数

分类专栏：前端文章标签： css3 定位 css中解决父级边框塌陷的问题 css选择器

本文链接：https://blog.youkuaiyun.com/weixin_42492089/article/details/103661160

版权

本文详细介绍了CSS的基础知识，包括选择器（标签、类、ID和通配符选择器）、高级选择器（后代、子、相邻兄弟和通用兄弟选择器）、网页美化（字体、文本、阴影、超链接伪类等）、盒子模型、浮动和定位（相对、绝对、固定定位及解决父级边框塌陷问题）。通过实例解析，帮助读者深入理解CSS在网页设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS简介

1、CSS----用于网页美化

CSS是层叠样式表（Cascading Style Sheets） 的简称，有时我们也叫CSS样式表或级联样式表。CSS主要用于设置HTML页面的文本内容（字体、大小、形状等）、图片的外形以及版面布局和外观显示样式。

CSS的最大价值： 由HTML去做页面的结构呈现，CSS去做样式的优化。即结构（HTML）和样式（CSS）相分离。

2、CSS的语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

二、CSS的基础选择器

1、选择器的分类

选择器分为基础选择器和复合选择器两大类，我们先看基础选择器。
基础选择器是由单个选择器组成的；
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。

2、标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中的某一标签指定统一的CSS样式。
语法：

   标签名 {
   
       属性1: 属性值1;
       属性2: 属性值2;
       ......
   }

作用： 标签选择器可以把某一类标签全部选择出来，比如所有的 < p > 标签。
优点： 能快速为页面中的同类型标签统一样式设置。
缺点： 不能做差异化设计，只能选择全部的当前标签。

3、类（class）选择器

如果想要差异化选择不同的标签，单独选择一个或几个标签，可以使用类选择器。
语法：

    .类名 {
   
       属性: 属性值;
       ......
    }

注意：
● 类选择器使用" ."（英文点号）进行标识，后面紧跟着自定义类名。
● 自定义类名不能使用标签的名称。
● 一个标签可以使用多个类名中间使用空格隔开。

4、id选择器

● id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
● HTML 以 id 属性来设置 id 选择器，CSS 中 id 选择器以 " # " 来定义。
● id 选择器和类选择器的不同住处就在于类选择器就好比人的名字，可以重名，id 选择器就相当于身份证号，每个人的都是唯一且不同的。
语法：

    #id名 {
   
       属性: 属性值;
       ......
    }

5、通配符选择器

在 CSS 中，通配符选择器需要使用 “*” 定义，它表示选取当前页面中的所有标签。
通配符选择器不需要调用，它自动就给所有的元素使用样式。
语法：

    * {
   
        属性：属性值
        ......
      }

基础选择器总结：

基础选择器	作用	特点	用法
标签选择器	可以选出所有相同的标签，比如 p	不能差异化选择	p { color：red； }
类选择器	可以选出一个或多个标签	可以根据需求选择	.box { color：red； }
id选择器	一次只能给一个标签调用	id属性只能在每个HTML文档中出现一次	#first { color：red； }
通配符选择器	选择所有的标签	选择的太多，部分不需要	* { color：red；}

三、CSS高级选择器

1、层次选择器

1.1、后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果希望只对 h1 元素中的 span元素应用样式，可以这样写：

h1 span {
   
   color:red;
}

1.2、子选择器

和后代选择器不同，子选择器只能选择某元素的子元素作为元素。
语法：

父元素 > 子元素 {
   
    属性:...
}

例如：

 h3 > p {
   
    color: red;
    font-family: 隶书;
    font-size: 55px;
}
<h3>
    <p>
        子选择器只能选择父级元素的子元素作为元素
    </p>
</h3>

1.3、相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

比如你要选择h3下的第2个p，就可以使用相邻兄弟选择器，使用相邻兄弟选择器后，就意味着和它同辈的下一个元素被选中，就像下面这个例子，使用相邻兄弟选择器选中的就是第二个p标签second。

.active+p {
   
    background: red;
    font-family: 隶书;
    font-size: 30px;
}
 <h3>
    <p class="active">first</p>
    <p>second</p>
    <p>third</p>
    <p>last</p>
</h3>

1.4、通用兄弟选择器

通用兄弟选择器选择的是同级元素后面的所有的兄弟元素。
例如下面这个例子，你要选择 class 为 active 的 p 标签后面的所有的 p 标签，就可以使用通用兄弟选择器。.

 .active~p {
   
            background: #5f5eff;
            font-family: 楷体;
        }
<h3>
    <p class="active">first</p>
    <p>second</p>
    <p>third</p>
    <p>last</p>
</h3>

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

2、结构伪类选择器

用法：
在这里插入图片描述
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li:first-child {
    
            background: blue;
            font-size: 20px;
            font-weight: bolder;
        }
        h3 p:last-child {
    
            background: red;
            font-weight: lighter;
            font-size: 25px;
        }
        ul li:first-of-type {
    
            background: #34fff5;
        }
        h3 p:nth-of-type(2) {
    
            background: #922d3a;
        }
    </style>
</head>
<body>
<ul>
    <li>1张三</li>
    <li>2李四</li>
    <li>3王五</li>
    <li>4赵倩</li>
    <li>5李云飞</li>
</ul>
<h3>
    <p>p1第一段</p>
    <p>p2第二段</p>
    <p>p3第三段</p>
    <p>p4第四段</p>
</h3>
</body>
</html>

执行结果：
在这里插入图片描述

四、美化网页元素

1、美化网页的必要性

1、有效的传递页面信息；
2、使页面变得好看，吸引用户；
3、凸显网页的主题；
4、为用户提供更好地体验；

2、网页的字体样式

<style>
        body {
   
            font-family: 楷体;
            font-size: large;
            font-weight: bolder;
            color: #0000FF;
        }
</style>