JZTXT

HTML+CSS基础知识

发布时间 2023-06-25 18:12:40作者: DuX1ao

1. HTML

1.1 基础标签的使用

2. CSS

CSS (Cascading Style Sheets，层叠样式表）

2.1 HTML中引入CSS的方式

  • 行内式
<div style="background: red"></div>
  • 内嵌式
<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>
  • 外联式
<!-- stylesheet:指示被链接的文档是一个样式表 -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

2.2 基础选择器

  1. 标签选择器

    div {
    color: #f00;
}
    • 通过标签名找到页面中所有对应的标签，无论嵌套关系多深都能找到

  2. 类选择器

    .my-content {
    color: #f00;
}

<p class="my-content">hello</p>
    • 所有标签都有class属性
    • 类名可以以数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
    • 一个标签可以有多个类名，类名之间以空格隔开
    • 类名可以重复，一个类选择器可以同时选中多个标签

  3. id选择器

    #my-content {
    color: #f00;
}

<div id="my-content">hello</div>
    • 所有标签都有id属性
    • id属性值在一个页面中唯一
    • 一个标签只能有一个id属性值
    • 一个id选择器只能选中一个标签

  4. 通配符选择器

    * {
    color: #f00;
}

2.3 文字基本样式

  • font-size：字体大小

    • 单位（px）需要设置，否则无效；谷歌浏览器默认文字大小是16px

  • font-weight：字体粗细

    • 取值：normal / 400；bold / 700 ;100~900的纯整数
    • 并非所有字体都提供了九种粗细，所以部分取值页面中无变化

  • font-style：字体样式

    • normal、italic（倾斜）

  • font-family：字体类型

    • 衬线字体（serif）：粗细不均，首尾有笔锋，用于报刊书籍
    • 无衬线字体（sans-serif）：粗细均匀，首尾无装饰，多用于网页
    • 等宽字体（monospace）：每个字母或文字的宽度相等，用于程序代码编写
    • 可以有多个值以逗号隔开，渲染时从左往右顺序查找，电脑安装有该字体就渲染，没有向后查找；如果都不支持，显示最后字体系列的字体
    • Windows默认字体是微软雅黑，MacOS默认是苹方

层叠性：如果给一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

	</style>   
        div {
            color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 显示为blue -->
    <div>海尔洗衣机</div>		
</body>

font复合属性：font：[style] [weight] size family；

可以省略style和weight、省略后相当于设置了默认值

  • text-indent：文本缩进

    • 数字+px
    • 数字+em（推荐：1em=当前标签的font-size大小）

  • text-align：文本水平对齐方式

    • left、center、right
    • 可以让文本、span标签、a标签、input标签、img标签水平居中，需要在这些元素的父元素设置

  • text-decoration：文本修饰

    • underline、line-through、overline、none（下划线、删除线、上划线、无装饰线）
    • 开发中常用text-decoration：none；清除a标签默认的下划线

  • line-height：行高

    • 数字+px
    • 倍数（当前font-size的倍数）

    font复合属性：font：[style] [weight] size/line-height family；

    字号和行高之间用 / 隔开

line-height：1 取消上下间距，网页精准布局

让单行文本垂直居中可以设置line-height：文字父元素高度

vscode代码格式化：Shift+alt+f

  • 选择器进阶（后代、子代）

  • 背景

  • emmet语法（vscode）

  • 块级元素

  • 行级元素

  • 行内块元素

  • CSS层叠和继承

  • 选择器优先级

  • CSS盒子模型

  • 浮动

  • 定位

  • 字体图标

  • 平面转换

  • 空间转换

  • 动画

  • viewport

  • flex

  • 移动适配（flexible.js）

    • rem
      • Less语法
    • vw / vh

  • 媒体查询

    • max-min-width

  • bootstrap