HTML+css 第三课

一.插入样式表方式

1.1 内嵌式

    在doc的head标签中的style标签写的一些样式，成为内嵌式样式表

 

注意点：内嵌式只能写在HEAD标签里面，在其它位置是不规范的写法

1.2 行内式/内联式

 在dom中给它一个style属性值

优先级：行内式优先级最高

1.3 外链式

作用：链接外部样式表,它可以增强文档可读性

   

二.子代选择器

作用：可以选择到自己的子元素。

.div1>div>div>p{...}

2.1 DOM父子关系

   

         

   

三、css部分属性

3.1 清除默认属性

*{margin:0;padding:0;}

margin：外边距

作用设置外边距

top right bottom left  上 右 下 左

margin-left:10px;/*左边距为10px*/

margin:10px;/*上下左右都为10px*/

margin:10px 20px;/*上下 为10px 左右为20px*/

padding：内边距

作用：设置内边距，使内容与边有一定的距离

top right bottom left  上 右 下 左

padding -left:10px;/*左内边距为10px*/

padding :10px;/*上下左右都为10px*/

padding :10px 20px;/*上下 为10px 左右为20px*/

3.2  宽高

.div1{

width: 200px;/*宽 */

height: 300px; /*高 */

background-color: red;

}

3.3 行内和块级元素转换

display: inline; /* 行内元素 */

display: block; /* 块级元素 */

display: inline-block;/* 行内块级元素 */

3.4 文本对齐

text-align:center;/*文本居中*/

text-align:left;/*文本居左*/

text-align:right;/*文本居右*/

3.5 相对定位和绝对定定位

3.6 背景属性

3.6.1 背景颜色

 3.6.2 背景图片

3.6.3 背景大小

3.6.4 背景重复

3.6.5 背景定位

3.7 堆叠顺序

3.8 内外边距