CSS语法

2019-04-26  本文已影响0人  maskerII
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS语法</title>
    <!--实例1-->
    <!--<style>
        body {background-color: yellow;}
        h1   {font-size: 36pt;}
        h2   {color: blue;}
        p    {margin-left: 50px;}
    </style>-->

    <!--实例2-->
    <!--<style>
        body {background-color: tan;}
        h1 {color: maroon;font-size: 20pt;}
        hr {color: navy;}
        p  {font-size: 11pt;margin-left: 15px;}
        a:link {color: green;}
        a:visited {color: yellow;}
        a:hover {color: black;}
        a:active {color: blue;}

    </style>-->

     <!--实例3-->
     <style>
        p {color: red;text-align: center}
     </style>

</head>
<body>
    <!--实例1-->
    <!--<h1>这个标题的大小为36 pt</h1>-->
    <!--<h2>这个标题设置的颜色为蓝色</h2>-->
    <!--<p>这个段落的左边距为50像素</p>-->

    <!--实例2-->
    <!-- <h1>这是标题</h1>
    <hr>
    <p>你可以看到这个段落是被设定的CSS渲染的</p>
    <p><a href="http://www.runoob.com" target="_blank">这是一个链接</a></p>-->

    <!--实例3-->
    <p>Hello World</p>
    <p>这个段落采用CSS样式化</p>




</body>
</html>

1、CSS 实例

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS 实例
CSS声明总是以分号(;)结束,声明组以大括号({})括起来:
p {color:red;text-align:center;}
为了让CSS可读性更强,你可以每行只描述一个属性:
实例

p
{
color:red;
text-align:center;
}


2、CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
CSS注释以 "/" 开始, 以 "/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

上一篇下一篇

猜你喜欢

热点阅读