第一节我们简单介绍了一下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年度辛星解读css第四节

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

  3. 2014年辛星解读css第五节

    本小节我们解说css中的"盒模型".即"box model",它通经常使用于在布局的时候使用,这个"盒模型"也有人成为"框模型&q ...

  4. 2014年辛星解读css第六节

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

  5. 2014年辛星解读css第三节

    第二节我们讲述的差点儿全是CSS的选择器,那么以下这一节我们来讲一下CSS的颜色和文本的一些东西,尽管我对调色不大敏感.可是对于颜色还是比較感兴趣的. *********CSS中的颜色******** ...

  6. 2014年辛星解读Javascript之DOM之冒泡和捕获

    上篇博客提到了Javascript事件绑定函数的三个參数.第一个是一个event.第二个是一个function.第三个是一个布尔变量.它用于指定事件传递的顺序,分为冒泡和捕获两种方式,接下来我们将揭开 ...

  7. 2014年辛星解读Javascript之DOM高速入门

    在Javascript的知识中,有一个所谓的DOM.即文档对象模型,我们能够通过它来訪问HTML文档的元素,当网页被载入的时候,浏览器会去创建DOM,有了这个DOM.我们能够使用Javascript去 ...

  8. 2014年辛星解读Javascript之用DOM动态操纵HTML元�

    关于DOM,我们了解了能够用DOM操纵HTML的一些属性和样式,还能够为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代 ...

  9. 2014年辛星解读Javascript之DOM之事件及其绑定

    我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...

随机推荐

  1. mysql和java的时间对应关系

    引用:http://blog.csdn.net/xinghuo0007/article/details/51500923 MySQL(版本:5.1.50)的时间日期类型如下: datetime 8by ...

  2. [Android]异常7-Error:Configuration with name 'default' not found.

    背景:使用SVN更新代码,运行出现 异常原因: 可能一>缺少Modules 解决办法有: 解决一>Android Studio切换为Project,settings.gradle中引用和现 ...

  3. JS——stye属性

    1.样式少的时候使用 this.parentNode.style.backgroundColor="yellow"; 2.style是对象 console.log(box.styl ...

  4. 六时车主 App iOS隐私政策

    本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐私权政策另 ...

  5. vim之补全2(完全个人定制版)

    关于补全的方面要说的的确很多, 这里选择分为两个章叙述. 如果你想学vim, 你需要有很强的耐心, 如果你想锻炼这种耐心, 你可以试着先看完我之前的文章. 好了, 下面继续我们的vim补全吧. vim ...

  6. 15、Scala隐式转换和隐式参数

    1.隐式转换 2.使用隐式转换加强现有类型 3.隐式转换函数的作用域与导入 4.隐式转换发生时机 5.隐式参数 1.隐式转换 要实现隐式转换,只要程序可见的范围内定义隐式转换函数即可.Scala会自动 ...

  7. MaskRCNN路标：TensorFlow版本用于抠图

    MaskRCNN用于检测路标,作为更详细的目标检测,用以得到更精准的额路标位置,路标的几何中心点,用于构建更为精准的拓扑地图,减少构图误差. 抠图工具已经完成,把框抠出来,用0值表示背景. pytho ...

  8. 04 学习java养成良好的写作习惯

    1, 驼峰命名法 首字母大写 2, 写的时候大小中括号都补全,不忘记分号 不要都放在一行上 3, 缩进对其,tab键 4, 严格要求自己,养成良好的写作风格 5, javadoc可以将文档注释,直接生 ...

  9. eclipse常用设置之自动格式化

    Eclipse 保存文件时自动格式化代码   很多同学不知道Eclipse有个很有用的功能,就是自动格式源代码的功能,一般大家都是直接Ctrl+Shift+F手动格式化,多浪费时间. 其实Eclips ...

  10. 控制台输出(System.out.printf)的使用

    一．  介绍 System.out.printf 与 C语言中的 printf 使用方法类似,可以向控制台(Console) 输出指定格式的内容.使用  System.out.printf 的方法比使 ...