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

    1. 本周学习总结 -本周学习了面向对象,学会了如何用Eclipse自动生成setter/getter/toString以及构造有参函数等 2. 书面作业 1.代码阅读 public class Te ...

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

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 1.1立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) ...

  3. Java第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  4. java web SSO单点登录

    第一篇: Web应用系统的演化总是从简单到复杂,从单功能到多功能模块再到多子系统方向发展. .当前的大中型Web互联网应用基本都是多系统组成的应用群,由多个web系统协同为用户提供服务. 多系统应用群 ...

  5. eclipse安装java ee插件方法步骤

    1.本人以前使用的MyEclipse进行Javaweb开发,但是后来由于myeclipse实在太臃肿,经常在运行的过程中不流畅 (可能电脑内存也不是太高吧)   !所以坚决换用eclipse,但是问题 ...

  6. java线程池相关知识点总结

    Android中常见到的很多通用组件一般都离不开"池"的概念,如各种图片加载库,网络请求库,即使Android的消息传递机制中的Meaasge当使用Meaasge.obtain() ...

  7. Server Tomcat v7.0 Server at localhost failed to start.解决方法

    ---恢复内容开始--- 今天在做jsp项目的时候,Tomcat突然无法打开了,出现的报错是这样的: 也不知道是怎么搞得,百度了老半天看到有的网友是通过两这个方法解决的,连接在这http://blog ...

  8. 一篇搞定Python正则表达式

    1. 正则表达式语法 1.1 字符与字符类 1 特殊字符:\.^$?+*{}[]()| 以上特殊字符要想使用字面值,必须使用\进行转义 2 字符类    1. 包含在[]中的一个或者多个字符被称为字符 ...

  9. java 线程一

    java基础学习总结--线程(一) 一.线程的基本概念 线程理解:线程是一个程序里面不同的执行路径 每一个分支都叫做一个线程,main()叫做主分支,也叫主线程. 程只是一个静态的概念,机器上的一个. ...

  10. 编码格式简介：ASCII码、ANSI、GBK、GB2312、GB18030和Unicode、UTF-8，BOM头

    编码格式简介:ASCII码.ANSI.GBK.GB2312.GB18030和Unicode.UTF-8,BOM头 二进制: 只有0和1. 十进制.十六进制.八进制: 计算机其实挺笨的,它只认识0101 ...