一.插入样式表方式
1.1 内嵌式
在doc的head标签中的style标签写的一些样式，成为内嵌式样式表
<head>
<style> </style>
</head>
注意点：内嵌式只能写在HEAD标签里面，在其它位置是不规范的写法
1.2 行内式/内联式
在dom中给它一个style属性值
<div style="color: #0ff;"></div>
优先级：行内式优先级最高
1.3 外链式
作用：链接外部样式表,它可以增强文档可读性
<head>
<link rel="stylesheet" href="day03.css">
</head>
二.子代选择器
作用：可以选择到自己的子元素。
.div1>div>div>p{...}
2.1 DOM父子关系
<div>
<a>
<span></span>
</a>
</div>
三、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 内外边距
网友评论