前端零星知识

css 与 html 的三种结合方式

1	<p style="color: #5cb85c;">hello world</p>

在页面的 head 标签中，书写一个 style 标签。在style标签中书写 css 代码。

<head>
    <style type="text/css">
        p {
            color: #5cb85c;
        }
    </style>
</head>
<p>helo world</p>

在页面 head 标签中填写 link 标签

1
2
3

<head>
    <link type="text/css" rel="stylesheet" href="p.css" />
</head>

选择器 {
    属性键: 属性值;
    属性键: 属性值1 属性值2;
}

选择所有标签
语法:

1
2
3

标签名 {
    属性键: 属性值;   
}

1	<p id="first">hello world</p>

ID 属性指确保唯一

1
2
3

#first {
    属性键: 属性值;
}

class 属性值可以重复。

. 类选择器
.first {
    属性键: 属性值;
}

1
2
3

<p class="first">hello world</p>
<p>hello world</p>
<h1 class="first">知识就是力量</h1>

同时选择多个

1
2
3

.first,#some_id {
    属性键: 属性值;
}

1
2
3

选择器1,选择器2 {
    属性键: 属性值;
}

选择的是某个标签的某种状态，比如 a 标签，没点和点击后的颜色是不一样的。

常见状态：

a 标签为点击时的状态
a:link {
    color: red;
}
a 标签点击后的状态
a:visited {
    color: green;
}

一切皆盒子。房子里面有桌子，桌子上有电脑，电脑有键盘，css 中盒子模型是指页面中标签的嵌套，解决页面布局问题。

占一行。

比如：div，p，ol

占行内的一部分，不能嵌套块级标签。

比如：span font a

一般布局都使用 div 和 span ，其他块级标签和行内标签都有自己的作用。

1个属性时: 4个方向.
2个属性时: 第一个属性决定上下 第2个决定左右
3个属性时: 上   左右  下
4个属性时: 上 右 下 左(顺时针)

padding: 10px 30px 50px 80px; 这种写法叫做复合属性，参数多态化

JS = ECMAScript + DOM + BOM