CSS概述

最新推荐文章于 2024-04-19 18:32:56 发布

abu1216

最新推荐文章于 2024-04-19 18:32:56 发布

阅读量222

点赞数 1

本文链接：https://blog.csdn.net/abu1216/article/details/110392549

版权

本文详细介绍了CSS的基础知识，包括什么是CSS、如何在HTML中引入CSS（style属性、style标签、外部CSS文件），以及CSS选择器的使用，如标签名选择器、class选择器、id选择器、后代选择器和属性选择器。此外，还总结了常用的CSS属性，如文本属性、字体属性、背景属性和边框属性，并提供了实际的代码示例。最后，文章提到了CSS的display属性和网页开发实战练习。

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

CSS概述

什么是CSS？(了解)

CSS: 层叠样式表，用于修饰、渲染网页的一门技术

使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！

在HTML中引入CSS

方式1：通过style属性引入css（不推荐）

<div style="border:2px solid red;font-size:26px;background:pink;">这是一个div...</div>

由于上面这种方式是将css样式代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。

将样式代码写在标签上，样式代码只对当前标签生效，代码无法复用！

并且使用这种方式无法将html标签和css样式进行分离!

因此不推荐使用这种方式！（这种通过style属性添加的样式，叫做行内样式/内联样式）

方式2：通过style标签引入css

在head标签内部可以添加一个style标签，在style标签内部可以直接书写css样式

这种方式是将所有的css样式代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！

初步的实现了将html标签代码和css样式代码进行了分离!

代码示例：

<head>
<meta charset="utf-8" />
<style type="text/css">
   /* ****** CSS样式 ****** */
   span{ /* 为当前html中的所有span标签设置样式 */
       border:2px solid green;
       font-size:30px;
       font-weight:bolder; /* bold/bolder */
   }
</style>
</head>

方式3：通过link链接引入外部的css文件

在head标签内部，通过一个link标签可以引入外部的CSS文件

这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。

代码示例：html中引入demo.css文件

<link rel="stylesheet" href="demo.css" />

demo.css文件

@charset "UTF-8";
p{
   border: 2px solid blue;
   color: red;
   font-family: 华文琥珀;
   text-indent: 50px;
}

CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

标签名选择器

通过元素名称(或标签名称)选中指定名称的所有标签

格式: 元素名/标签名{ css样式... }

/* ----- 1.标签名选择器练习 -----
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */
   background-color:#efbdef;
   font-size: 22px;
   font-weight: bolder;
}

class选择器

可以为元素添加一个通用的属性 -- class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。

格式：.class值{ css样式... }

实例:

/* ----- 2.类选择器练习 -----
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{ /* 选中所有class值为s1的元素 */
   background: #faf77b;
   border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
   background: #5eff1e;
   color