一.CSS(层叠样式表)的三种使用方法
1. 内联样式表
- 采用style属性。范围只针对此标签适用。
- 该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
又称行内样式，将 CSS 样式直接嵌入到 HTML 标签中。
除特殊情况使用外，不建议使用内嵌样式表。
案例：
<p style="background-color:red; text-align:center;">内嵌样式</p>
2. 内嵌样式表
- 在HTML文档中的<head标签中使用<style标签标记，，被称为内嵌式。
- 在head标签中加入<style标签，对多个标签进行统一修改，范围针对此页面。
- 该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
案例：
<head>
<style>
a {/*标签选择器*/
color:#FF0000;
}
#img1 {/*id选择器*/
width:800px;
}
.img2 {/*类选择器*/
width:800px;
}
</style>
</head>
3. 外联样式表
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。
案例：
<head>
...
<link type="text/css" rel="stylesheet" href="css2.css"/>
...
</head>
二.CSS选择器
1. 标签选择器
作用范围：使用指定标签的所有元素
案列：
<head>
<style>
a {/*标签选择器*/
color:#FF0000;
}
</style>
</head>
<body>
<a herf="#">这是一段超链接</a>
</body>
2. 类选择器
作用范围：指定为同一类的所有元素（可以是不同的标签哦）
<head>
<style>
.img2 {/*类选择器*/
width:800px;
}
</style>
</head>
<body>
<img class="img2" src="1.jpr"/>
<img class="img2" src="2.jpg"/>
<p class="img2">我是段落</p>
</body>
3. ID选择器
作用范围：指定为同一id的所有标签
案例：
<head>
#img1 {/*id选择器*/
width:800px;
}
</style>
</head>
<body>
<img id="img1" src="3.jpg"/>
<p id="img1">我也是一个段落</p>
</body>
三.盒子模型
从一个元素的内容区往外走，首先会踫到padding，然后是border，最后是margin，这3个东东就像是3层盒子套住了内容区，我们把它称为盒模型 (Box Model)。 -bailey’s Blog
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
示例：
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
- 若为元素设置一个大于 0 的margin-left值，元素会连同边框一起向右偏移，而设置一个大于 0 的padding-left值，元素内容区会相对左边框向右偏移。同样，设置大于 0 的margin-top和padding-top可令元素向下偏移。
- margin和padding可以设置为负值(小于 0 的值)，此时元素将向左/上偏移. 有时设置为负值可有意外惊喜~
对于两个上下相邻的元素，会产生margin融合，左右则不会
水平放置时，相邻的两个DIV间距为30px,即左边DIV的margin-right(10px) + 右边DIV的margin-left(20px) （求和）
.
垂直放置时，相邻的两个DIV间距为20px，不再是margin求和，而是取较大值。即上面DIV的margin-bottom和下面DIV的margin-top两个值中的较大值（20px）
学习笔记，如有错误欢迎指正！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
