html元素详解

段落元素

开始标签结束标签

content

content是内容 综上所诉,整体是元素 class是属性,相当于他是类别

标记文本

  1. 主标题

  2. 顶层标题

  3. 子标题

  4. 次子标题

list

At Mozilla, we're a global community of

  • technologists
  • thinkers
  • builders

  1. technologists
  2. thinkers
  3. builders

working together…

链接

Mozilla Manifesto

css

选择器(Selector)

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p 元素)。要给不同元素添加样式只需要更改选择器就行了。

不同类型的选择器

  1. 元素选择器
  2. 类选择器 .元素
  3. id原则其:# 一定不要设置简单的id,会导致无效
  4. 属性选择器 img[src]
  5. 伪(Pseudo)类选择器

一切皆盒子

body是块元素,意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值

图片是内联元素,不具备块级元素的一些功能,如果使图像有外边距,我们必须使用 display: block 给予其块级行为。

  1. padding:即内边距,围绕着内容(比如段落)的空间。
  2. border:即边框,紧接着内边距的线。
  3. margin:即外边距,围绕元素外部的空间。

    文档体格式设置

    text-shadow 文本提供阴影

    1. 第一个值设置水平偏移值 —— 即阴影右移的像素数(负值左移)。

    2. 第二个值设置垂直偏移值 —— 即阴影下移的像素数(负值上移)

    3. 第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。

    4. 第四个值设置阴影的基色。 padding 最多四个值,

    5. 四个值排序为上右下左

    6. 三个值排序为上 左右 下

    7. 两个值排序为上下 右左

    8. 单个值为统一


本文章使用limfx的vscode插件快速发布