前端学习自学笔记：day04

今天是第四天的笔记,主要是HTML和CSS的,希望大家支持~

在此之前先为大家显示下前端工程师的路线图:

第四天的笔记:HTML AND CSS:

第一学时：

ID选择器

例：#cat-photo{

background-color:green;

}

HTML元素布局的重要属性：

padding(内边距)、margin(外边距)、border（边框）:边框样式：solid（固体）

padding,例:padding:10px;

元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。

margin:20px;

注意：如果你将一个元素的 margin 设置为负值，元素将会变大。例：margin:-15px;

padding:有四个方向控制元素：padding-top、padding-right、padding-bottom、padding-left.

padding元素也可以把四个方向聚合起来，例：padding：10px 20px 10px 20px,排列方式为：顶部、右侧、底部、左侧

margin:有四个方向控制元素：margin-top、margin-right、margin-bottom、padding-left

margin元素也可以把四个方向聚合起来，例：margin：10px 20px 10px 20px,排列方式为：顶部、右侧、底部、左侧

-复习：body元素：HTML文本写入的地方。

注意：可以像对其他 HTML 元素一样对 body 元素应用样式，并且所有其他元素将继承 body 元素的样式。

class 会 override（覆盖） body 元素的 color: green; CSS 属性。

例：

.pink-text{

color:pink;

}

body {

background-color: black;

font-family: Monospace;

color: green;

}

Hello World!

结果会变成粉色。

如果发生样式冲突，则下面的CSS样式会覆盖掉上面的CSS样式。

例：

body {

background-color: black;

font-family: Monospace;

color: green;

}

.pink-text {

color: pink;

}

.blue-text{

color:blue;

}

Hello World!

结果会变成蓝色。

如果发生样式冲突，则用ID选择器的CSS样式会覆盖用类选择器的CSS样式，因为ID选择器比类选择器更高级。

例：

body {

background-color: black;

font-family: Monospace;

color: green;

}

.pink-text {

color: pink;

}

.blue-text {

color: blue;

}

#orange-text{

color:orange;

}

Hello World!

结果会变成橙色。

如果发生样式冲突，则用行内样式的CSS样式会覆盖用ID选择器的CSS样式，因为行内样式比ID选择器更高级。

例：

body {

background-color: black;

font-family: Monospace;

color: green;

}

#orange-text {

color: orange;

}

.pink-text {

color: pink;

}

.blue-text {

color: blue;

}

Hello World!

结果是为白色。

谢谢大家观看~