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

    1.本周学习总结 使用工具:百度脑图 2.书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int ...

  2. 201521123038 《Java程序设计》 第十四周学习总结

    201521123038 <Java程序设计> 第十四周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 接口: DriverManager ...

  3. 201521123113《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 Q1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? fi ...

  4. Sublime自定义语法

    以thinkphp框架的assign函数为例 在sublime\Data\Packages\PHP下 新建文件:assign.sublime-snippet 内容为 <snippet> & ...

  5. 接口测试入门（5）----新框架重构，使用轻量级的HTTP开发库 Unirest

    之前的第一套框架在使用过程中发现存在以下问题: 一.  框架1缺点: 1.登陆的账号每个人写的不一样,一旦用户在测试环境被修改,则导致用例失败 2.每次读取访问网址,需要在同一个java文件下切换测试 ...

  6. Oracle-表的字段增加修改删除操作

    表结构修改 ALTER TABLE SCOTT.TEST RENAME TO TEST1--修改表名 ALTER TABLE SCOTT.TEST RENAME COLUMN NAME TO NAME ...

  7. 谈谈浏览器http缓存

    请求头 user-agent pragma Cache-control Referer Accept Cookit If-Modified-Since If-None-Match 响应头 conten ...

  8. java web项目修改favicon.ico图标的方式

    1.修改整个项目的tomcat图标 找到tomcat的根目录(tomcat-webapps-ROOT目录),然后将修改的favicon.ico图标覆盖掉本地的图标,然后再重启项目,刷新,清除浏览器缓存 ...

  9. Angular2开发拙见

    本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型 ...

  10. js转换字符串为数值的方法

    在js读取文本框或者其他表单数据的时候获得的值是字符串类型的,比如两个文本框a和b,假设获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,由于他们都是字符串形 ...