前面小编带领大家重温了前端开发中最基本的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代码的书写格式。后面的知识性和趣味性会越来越强，希望大家多多关注啊！

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

  1. 全面系统讲解CSS工作应用+面试一步搞定

    [TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...

  2. CSS前端开发学习总结、一

    1. 属性选择器: 2. CSS伪类选择器: 3. CSS伪元素: 4. CSS优先级: 5. 行内标签: 6. 块级标签: 7. Display: 8. Line-height:行高 9. text ...

  3. 全面系统讲解CSS 工作应用+面试一步搞定

  4. Windows系统零开始前端开发环境配置

    1. 安装nodejs 国内下载页面(推荐) 官网下载页面 现在的nodejs自带NPM,只需点击下一步下一步安装即可. 为了加速国内NPM包下载,可配置淘宝NPM镜像 2. 安装git 国内下载页面 ...

  5. 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

  6. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  7. 基于gulp编写的一个简单实用的前端开发环境好了，安装完Gulp后，接下来是你大展身手的时候了，在你自己的电脑上面随便哪个地方建一个目录，打开命令行，然后进入创建好的目录里面，开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json，打开的速度看你的网速了注意:以下是为了演示 ，我建的一个目录结构，你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  8. 基于gulp编写的一个简单实用的前端开发环境

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  9. Web前端开发大系概览 （前端开发技术栈）

    前言 互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000 ...

随机推荐

  1. 201521123080《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. (1)继承:子类继承父类,子类可以复用父类的方法和函数. (2)多态:方法的重写和重载是Ja ...

  2. 201521123026《Java程序设计》第2周学习总结

    1. 本章学习收获 1.熟悉了码云的部分功能的使用 2.java编程基础的巩固以及延伸 3.解决了部分PTA编程时所遇到困难并明白了解决困难的方法的原理 4.了解了用package和import管理类 ...

  3. 201521123073《Java程序设计》第2周学习总结

    1. 本周学习总结 1.学习了枚举类型的应用: 枚举也可以象一般的类一样添加方法和属性,你可以为它添加静态和非静态的属性或方法,这一切都象你在一般的类中做的那样. public enum Season ...

  4. JAVA课设--五子棋--团队博客

    1 团队名称.团队成员介绍 徐璐琳 网络1511班 201521123010 祁泽文 网络1511班 201521123011 张晨晨 网络1511班 201521123009 2 项目git地址 团 ...

  5. 201521123033《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. answer; 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4- ...

  6. MySQL集群（一）之主从复制

    前面学完了JDBC,接下来带大家感受一下MySQL集群!其实什么是MySQL集群?简单的说就是一群机器(服务器)的集合,它们连在一起来工作. 其实各种数据库都有自己的集群,常常的多: 我们要学习的就是 ...

  7. Java实现基本排序算法

    稳定排序算法性能比较 冒泡排序代码: /** * 冒泡排序 * * @param arr * @return */ public int[] bubbleSort(int[] arr) { int t ...

  8. 鸟哥Linux学习笔记05

    1,          文件系统通常会将 权限与属性放置到inode中,至于实际数据则放置到data block块中.另外还有一个超级块(superblock)会记录整个文件系统的整体内容,包括ino ...

  9. 14.LINUX-platform机制实现驱动层分离(详解)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 本节目标:        学习platform机制,如何实现驱动层分离 1.先来看看我们之前分析输入子系统的分层概念,如下图所示: 如上图所示,分 ...

  10. oracle 权限

    一.介绍这一部分我们主要看看oracle中如何管理权限和角色,权限和角色的区别在哪里.当刚刚建立用户时,用户没有任何权限,也不能执行任何操作.如果要执行某种特定的数据库操作,则必须为其授予系统的权限: ...