zoukankan      html  css  js  c++  java
  • 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选择器和伪类选择器,其他选择器的方式都可以用上面这几种方式来搞定。

  • 相关阅读:
    POJ 3672 水题......
    POJ 3279 枚举?
    STL
    241. Different Ways to Add Parentheses
    282. Expression Add Operators
    169. Majority Element
    Weekly Contest 121
    927. Three Equal Parts
    910. Smallest Range II
    921. Minimum Add to Make Parentheses Valid
  • 原文地址:https://www.cnblogs.com/xinxing/p/3857649.html
Copyright © 2011-2022 走看看