CSS的基础语法

基础语法规则

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

selector {
    declaration1; 
    declaration2;
    ... 
    declarationN;
}

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

selector {property: value

例如：

h1{
   color:red;
   font-size:14px;
}

属性大于 1 个之后，属性之间用分号隔开。这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

下面的示意图为您展示了上面这段代码的结构：

QQ截图20161011103552.png

注意：如果值大于 1 个单词，则需要加引号,如下

p{font-family:"sans serif"}

举例：

编辑区右键新建 index.html 和 MyCss.css 两个文件

两个文件分别输入以下代码（brackets 支持代码补全哦）： index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引外部资源 MyCss.css-->
        <link rel="stylesheet" href="MyCss.css" type="text/css">
    </head>
    <body>
        <h1>
            PHP中文网
        </h1>
    </body>
</html>

MyCss.css

h1{
    color: red;font-size: 50px;
}

h1 元素内的文字颜色定义为红色，同时将字体大小设置为 50 像素。

Ctrl+s 保存两个文件，点击 index.html 查看运行效果：

QQ截图20161203142306.png

继续学习

新建文件

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title>  <link rel="stylesheet" href="MyCss.css" type="text/css"> </head> <body> <h1> PHP中文网 </h1> </body> </html>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠