D1-前端学习笔记HTML和CSS简单了解

理论总解

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;/* 块元素独占一行 */