您的位置：首页 > Web前端 > CSS

系统讲解CSS，前端开发最神奇的技术，新手的你一定不能错过

2017-10-23 13:28 711 查看

前面小编带领大家重温了前端开发中最基本的HTML语言。如果你已经掌握了这门语言，那么恭喜你，可以去深入了解CSS技术了。CSS技术最主要的功能就是弥补HTML标记对在页面中显示外观的不足，对这些标记对的默认外观进行美化。从本文开始，小编将陆陆续续的带领大家学习这门神奇的技术，有兴趣的同学一定要多多关注啊。

首先要声明，本系列关于CSS的文章重点讲解CSS技术中主要的核心属性和用法，关于最新的CSS 3技术，小编会在后续的文章中为大家阐述。

web前端/html5学习群：250777811

更为强大的CSS 3技术

接触一门新的技术，最起码我们要知道该门技术名称的含义。CSS，全称 Cascading Style Sheets，被中文翻译为“层叠样式表”，其中由大量的CSS属性组成。严格上来说，CSS与HTML类似，都不属于真正的编程语言，基本上没有复杂的逻辑流程，也不具备变量和函数的功能。在前端开发领域属于比较容易上手的技术。

下面小编就来为大家讲述CSS技术的使用方法。

一、CSS技术的基本格式：

如果你是初次接触CSS技术，那么一定不要着急，我们首先需要了解CSS的书写格式。下面这张图片为我们展示了CSS的基本格式。

CSS技术的基本格式

上述格式中出现了三个英文单词，我来给大家分别解释：

selector，选择器。是用来在HTML文档中选择其中出现的标记对的一种方法。

property，属性。是指我们将要学习到的大量的CSS属性。

value，值。是指CSS属性的取值。

【web前端/html5学习群：250777811】

综合上面的翻译，我们将这个基本格式解释为：从HTML文档中选择（selector）出需要的标记对，对选择出的标记对施加CSS指定的属性（property），并将该属性设定为特定的取值（value），以让选择出的标记对在页面中呈现为一种不一样的效果。

不知道小编讲清楚没有，如果能有一个实际的例子肯定就更好理解了。下面我来利用一个简单的例子为大家说明CSS的功能。

我们都知道，<h1></h1>标记对在HTML文档中作为一级标题，它呈现出的颜色是黑色的。那么如果我想让<h1></h1>标记对呈现出红色的效果要如何实现呢？这就可以用到CSS技术。

用我们上面对CSS基本格式的解释来说，就是这个意思：从HTML文档中选择出<h1></h1>标记对，对该标记对施加“颜色”属性，并设置为“红色”。这样就可以让所有出现的<h1></h1>标记对在页面中呈现为红色的效果了。

好，那么，问题来了。CSS技术中表示文字颜色的属性叫什么名字呢？这个很简单，就叫做大家都熟悉的“color”。

万事俱备，只欠东风。实现上述功能的代码如下所示：

h1{color:#ff5857;}

大家看，是不是很简单。有人就会问了，这句代码我是理解了，可是如何在HTML文档中书写呢？接下来我就为大家展示完整的HTML代码。

<!DOCTYPE html>

<html>

<meta charset=”utf-8” />

<head>

<style type=”text/css”>

h1{color:#ff5857;}

</style>

</head>

<body>

<h1>今日头条 小海前端</h1>

</body>

</html>

　　

大家可以将上述代码编写为一个HTML文档，然后在浏览器中看看最终的显示效果。这里小编建议大家使用一款名为 Sublime的代码编辑器进行书写。关于该编辑器的使用技巧，我会在后续的文章中为大家深入介绍。

如果你真的演示了上述代码，你就会发现，页面中出现的一级标题文字都变成了红色。通过这个简单的例子，相信你也理解了CSS技术存在的意义了。接下来，你一定会急于询问，CSS都有哪些属性呢？别着急，首先让我们先认识认识CSS的选择器（selector）。

二、CSS的常用选择器：

上述例子中，是直接使用HTML标记对的名字作为CSS选择器的。其实，CSS技术还为我们提供了多种从HTML文档中选择标记对的方法，这里我们来学习一下。

1、重定义单个HTML标记：

刚才我们书写的选择器 h1 就属于“重定义单个HTML标记”的选择器。顾名思义，这种选择器重新定义了HTML标记的外观。例如下列CSS代码：

p{color:pink;}

这句的含义是重新定义页面中的段落标记<p></p>，设置段落标记中的文本颜色为pink（粉色）。可以看出来，color属性的取值既可以是颜色代码（例如：#ff5857），也可以是颜色的英文单词（例如：pink）。

这种方式简单易懂，也被人们称为“元素选择器”。

2、重定义多个HTML标记：

如果我希望页面中的段落标记和二级标题标记均采用相同的文本颜色，那又该如何书写呢？这里CSS规定，多个HTML标记采用一种样式，不用为每一个标记逐个书写，只需要将多个HTML标记名称用逗号隔开就可以了。实现上述功能的代码如下：

p,h2{color:orange;}

这样就解决了为每一个标记单独书写样式的复杂性，这种选择器也被人们称为“群组选择器”。

3、具有上下文关系的重定义HTML标记：

什么叫做“上下文关系”呢？比如大家看下面这个结构：

<p>

终于学习了功能强大的<span>CSS技术</span>。

</p>

我们可以看到，在<p></p>标记对的内部，有一个<span></span>标记对，该标记对扩住了文本“CSS技术”这几个字。如果我希望这几个字的颜色变为紫色，但是又不想影响到代码中<p></p>标记对以外出现的<span></span>标记对，那又该如何处理呢？

CSS为这种方法提供了一种叫做“上下文”的关系，上述HTML代码段中的p标记对和span标记对就被称为具有“上下文关系”的标记对。这种关系在CSS选择器的写法中用空格隔开主从标记对的名称。代码如下：

p span{color:purple;}

因为具有上下文关系的标记就像是父辈和子辈的家族关系，所以这种选择器也被人们称为“后代选择器”。

同学们，今天我们学习了CSS技术的基本格式和三个常用的选择器。希望初次接触的同学可以在电脑上真正的实践操作一下。前端开发是一门实践性很强的课程，需要大量的去动手实现。只是将知识停留在理论阶段，而不去实际操作，是无法真正掌握这门技术的。

web前端/html5学习群：250777811

欢迎关注此公众号→【web前端EDU】跟大佬一起学前端！欢迎大家留言讨论一起转发

本文知识总结

文章预告

下一次小编会接着本文章的进度，为大家讲解“用户自定义类”选择器和“伪类”选择器的使用，都是CSS技术中最为常用的选择器。同时教会大家几种CSS代码和HTML代码的书写格式。后面的知识性和趣味性会越来越强，希望大家多多关注啊！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航