• 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选择器和伪类选择器,其它选择器的方式都能够用上面这几种方式来搞定。

  • 相关阅读:
    主成分分析法
    K-means算法
    高斯混合模型
    data structure test
    八皇后问题求解
    商品管理系统课程设计
    哈佛商学院20部必看电影
    usaco1.1
    Visual Studio 2012 出现关于ActivityLog.xml错误的解决方案
    2012蓝桥杯决赛题
  • 原文地址:https://www.cnblogs.com/lytwajue/p/6946261.html
Copyright © 2020-2023  润新知