CSS简单入门

<!--
    7.2.1 CSS基础语法

    每一条样式规则：选择符、属性、属性值
        selector:可以采用多种形式，可以为文档中的HTML标记，也可以是XML文档中的标记
        property:是选择符指定的标记所包含的属性
        value:指定了属性的值

-->
selector{property:value}
<!--
    7.3.3 链接样式

    链接样式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过
    <link>标记链接到页面中。该链接语句必须在<head>标记区

    <link>标签属性：
        rel：表示链接到样式表，其值为stylesheet
        type：表示样式表类型为CSS样式表
        href：指定了CSS样式表的路径
-->
<!--1.css-->
h1{text-align:center;}
p{font-weight:29px;text-align:center;font-style:italic;}

<!--test1.html-->
<html>
    <head>
        <title>test1</title>
        <link rel="stylesheet" type="text/css" href="1.css">
    </head>

    <body>
        <h1>学习</h1>
        <p>此段落使用链接样式修饰</p>
    </body>
</html>


<!--
    7.3.4 导入样式

    采用导入样式是在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，
    类似与内嵌效果。而链接样式则是在HTML标记需要样式风格时才以链接方式引入。
-->

<!--test2.html-->
<html>
<head>
    <title>test2</title>
    <style type="text/css">
        <!--
            @import "1.css"
        -->
    </style>
</head>

<body>
    <h1>学习</h1>
    <p>此段落使用链接样式修饰</p>
</body>
</html>

<!--
    7.3.4 优先级问题

    优先级别由大到校：行内样式、内嵌样式、链接样式、导入样式
-->

<!--
    7.4.1 标记选择器

    7.4.2 类选择器
        .rd{color:red}
        .se{font-size:3px}

    7.4.3 ID选择器
        #fontstyle
        {
            color:red,
            font-weight:bold;
            font-size:large
        }

    ID选择器定义的是某一个特定的HTML标记，一个网页只能有一个标记使用某一ID的属性值。

    类选择器与ID选择器区别：
        1.类选择器可以给任意数量的标记定义样式，但是ID选择器在页面的标记中只能使用一次
        2.ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器发生冲突时，优先使用
            ID选择器定义的样式。

    不懂：
        将ID选择器用户多个标记是错误的，因为每个标记定义的ID不只是CSS可以调用，JavaScript
        等脚本语言也可以调用。如果一个HTML中有两个相同的id的标记，那么就会导致JavaScript
        在查找id时出错。
            ——标记着，这个后面可定会有讲解的

    7.4.4 全局选择器

    如果向要一个页面中所有HTML标记使用同一种样式，可以使用全局选择器，这样所有的HTML标记都
    会呈现该样式。
        *{margin:0;padding:0;}

    7.4.5 组合选择器

    将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器。即将标记选择器、类选择器
    和ID选择器组合起来使用。一般的组合方式是标记选择器和类选择器组合，或标记选择器和ID选择器
    进行组合。
        tagName.class{property:value}

        ——这一部分还有很多细节没理清楚
-->
<!--test2.html-->
<html>
<head>
    <title>test3</title>
    <style>
        p{
            color:red;
        }
        p.firstPar{
            color:blue;
        }
        .firstPar{
            color: green;
        }
    </style>
</head>

<body>
    <p>这是普通段落，显示为红色</p>
    <p class="firstPar">这是组合段落，显示为蓝色</p>
    <h1 class="firstPar">这是一个标题，显示为绿色</h1>
</body>
</html>

<!--
    7.4.6 继承选择器

    继承选择器的规则是：子标记在没有定义的情况下所有的样式是继承父标记的；当子标记
    重新定义父标记已经定义过的声明时，子标记会执行后面的声明，其中与父标记不冲突的
    地方仍然沿用父标记的声明。

    每个HTML都可以被看作是一个文档树，文档树的根部就是<html>标签，而<head><body>标记
    就是其子标记。在<head><body>里的其他标记就是<html>标记的孙子标记，整个HTML就呈现
    一种祖先和子孙的树状关系。CSS的继承是指子孙标记继承祖先标记的某些属性。

    7.4.7 伪类
-->

<!--

-->
From《精通HTML5+CSS3+JavaScript网页设计》
猜你喜欢
