前面小编带领大家重温了前端开发中最基本的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. 201521123019 《Java程序设计》第12周学习总结

    1. 本章学习总结 2. 书面作业 Q1.字符流与文本文件:使用 PrintWriter(写),BufferedReader(读) 1.1 生成的三个学生对象,使用PrintWriter的printl ...

  2. Geronimo tomcat: 在 Apache Geronimo 插件体系中将 Apache Tomcat 这个优秀的 Web 容器整合至其中

    Apache Geronimo 灵活的插件体系将 Tomcat, OpenJPA, OpenEJB, ActiveMQ 等第三方组件集成至其中.本文从多角度介绍了在 Apache Geronimo 中 ...

  3. Mybatis第一篇【介绍、快速入门、工作流程】

    什么是MyBatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为 ...

  4. 生成验证码JSP【复用代码】

    该JSP可以生成验证码.以后用到的时候就方便了. <%@ page language="java" pageEncoding="UTF-8"%> & ...

  5. Java面试准备

    今天我们会分为四个部分来谈论这个问题,由于我本身是Java出身,因此关于主语言的问题,都是与Java相关,其它语言的同学可以选择性忽略.此外,面试的时候一般面试官的问题都是环环相扣,逐渐深入的,这点在 ...

  6. java乱码问题处理

    java乱码问题处理 java乱码出现的问题有很多,这里主要解释tomcat,jsp,html,http(get,post请求乱码处理).常见的问题可能是tomcat,http请求乱码问题,对于jsp ...

  7. Elipse中发布一个Maven项目到Tomcat

    对于maven初学者的我,经常遇到一个问题就是,maven项目创建成功后,本来已经添加了jar的依赖,但是发布到Tomcat中就是没有jar包存在, 启动Tomcat总是报没有找到jar包,可项目结构 ...

  8. ubuntu下程序员常用命令大全

    一.ubuntu下用命令查询系统版本 1.在终端中执行下列指令: cat /etc/issue 该命令可查看当前正在运行的ubuntu的版本号. 效果如图: 2.使用 lsb_release 命令也可 ...

  9. Matlab入门学习（程序设计）

    一.循环(for,while) for循环: for i=begin:step:end ...... end while循环: while condition ...... end 二.分枝(if,i ...

  10. openGPS.cn - 高精度IP定位原理，定位误差说明

    [ip定位历史] 关于IP定位,最早是通过运营商实现,每个运营商申请到的ip段,在某个范围内使用. 因此早期只能是国家为单位的基础数据. 对于比较大的国家,就进一步划分,比如,中国某通讯公司(不打广告 ...