第一节我们简介了一下CSS的工作流程，我相信读者会有一个大体的认识，那么接下来我们将会深入的研究一下CSS的细节问题，这些问题的涉及将会使我们的工作更加完善。

*************注释************

1.CSS也是需要注释的，注释中的内容不会被解释执行，它也和C语言一样，用/*开头，用*/结尾，其中的内容会被当做注释，我们想怎么写就怎么写。

2.下面给个例子：

p{    color: green;

    /* 我们在这里书写注释

    * 辛星CSS，与博客园共同成长

    */

    font-size: 14px;

    text-align: center;}

****************选择器**************

1.我们第一节就介绍了CSS的基础语法了，其中就说到了选择器，在CSS中有两类稍微特殊点的选择器，我们称之为id选择器和class选择器。

2.先说id选择器，我们在HTML的元素中，每一个元素都可以设置一个属性，该属性就是id，然后我们在CSS中使用#号外加这个id的数值型来作为选择器，后面的声明就和普通的写法一样。

3.光说是有点抽象的，我们下面给个例子：

首先新建一个my.html文件，书写内容如下：

<html>

<head>

    <title>2014年辛星CSS教学夏季版</title>

    <link rel="stylesheet" type="text/css" href="my.css">

</head>

<body>

    <p id = "para">辛星CSS，分享知识，传递温情</p>

</body>

</html>

然后我们在my.css中这么写就可以了：

#para{    color: green;

    font-size: 14px;

    text-align: center;}

上面我们就通过在HTML文件中指定了p标签的id，然后在css文件中根据id来设置了它的属性。

4.所谓id，那就是唯一的，在同一个HTML文件中，不能有两个id都是para，这样会导致混乱，我们可以用下面的class来解决。

5.如果说id是用来描述单个的样式，那么，class则用于描述一组标签的样式，class可以用在多个元素中使用。

6.id使用#号来加上属性值，而class则使用.号加上属性值，由于两者的使用及其的类似，我就不赘述了，想必聪明的读者已经可以仿造出来了。

*************伪类***************

1.CSS中的选择器是比较灵活的，比较常用的还有伪类的说法，下面我来解释一下，伪类的使用官方给出的语法格式是这样的：

selector:pseudo-class {property:value;}

2.什么意思呢，就是selector就是选择器嘛，而pseudo-class就是相应的伪类了，后面跟的就是它的属性和值。

3.其实伪类的最经典的例子之一就是超链接，比如我们可以书写如下代码：

首先是创建一个my.html文件，代码如下：

<html>

<head>

    <title>2014年辛星CSS教学夏季版</title>

    <link rel="stylesheet" type="text/css" href="my.css">

</head>

<body>

    <a href="#">博客园辛星</a>

</body>

</html>

然后就是my.css文件，代码如下：

a:link{color:red;}

a:visited{color: green;}

a:hover{color:blue;}

a:active{color:black;}

4.上面的css文件中我们就设置了当我们没有点击超链接的时候是红色的，当我们的鼠标经过的时候是蓝色的，当我们的鼠标点击它而又没有松开的时候，它是黑色的，当我们访问过的连接，它会呈现绿色。

5.而且a：hover必须被放到a：link和a：visited之后，才会有效。

6.而a：active必须被当道a：hover之后，才有效。

7.我们还可以让伪类与上面提到的class选择器一起用，我感觉不是很常用，就不介绍了。

8.还有一个child伪类，但是对浏览器的兼容性上不好，因此也不介绍了。

9.此外还有伪元素的说法，如果大家做的事英文网站，还是比较重要的，但是对于汉语网站来说，意义不大，因此也就不说了。

*************其他选择器*********

1.CSS还支持几种其他的选择器类型，第一种就是后代选择器，比如我们把a插入到一个div里面去，那么可以用div a这样的选择器来表示a的样式。

2.第二种就是子元素选择器，它会选择父元素中的所有子元素，比如div>a，即它和第一个的区别就是把空格换成了大于号。

3.另外的相邻兄弟选择器和普通相邻兄弟选择器，总体感觉意义不大，只会增加记忆量和学习的难度，实用性并不高。

4.CSS还支持属性选择器，但是由于也是对浏览器的兼容性上不好，也就不介绍了。

5.还有所谓的群组选择器的说法，是指几个选择器使用同一个样式，它用逗号把各个选择器进行区分，并且连接起来，就像我们C语言中函数的参数列表中的多个参数一样，示例：

p,td,li{color: red;}

6.还有通用选择器的说法，就是用一个*表示，如下代码：

p*{color: red;}

会把所有的段落的颜色都设置为红色。

***************小结************

1.本小节我们讲述了CSS选择器和注释。

2.CSS常用的选择器就是标签选择器、id选择器、class选择器和伪类选择器，其他选择器的方式都可以用上面这几种方式来搞定。

2014年度辛星css教程夏季版第二节的更多相关文章

  1. 2014年度辛星css教程夏季版第一节

    CSS是Cascading Style Sheets的缩写,即层叠样式表,它用于表现HTML的样式,即HTML只是去写该网页有哪些内容,至于如何去表现它们,由CSS去定制. ************* ...

  2. 2014年度辛星html教程夏季版第二节

    上面一节中我们介绍了HTML文件的书写和几个标签,接下来我们来认识几个其他的标签,这里我们主要介绍一下head标签和文本标签. ***************head标签*************** ...

  3. 2014年度辛星css教程夏季版第六节

    这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...

  4. 2014年度辛星css教程夏季版第五节

    本小节我们讲解css中的”盒模型“,即”box model“,它通常用于在布局的时候使用,这个”盒模型“也有人成为”框模型“,其实原理都一样,它的大致原理是这样的,它把一个HTML元素分为了这么几个部 ...

  5. 2014年度辛星css教程夏季版第三节

    第二节我们讲述的几乎全是CSS的选择器,那么下面这一节我们来讲一下CSS的颜色和文本的一些东西,虽然我对调色不大敏感,但是对于颜色还是比较感兴趣的. *********CSS中的颜色********* ...

  6. 2014年度辛星css教程夏季版第四节

    接下来的这一节我计划讲解的是超链接和列表的样式,然后我们做出一个导航栏出来,其实导航栏是非常常见的,但是我们这里做得这个有点并不那么完善,等我们学完了css之后再完善它. ************** ...

  7. 2014年度辛星html教程夏季版第一节

    从今天起开始在博客园开启自己的html教程啦,先从第一节开始把,首先推荐一个网站,就是http:/www.w3cschool.cc,这是一个公开的教学网站,但是它有一个问题,那就是虽然很全面,但是不是 ...

  8. 2014年度辛星css教程夏季版第七节

    本小节我们研究浮动的问题,浮动使得布局更加灵活,虽然我们前面也有关于布局的讲解,但是它们提供的内容还是太有限了,要想获得更强大的布局,还必须使用浮动才能完成更灵活的布局. ***********浮动* ...

  9. 2014年度辛星html教程夏季版第八节

    经过前面七节的学习,我感觉大家的HTML的功底也差不多了,而且我特别的删去了某些东西,比如框架,如果回到几年前,那么框架是非常流行的,但是现在都到了2014年了,这些东西早就该被遗忘了,因此,我果断的 ...

随机推荐

  1. iOS之深入了解控制器View的加载

    前言 在面试中,面试官可能会问这样的问题,loadView有什么作用,它与viewDidLoad有何区别 首先我们得知道,控制器view是通过懒加载的方式进行加载的,即用到的时候再加载. loadVi ...

  2. 《编写高质量代码—改善java程序的151个建议》知识整理一

    1.用偶判断,不用奇判断 案例:在代码i%2==1?"奇数":"偶数" (java中的求余算法相当于:divided-divided/divisor*divis ...

  3. Spring 4 Ehcache Configuration Example with @Cacheable Annotation

    http://www.concretepage.com/spring-4/spring-4-ehcache-configuration-example-with-cacheable-annotatio ...

  4. Spring 事务模型

    一.三种事务模型 1.本地事务模型:开发人员不用知道事务的存在,事务全部交给数据库来管理,数据库自己决定什么时候提交或回滚,所以数据库是事务的管理者. Connection conn=jdbcDao. ...

  5. mysql copy表或表数据常用的语句整理汇总

    mysql copy表或表数据常用的语句整理汇总. 假如我们有以下这样一个表: id username password ----------------------------------- 1 a ...

  6. (原创)openvswitch实验连载1-fedora 17下安装openvswitch

    1 软件安装 1.1测试环境和网络拓朴 大部分朋友估计也没有一个真实环境来完全整个的测试,所以我也是使用了在一台PC机上使用Vmware Workstation的方式来进行实验.总体结构是在PC机上安 ...

  7. APPlication,Session,Cookie,ViewState和Cache之间的区别

    1.Application:用于保存所有用户共用的数据信息. 在Asp.Net中类似的配置数据最好保存在Web.config文件中.如果使用Application对象,一个需要考虑的问题是任何写操作都 ...

  8. Android 百度地图开发之一（Hello BaiDu Map）

    之前也接触过百度地图的开发,但那是在网上找的案例或代码,而且是比较老的版本.打算重新学习一下百度地图的开发. 本次使用的百度地图的版本是 Android SDK v3.0.0 本篇文章主要讲述百度地图 ...

  9. 提高查询速度：SQL Server数据库优化方案

    查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建计算列导致查询不优化. 4.内存不足 ...

  10. SQLite 入门教程（一）基本控制台（终端）命令

    一.基本简介 SQLite 是一个自持的(self-contained).无服务器的.零配置的.事务型的关系型数据库引擎.因为他很小,所以也可以作为嵌入式数据库内建在你的应用程序中.SQLite 被应 ...