CSS学习

最新推荐文章于 2024-03-17 21:40:56 发布

xiabe

最新推荐文章于 2024-03-17 21:40:56 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/xiabenshu/article/details/89049987

css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍CSS的基础知识，包括其作用、语法、与HTML的区别以及如何在网页中应用样式。讲解了选择器、属性、值等概念，并通过实例展示了如何创建简单的导航栏。

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

简介

CSS是定义web页面表示形式的语言。它用于添加颜色、背景图像和纹理，并排列页面上的元素。

CSS是Cascading Style Sheets，它是一种用于对web页面的视觉表示进行样式设计的语言。CSS是一种语言，它告诉web浏览器如何呈现web页面的不同部分。
web页面上的每个项或元素都是用标记语言编写的文档的一部分。在大多数情况下，HTML是标记语言，但是也有其他语言在使用，比如XML。在本指南中，我们将使用HTML实际演示CSS，但请记住，如果使用XML或不同的标记语言，同样的原则和技术也适用。

web页面上的每个项或元素都是用标记语言编写的文档的一部分。在大多数情况下，HTML是标记语言，但是也有其他语言在使用，比如XML。在本指南中，我们将使用HTML实际演示CSS，但请记住，如果使用XML或不同的标记语言，同样的原则和技术也适用。

CSS和HTML有什么不同?

在讨论CSS主题时，首先要理解的是什么时候使用CSS这样的样式语言，什么时候使用HTML这样的标记语言。

所有重要的网站内容都应该使用HTML等标记语言添加到网站中。
网站内容的表示应该由样式语言(如CSS)定义。

不属于web页面表示的博客文章、页面标题、视频、音频和图片都应该用HTML添加到web页面中。背景图像和颜色、边框、字体大小、排版以及网页上项目的位置都应该由CSS定义。

区分这一点很重要，因为如果不能使用正确的语言，将来就很难对网站进行更改，并且会给使用纯文本浏览器或屏幕阅读器的网站访问者带来可访问性和可用性问题。

CSS语法

CSS语法包括选择器、属性、值、声明、声明块、规则集、at-rules和语句。

选择器是用于标识web页面元素或受样式影响的元素的代码片段。
属性是要受影响的元素的方面。例如，颜色、填充、边距和背景是一些最常用的CSS属性。
值用于定义属性。例如，属性color可能被赋予如下红色的值:color: red;。
属性和值的组合称为声明。
在许多情况下，多个声明应用于单个选择器。声明块是用于引用应用于单个选择器的所有声明的术语。
单个选择器及其后面的声明块组合称为规则集。
At-rules类似于规则集，但是以@符号开始，而不是以选择器开始。最常见的at-rule是@media规则，它通常用于创建基于查看web页面的设备大小应用的CSS规则块。
规则集和at-rules都是CSS语句。

一个CSS语法

h1 { 
color: red; 
font-size: 3em; 
text-decoration: underline; 
}

在本例中，h1是选择器。选择器后面是一个声明块，其中包含三个声明。每个声明与下一个声明之间用分号隔开。制表符和换行符是可选的，但是大多数开发人员都使用它们来提高CSS代码的可读性。

通过使用h1作为选择器，我们说web页面上的每个level 1标题都应该遵循这个规则集中包含的声明。

color:red;
font-size: 3em;
text-decoration: underline;

color, font-size,和 text-decoration 都是属性。实际上，可以使用数百个CSS属性，但通常只使用几十个。

对于color属性，我们可以使用颜色关键字或十六进制、RGB或HSL格式的颜色公式。在本例中，我们使用了color关键字red。CSS3中有几十个颜色关键字，但是其他颜色模型可以访问数以百万计的颜色。

我们将3em的值应用于属性font-size。我们可以使用多种大小单位，包括像素、百分比等等。
此外，CSS3允许使用实线样式、双线样式、虚线样式、虚线样式和波浪样式，这些都很好地规范了文本装饰的颜色。我们可以使用这样的声明一次应用这三个值:

text-decoration: blue double underline;

该规则将使我们的初始示例中的h1用蓝色双线下划线。文本本身将保持在color属性中定义的红色。

为样式化准备HTML标记

CSS应该用于向web页面添加内容。该任务最好由HTML和XML等标记语言来处理。相反，CSS用于选择web页面上已经存在的项，并定义每个项应该如何显示。

为了尽可能容易地选择web页面上的项，应该将标识符添加到页面上的元素中。这些标识符(在CSS上下文中通常称为钩子)使标识应该受CSS规则影响的项变得更容易。

类和id用作CSS样式的挂钩。虽然CSS呈现的方式不受类和挂钩的使用的影响，但它们使开发人员能够精确定位他们希望设计样式的HTML元素。

类和id不可互换。知道何时使用它们是很重要的。

何时使用类

当一个web页面上有多个需要样式化的元素时，使用类。例如，假设您希望页眉和页脚中的链接具有一致的样式，但与页面主体中的链接的样式不同。要查明这些链接，可以向每个链接或包含链接的容器添加一个类。然后，您可以使用该类指定样式，并确保它们只应用于具有该类属性的链接。

何时使用IDs

对于只在web页面上出现一次的元素，请使用id。例如，如果使用HTML无序列表进行站点导航，可以使用ID(如nav)为该列表创建一个惟一的钩子。

下面是一个用于基本电子商务网站的简单导航栏的HTML和CSS代码示例。

<style> 
	#nav { 
	background: lightgray; 
	overflow: auto; 
	} 
	#nav li 
	{ 
	float: left; 
	padding: 10px; 
	}
	 #nav li:hover { background: gray; } 
</style> 
	 <ul id="nav"> 
	 	<li><a href="">Home</a></li> 
	 	<li><a href="">Shop</a></li> 
	 	<li><a href="">About Us</a></li> 
	 	<li><a href="">Contact Us</a></li> 
	 </ul>

Read more: https://html.com/css/#ixzz5kEgLrRC0

在这里插入图片描述
该代码将生成一个水平导航菜单，从页面左侧开始，背景为浅灰色。每个导航项的四周都有10个像素的间距，当鼠标悬停在每个导航项上时，它的背景颜色会变深。

同一web页面上的任何附加列表都不会受到该代码的影响。

什么时候不用钩子

<style> 
ul { list-style-type: upper-roman; margin-left: 50px; } 
p { color: darkblue }                   
</style> 
<p>Some paragraph text here. Two short sentences.</p>
 <ul>
  <li>A quick list</li> 
  <li>Just two items</li> 
</ul> 
<p>Additional paragraph text here. This time let's go for three sentences. Like this.</p>

在这里插入图片描述
在本例中，尽管我们只为ul和p元素分别编写了一次样式规则，但是多个项目都受到了影响。通过在网站的每个页面上创建一致的标题、列表和段落文本样式，使用元素选择器是创建吸引人的、可读的和一致的网站体验的好方法。

为样式化准备标记的最佳实践

既然您已经了解了如何将类、id和元素标记用作CSS规则集的挂钩，那么如何才能最好地实现这一知识来编写标记，以便轻松地指向特定的元素呢?

广泛而一致地应用类。对于应该在一个方向或另一个方向对齐的项，以及在单个web页面上重复出现的任何元素，使用类。
对web页面上只出现一次的项应用id。例如，在包含web页面内容的div上使用ID，在包含导航菜单的ul上使用ID，在包含web页面标题的div上使用ID。

将CSS规则链接到HTML文档的方法

有三种方法添加CSS规则到网页:

内联样式
内部样式表
外部样式表
在绝大多数情况下，应该使用外部样式表。但是，也有可能使用内联样式或内部样式表的实例。

内联样式

<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>

内部样式表

<head> 
<style> 
h1 { color: red; padding: 10px; text-decoration: underline; } 
</style> 
</head>
 <body> 
 <h1>Example Heading</h1> 
 </body>

外部样式表

<head> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
<h1>Example Heading</h1> 
</body>

什么的情况用各个方法

在几乎所有情况下，外部样式表都是对web页面进行样式设计的正确方式。使用外部样式表的主要好处是，它们可以链接到任意数量的HTML文档。因此，可以使用单个外部样式表定义整个网站的表示。

当设计一个简单的单页网站时，可以使用内部样式表。如果网站永远不会超出使用内部样式表的单个初始页面，则可以接受。

内联样式可以在两种情况下使用:

在编写CSS规则时，这些规则只适用于单个web页面上的单个元素。
当被所见即所得编辑器(如tinyMCE编辑器)应用到内容管理系统(如WordPress)中时。
在所有其他情况下，内联样式应该避免使用外部样式表。

CSS怎么工作？

在编写CSS时，很多时候编写的规则彼此冲突。例如，当样式头时，以下所有规则都可以应用于h1元素。

一个元素级规则，在网站的所有页面上创建一致的h1呈现。
定义在特定位置呈现h1元素的类级规则，例如博客文章的标题。
一个id级元素，定义在一个或多个web页面上仅在一个位置使用h1元素的呈现—例如网站名称。

开发人员如何编写足够通用的规则来覆盖每个h1，同时又足够具体地定义只应该出现在给定元素的特定实例上的样式?

CSS样式遵循两条规则，您需要了解这两条规则才能编写有效的CSS。理解这些规则将帮助您在需要时编写广泛的CSS，但在需要时又非常具体。

控制CSS行为的两条规则是继承和特异性。

级联继承

为什么CSS样式被称为级联?当多个规则相互冲突时，将执行最后一个规则。通过这种方式，样式级联向下，并应用最后编写的规则。

让我们看一个例子。让我们在一个内部样式表中编写两个CSS规则，它们之间存在直接的矛盾。

<head> 
<style> 
p {color: red;}
 p {color: blue;} 
 </style> </head> 
 <body> 
 <p>What color will the text of this paragraph be?</p> 
 </body>

浏览器将层叠遍历样式并应用最后遇到的样式，覆盖所有以前的样式。因此，标题是蓝色的。

.code_sample_p {color: red;}
.code_sample_p {color: blue;}

当使用外部样式表时，也会出现相同的级联效果。使用多个外部手写笔是很常见的。当这种情况发生时，样式表按它们在HTML文档head元素中出现的顺序加载。当样式表规则之间发生冲突时，每个样式表中包含的CSS规则将覆盖以前加载的样式表中包含的规则。以以下代码为例:

<head> 
<link rel="stylesheet" type="text/css" href="styles_1.css"> 
<link rel="stylesheet" type="text/css" href="styles_2.css"> 
</head>

如果这两个样式表中包含的样式之间存在冲突，那么将应用styles_2.css中的规则。

样式的继承是CSS样式级联行为的另一个例子。

当为父元素定义样式时，子元素将接受相同的样式。例如，如果我们对无序列表应用颜色样式，子列表项将显示相同的样式。

<head> 
<style> ul {color: red;} </style> 
</head> 
<body> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
</ul> 
</body>

不是每个属性都从父元素传递到子元素。浏览器将某些属性视为非继承属性。边距是属性的一个例子，它不会从父元素传递到子元素。

特异性

决定将哪些规则应用于每个HTML元素的第二个规则是特异性规则。
具有更多特定选择器的CSS规则将否决具有较少特定选择器的CSS规则，无论首先发生什么。正如我们所讨论的，三个最常见的选择器是元素标记、类和id。

最不特定的选择器类型是元素级选择器。
当一个类被用作选择器时，它将覆盖以元素标记作为选择器编写的CSS规则。
当ID用作选择器时，它将覆盖使用元素或类选择器编写的CSS规则。

影响特异性的另一个因素是CSS样式的编写位置。使用style属性内联编写的样式推翻了在内部或外部样式表中编写的样式。

提高选择器的特异性的另一种方法是使用一系列元素、类和id来定位要寻址的元素。例如，如果您想要在一个具有**“example-list”类和id为“example-div”的div所包含的列表中精确定位无序列表项，您可以使用以下选择器来创建一个具有高度特异性的选择器**。

div#example-div > ul.example-list > li {styles here}

虽然这是创建非常特定的选择器的一种方法，但是建议限制使用这类选择器，因为处理它们确实比处理简单的选择器花费更多的时间。

一旦您理解了继承和特异性是如何工作的，您就能够精确地定位web页面上的元素。

CSS能做什么

CSS可以用来将HTML文档转换成专业的、精心设计的文档。以下是一些你可以实现愿望CSS的事情:

创建一个灵活的网格来设计完全响应的网站，在任何设备上呈现漂亮。
样式的一切，从排版，到表格，到表单，以及更多。
使用诸如float、Position、overflow、flex和box-sizing等属性在web页面上相对放置元素。
向任何元素添加背景图像。
创建形状、交互和动画。

这些概念和技术超出了本介绍性指南的范围，但是下面的资源将帮助您处理这些更高级的主题。

盒模型

如果您计划使用CSS来构建web页面布局，那么首先要掌握的主题之一就是box模型。box模型是一种可视化和理解web页面上的每个项是如何由内容、填充、边框和边距组合而成的方法。
在这里插入图片描述
理解这四个部分是如何组合在一起的是一个基本的概念，在继续学习其他CSS布局主题之前必须掌握这个概念。
了解box模型的两个好地方包括:

万维网联盟对box模型的解释。
介绍来自Mozilla开发人员网络的CSS框模型。

创建布局

使用CSS创建布局使用了许多技术和策略，理解box模型是每种策略的先决条件。掌握了框模型之后，您就可以学习如何操作web页面上的内容框了。

Mozilla开发人员网络为CSS布局提供了很好的介绍。这篇简短的阅读涵盖了CSS布局背后的基本概念，并快速介绍了text-align, float, 和position.

关于CSS布局的更广泛、更深入的指南可从W3C获得:CSS布局模型。本文档是专业开发人员的资源，所以如果您是CSS新手，请在阅读时花些时间。这不是一个快速阅读。但是，关于创建CSS布局，您需要知道的所有内容都包含在这个文档中。

多年来，网格布局一直是设计响应式布局的首选策略。CSS网格从零开始创建已有多年，市场上有许多不同的网格生成网站和开发框架。然而，在几年内，对网格布局的支持将成为CSS3规范的一部分。通过阅读W3C网站上的主题，您可以了解很多关于网格的知识。想要更轻松、更简短地介绍网格布局，请阅读Mozilla的这篇文章。

在几年内，CSS3柔性盒，或flexbox，有望成为设计网站布局的主导模式。flexbox规范还没有完全完成，对flexbox的支持在浏览器之间也不一致。然而，每一个初露头角的CSS开发人员都需要熟悉flexbox，并准备在不久的将来实现它。Mozilla开发人员网络是提高flexbox速度的最佳场所之一。