2014年辛星解读css第二节

第一节我们简介了一下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选择器和伪类选择器,其他选择器的方式都可以用上面这几种方式来搞定。

时间: 2024-10-09 07:44:55

2014年辛星解读css第二节的相关文章

2014年辛星解读css第一节

CSS是Cascading Style Sheets的缩写.即层叠样式表,它用于表现HTML的样式,即HTML仅仅是去写该网页有哪些内容,至于怎样去表现它们,由CSS去定制. *************时代的呼唤************* 1.在之前,我们直接把网页的格式写到HTML中去,这样会造成格式的混乱,并且难以阅读和改动,只是这不是最大的问题,最大的问题在于我们想给网页换一个表达样式的时候,须要改动的地方不仅非常多关键是非常零散,须要花费非常大的力气去定位这些样式. 2.于是,把网页内容

2014年辛星解读CSS第八节 使用背景图片

这应该是系统CSS的教程的最后一节了,为什么呢,因为到这一节,我感觉基础知识就已经讲完了,接下来的就是无穷的实战,而实战是很难用知识去讲出来的,靠的是积累,拼的是经验,这些都不是讲出来的. 好,我们下面来说一下用CSS添加背景图片的方式把,它在background属性中指定,可以用url("图片路径")的方式来指定背景图片,如果是repeat,则图片在横向和纵向上平铺,如果是no-repeat,则背景图像不会平铺,只显示一次,如果是repeat-x,那么就在水平方向平铺,如果是repe

2014年度辛星解读css第四节

接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. **************超链接************* 1.我们讲伪类的时候已经讲到了,一个超链接能够有link(正常状态).visited(已经訪问过).hover(获得鼠标焦点)active(被鼠标点击中)这样四个状态,我们前面也分别设置过不同的颜色了,使用选择器:伪类的形式. 2.我们还能够使用background

2014年辛星解读css第五节

本小节我们解说css中的"盒模型".即"box model",它通经常使用于在布局的时候使用,这个"盒模型"也有人成为"框模型".事实上原理都一样,它的大致原理是这种,它把一个HTML元素分为了这么几个部分:边距.边框.填充和实际内容,我们通过设置这几个内容能够设置它的一些现实形式. *************盒模型***************** 1.盒模型从内向外依次是实际内容(Content).内边距(Padding)

2014年辛星解读css第六节

这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千里之行.始于足下,我们開始吧. ************显示方式************* 1.有时候我们会设置一个元素的显示方式.比方我们在做导航条的时候,就会使用display:inline来使它们成为内联的样式. 2.以下先不说这个display,先说一下visibility属性把,它能够设置

2014年辛星解读css第三节

第二节我们讲述的几乎全是CSS的选择器,那么下面这一节我们来讲一下CSS的颜色和文本的一些东西,虽然我对调色不大敏感,但是对于颜色还是比较感兴趣的. *********CSS中的颜色*********** 1.说到颜色,不得不一下牛顿,简直是伟大,光的色散,非常大的突破,可以说它一个人完成了几代人没有完成的工作. 2.下面说一下三原色:即红绿蓝,即RGB,我们在CSS中定义一个颜色可以用这种三原色的方式来自己配色,还可以用一些比如red,green等这种比较经典的颜色. 3.我们要配色的话,首先

2014年辛星解读css第七节

本小节我们研究浮动的问题,浮动使得布局更加灵活,虽然我们前面也有关于布局的讲解,但是它们提供的内容还是太有限了,要想获得更强大的布局,还必须使用浮动才能完成更灵活的布局. ***********浮动************ 1.如果我们让某个元素浮动,那么该元素之前的元素将不会受到任何影响,如果该元素是左浮动,那么它下面的元素会自动跑到它的右边,如果该元素右浮动,那么它下面的元素会自动跑到它的左边. 2.如果我们把几个相邻的元素放到一起,如果有空间,则它们会彼此挨着. 3.浮动可以清楚,我们可以

2014年辛星解读Javascript之DOM快速入门

在Javascript的知识中,有一个所谓的DOM,即文档对象模型,我们可以通过它来访问HTML文档的元素,当网页被加载的时候,浏览器会去创建DOM,有了这个DOM,我们可以使用Javascript去改变页面中HTML元素和属性,改变CSS样式,能够对页面中的事件作出响应. 首先就是查找一个HTML元素,我们可以通过三种方式来做到,即通过id.标签名和类名,通过id是使用getElementById方法,它是doucument的一个方法,通过标签名则可以使用getElementsByTagNam

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

关于DOM,我们了解了可以用DOM操纵HTML的一些属性和样式,还可以为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代码示例是肯定少不了的. 不过在使用DOM动态操纵HTML元素之前,我们还是先了解一下DOM树,下面是我从网上找的一个DOM树的图片,它的截图如下: 如果大家学习过"树"这种数据结构,就会很好理解,一个父节点可以包含N个子节点,这些子节点可能是div.p等标签,也可以是属性,还可以是中间的文