理论总解
HTML元素剖析
1. 元素：开始标签、结束标签和内容组成
2. 开始标签&结束标记
3. 内容
4. 属性 包含属性名和属性值 `class = "note"`
5. 嵌套元素 可以将元素放在其他元素之中
6. 空元素 `<img src="" alt="">`
标记文本标签
1. 标题 `<h1></h1>`
2. 段落`<p></p>`
3. 列表 `<ul></ul>无序列表 ` `<ol></ol>有序列表` `<li></li>`
4. 链接 `<a href="">` 单标签
CSS规则集剖析
1. 选择器
2. 声明
3. 属性 属性值
`/*`**语法**
每个规则集都必须用花括号括起来**{}**每个声明中，用**:** 将属性和值隔开每个规则集中，必须使用分号**;**将每个声明与下一个声明分开 **/
p {
color: red;
width: 500px;
border: 1px solid black;
}
### 不同的选择器
1. 元素选择器 `p <p>`
2. ID选择器 `#my-id`选择`<p id="my-id">`或 `<a id="my-id">`
3. 类选择器
4. 属性选择器 `img[src]`选择 `<img src="myimage.png">`但不 选择`<img>`
5. 伪类选择器`a:hover`
/* 注释区域 */
h1 {
font-size: 60px;
text-align: center;/* 文本垂直居中 */
}
p, li {
font-size: 16px;
line-height: 2;/* 设置行高 */
letter-spacing: 1px;/* 字母间距 */
}
### 盒子模型
- `padding`，内容周围的空间。在下面的示例中，它是段落文本周围的空间。
- `border`，就在填充之外的实线。
- `margin`，边界外侧的空间。
### 元素规则集基本设置模型
body {
width: ; height: ;
top: ; right: ; bottom: ; left: ;
margin: 0 auto;/* 可以设置上下左右值 内容距离页面的边距 */
background-color: #FF9500; background: url="";/* 设置背景样式 */
padding: 0 20px 20px 20px;/* 内部填充 */
border: 5px solid black;/* 边框设置 */
}
/* 补充样式 */
text-shadow: 水平偏移量 垂直偏移量 模糊半径 阴影基本颜色；/* 设置阴影 */
display:block;/* 块元素独占一行 */
网友评论