CSS层叠样式表一

最新推荐文章于 2024-09-14 17:04:32 发布

upupup？

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量160

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_52276980/article/details/120791653

版权

本文介绍了CSS在网页美化和布局中的作用，阐述了HTML的局限性和CSS作为网页美容师的功能。内容包括CSS的语法规范，如选择器和声明的构成，以及常见的基础选择器：标签选择器、类选择器、ID选择器和通配符选择器。通过实例展示了如何使用这些选择器来设置样式，强调了结构与样式分离的重要性和CSS代码风格的建议。

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

1.CSS简介

CSS的主要使用场景就是美化页面，布局页面的。
CSS——网页的美容师

1.1 HTML的局限性

HTML是个非常单纯的家伙，他只关注内容的语义，比如<h1>表明这是个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a>表明此次有连接。

写出来的网站：丑。

HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐。

1.2—— CSS网页的美容师

CSS是层叠样式表的简称，有时候我们也会称之为CSS样式表或级联样式表。

CSS也是一个标记语言。

CSS主要用于设置HTML页面中的文本内容（字体，大小，对齐方式），图片的外形（宽度，边框样式，边距等）以及版面的布局和外观显示样式。

CSS让我们的网页更加丰富多彩，布局更加灵活自如，简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

CSS的最大价值：由HTML专注于结构的呈现，样式交给CSS，即结构与样式相分离。

1.3 CSS语法规范

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

CSS一般写在<head> </head>之间，在</head>前面加<style> </style>。

<!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>Document</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        p {
            /* 修改字体颜色 */
            color: red;
            /* 修改字体大小 */
            font-size: 25px;
        }
    </style>
</head>
<body>
     <p>有点意思</p>
</body>
</html>

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
属性和属性值以”键值对“的形式出现。
属性是对指定对象设置的样式属性，例如字体大小，文本颜色等。
属性和属性值之间用英文:分开；
多个键值对之间用英文;分开；

1.4 CSS代码风格（不是强制规范。）

笔记传送门

2. CSS基础选择器

2.1 CSS选择器的作用

选择器就是根据不同需求把不同的标签选出来，简单来说，还是选择标签用的。

以上CSS做了两件事：

1. 找到所有的h1标签，选择器（选对人）；

2. 设置这些标签的样式，比如颜色为红色（做对事）。

2.2 选择器分类

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器；

基础选择器是由单个选择器组成的。
基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器。

2.3 标签选择器

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

作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

标签名 {
    属性1： 属性值1；
    属性2： 属性值2；
    属性3： 属性值3；
    ....
}

<!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>Document</title>
    <style>
        /* 标签选择器，写上标签名就可以了 */
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
     <p>男生</p>
     <p>男生</p>
     <p>男生</p>
     <div>女生</div>
     <div>女生</div>
     <div>女生</div>
</body>
</html>

2.4 类选择器

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

语法：

.类名{
    属性1：属性值1；
    ...
 }

例如，将所有拥有red类的HTML元素均为红色
 .red{
    color:red；
}
结构需要用class属性来调用class类的意思
<div class="red">变红色</div>

<!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>Document</title>
    <style>
        /* 类选择器口诀：样式点定义 结构类class调用 一个或多个 开发最常用*/
        .red {
           color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>生僻字</li>
        <li>冰柜</li>
    </ul>
</body>
</html>

注意：

类选择器使用“ . ”进行标识，后面紧跟类名（自定义，我们自己命名的）。
不能用标签的名字作为名字，可以理解为给整个标签起了一个名字来表示。
长名称或词组可以使用短横线进行分割，如star-xing。
不要使用纯数字或者中文命名。
命名要有意义。

案例分析：

<!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>Document</title>
    <style>
        /* 类选择器口诀：样式点定义 结构类class调用 一个或多个 开发最常用*/
        .red {
            /* 背景颜色 */
           background-color: red;
           width: 100px;
           height: 100px;
        }
        .green{
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>

<div>就像一个盒子。

多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签。

简单理解就是一个标签有多个名字。

1.多类名使用方式

<div class="red font20">亚瑟</div>

在标签class属性中写多个类名
多个类名中间必须用空格分开

2.多类名使用场景

可以把一些标签元素相同的样式（公共的部分）放到一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
节省CSS代码，统一修改也非常方便

2.5 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以”#“来定义。

语法：

#id名{
  属性1：属性值1；
  ...
}

例如，将id为nav元素中的内容设置为红色
#nav {
  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>Document</title>
    <style>
        /* 样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink {
          color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">
        迈克尔杰克逊
    </div>
</body>
</html>

id选择器和类选择器的区别

类选择器（class）好比是人的名字，一个人可以有多个名字，同时一个名字也可以被多个人调用。
id选择器还比是人的身份证号码，是唯一的，不能重复。
id选择器和类选择器最大的不同在于使用次数上。

2.6 通配符选择器

在CSS中，通配选择器使用“ * ”定义，它不是选取页面中的所有元素。

语法：

* {
     属性1:属性值1；
     ...
  }

通配符选择器不需要调用，自动就给所有的元素使用样式。

特殊情况才使用，后面讲解使用场景（以下是清除使用元素标签的内外边距）。

* {
    margin ：0；
    padding ：0；
  }

2.7 总结——基础选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color ：red; }
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color :red; }
id选择器	一次只能选择1个标签	id属性只能在每个HTML文档中出现一次	一般和js搭配	#nav {color ：red; }
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* { color ：red; }