前端学习自学笔记: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!

结果是为白色。

谢谢大家观看~

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171224A031T100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券