HTML补充+CSS基础

头像
宿命丶
    阅读 4 分钟
    2

    • 文件的编码格式 - UTF-8

    • HTML页面的编码格式 - UTF-8

      • <meta charset="UTF-8">

      • 设置当前HTML页面的编码格式

      • 在浏览器运行当前HTML页面时，告诉浏览器当前的编码格式

    • 字符集

      • 概念 - 存放所使用的所有的字符（汉字）

        • 分类

          • ANSI - 美国

          • ISO-8859-1 - 欧洲

          • GBK - 中国

            • GB2312

          • Unicode - 万国码

            • UTF-8 - 主要使用

            • UTF-16

        • 计算机的存储方式

          • 利用二进制方式 - 1和0

          • 中国

            • 存储 - 将汉字 "中国" 转换成 二进制 进行存储 - GBK

            • 读取 - 将 二进制 转换成 "中国" 进行显示 - UTF-8

    • CSS内容:

      • 注意

        • 只编写 HTML 页面时

          • 提供的不同的标签，在浏览器运行时 - 不同的样式（效果）

            • 在不同的浏览器中，相同标签显示的样式（效果）不同

          • 浏览器对 HTML 页面的标签进行解析

            • 不同的浏览器，解析方式有差异 - 最终显示的样式不同

        • 在不同浏览器中，样式不同的问题

          • 通过 CSS 方式进行解决

        • 第一个浏览器的兼容问题

          • 在不同浏览器中，显示的样式不同

      • 概念

        • CSS全称为 Cascading Style Sheets，译为 层叠样式表

        • 作用 - 设置 HTML 页面中标签在浏览器中的显示效果

        • 特点 - 实现了 HTML 页面的 结构与样式 的分离

          • 结构 - 通过 HTML 的标签完成

          • 样式 - 通过 CSS 内容完成

        • 版本

          • 96 年推出第一版本

          • 98 年推出第二版本

          • 目前是第三版本 - 最新版本
            *如何使用 CSS

        • 第一种方式 - 内联样式 - 优先级别更高

          • 通过设置 HTML 标签的标准属性 style 完成 CSS 样式

          • 问题 - HTML 结构与 CSS 样式的耦合度很高

        • 第二种方式 - 内联样式

          • 通过设置 HTML 标签的标准属性 class 完成 CSS 样式进行关联

          • 通过 <head> 标签中，定义 <style> 标签编写 CSS 样式内容
            .class名称 {

              样式名称 : 样式的值 ;

            }

        • 第三种方式 - 外联样式

          • CSS 样式支持独立文件的 - 扩展名为 ".css"

            • 将所有关于 CSS 样式的内容，编写在独立的 CSS 文件中

          • HTML 页面中，通过 <head> 标签中的 <link> 标签完成关联
            <link rel="stylesheet" href="CSS文件路径">

      • CSS 语法

        • CSS 的注释

          • / CSS的注释内容 /

        • CSS 语法

          • 注意 - CSS 本身不规定是否必须换行 - 允许编写成一行

            • CSS 代码的可读性变差

      • CSS 的选择器

        • 元素选择器
          标签名 {

          样式名称 : 样式值;

          }

        • 类选择器
          .class名称 {

          样式名称 : 样式值;

          }

        • ID选择器
          #id属性值 {

          样式名称 : 样式值;

          }

        • 通配符选择器

          • {

            样式名称 : 样式值;

            }

        • 优先级别
          style内联样式 -> ID选择器 -> 类选择器 -> 元素选择器 -> 通配符选择器

          • !important - 设置当前选择器的级别最高

            • 并不建议使用

        • 组合选择器

          • 并集效果 - 同时为多个标签设置相同的样式

            • 用法 - 多个选择器并列使用

            • 格式 - 选择器之间使用逗号(,)隔开

          • 交集效果 - 通过选择器结果相交

            • 用法 - 多个选择器并列使用

            • 格式 - 选择器之间没有任何分隔

        • 注意

          • 相同级别的选择器使用了多个，最后一次的选择器有效(覆盖效果)

      • HTML设置默认样式

        • 使用通配符选择器方式

          • 问题 - 性能较低

        • 为 <body> 或 <html> 设置样式

          • CSS 样式是否具有继承性

          • HTML 标签是否具有特殊性

        • 作用 - 在不同浏览器中，显示的效果相同

      • 设置颜色

        • 使用 英文单词 进行设置

          • 问题

            • 必须记住对应单词和颜色效果

            • 英文单词表示颜色，数量有限的

        • RGB方式

          • 概念

            • 什么是 RGB? Red(红) Green(绿) Blue(蓝)

            • 红绿蓝被称之为叫做三原色

          • 语法格式
            rgb(红,绿,蓝)

            • 每个颜色值的范围 - 0 ~ 255 - 推荐使用这种

            • 每个颜色值的范围 - 0% ~ 100%

          • 常见颜色

            • 黑色 - rgb(0,0,0)

            • 白色 - rgb(255,255,255)

            • 红色 - rgb(255,0,0)

            • 绿色 - rgb(0,255,0)

            • 蓝色 - rgb(0,0,255)

            • 黄色 - rgb(255,255,0)

            • 青色 - rgb(0,255,255)

        • RGB的十六进制表示

          • 语法格式 - 红绿蓝
            # + 红 + 绿 + 蓝

            • 红绿蓝三个颜色分别使用 两位 表示

            • 值的范围 - 00 ~ ff

        • 通过 JavaScript 控制颜色的变化

          • 使用 RGB 的十进制表示方式

      • 进制

        • 二进制

        • 八进制

        • 十进制 - 每十进一
          0,1,2,3,4,5,6,7,8,9,

      10,11,12,...

      • 十六进制 - 每十六进一
        0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

      10,11,12,13,14,15,16,17,18,19,1a,1b..,1f

      • 块级元素与行内元素

        • 块级元素(block)

          • 特点 - 每个块级元素占页面的整个宽度

          • 作用 - 用于完成页面内的布局

          • 代表 - <div> - 无语义化

        • 内联元素(inline)

          • 特点 - 每个内联元素占当前文本的宽度

          • 作用 - 用于设置指定文本的样式

          • 代表 - <span> - 无语义化

      • 关于页面布局

        • 以<table>标签完成页面布局 - 微软的bing搜索

        • 以<div>标签完成页面布局 - bootstrap官网

          • 概念参考了<table>表格 - 行和列

        • 发展历史

          • 第一阶段 - 使用<table>布局

          • 第二阶段 - 使用<div>布局

            • 使用<div>替换<table>

          • 第三阶段 - 使用新的语义化块级元素布局

            • 使用新语义化标签替换<div>

      • CSS 中使用的单位

        • 固定值

          • 像素值(px) - 页面的尺寸和分辨率是否是固定的: 固定值

        • 相对值

          • 百分值(%) - 相对于父级元素

            • 在实际开发中，多用于宽度(或高度)的设置

          • (em) - 相对于HTML页面的默认样式

            • 在实际开发中，多用于字体大小的设置

      • CSS 的选择器

        • 根据 HTML 标签结构的三层关系

          • 祖先元素与后代元素

          • 父元素与子元素

          • 兄弟(相邻)元素

        • 选择器 - 优先级别相同，先后顺序有关

          • 祖先与后代选择器
            祖先元素 后代元素

          • 父与子选择器
            父元素 > 子元素

          • 相邻选择器
            前一个元素 + 后一个元素

      • 伪类选择器

        • 概念

          • 设置的样式并不是页面运行马上有效果的

          • 而是为将来某一个时刻使用时设置的样式

        • 作用 - 主要应用于 < a> 标签

        • 分类

          • :link - 未被访问

            • 注意 - 只能作用于< a>标签

          • :visited - 已被访问

            • 注意 - 只能作用于< a>标签

          • :hover - 鼠标悬停

            • 不仅可以作用于< a>标签，也可以作用于其他标签

          • :active - 已被激活

            • 不仅可以作用于< a>标签，也可以作用于其他标签

          • :focus - 获取焦点

      • 盒子模型

        • 概念

          • 盒子模型，也叫做框模型

          • 作用 - 简化 HTML 页面的布局

        • HTML 页面的布局

          • 利用表格中的行和列的概念

          • 利用盒子模型的概念

        • 具有的概念

          • 内容区（content） - 定义显示在页面中的元素

          • 内边距（padding） - 显示的元素到盒子边框的距离

          • 边框（border） - 盒子的边框的宽度

          • 外边距（margin） - 盒子之间的距离

        • 元素的宽度和高度

          • width - 设置元素的宽度

          • height - 设置元素的高度

        • 边框

          • 类别

            • border-width - 边框的宽度

            • border-color - 边框的颜色

            • border-style - 边框的样式

          • 边框的宽度

            • 简写设置

              • border-width

              • 只设置一个值 - 同时设置四个方向的边框

              • 设置两个值 - 第一个值设置上下边框，第二个设置左右边框

              • 设置三个值 - 第一个值设置上边框，第二个设置左右边框，第三个设置下边框

              • 设置四个值 - 分别设置上、右、下和左四个方向

            • 分别提供

              • border-top-width - 设置上边框

              • border-right-width - 设置右边框

              • border-bottom-width - 设置下边框

              • border-left-width - 设置左边框

          • 边框的颜色

            • 与边框的宽度类似

          • 边框的样式

            • 与边框的宽度类似

            • 常用边框样式

              • solid - 实线

              • dashed - 虚线

              • dotted - 点状虚线

              • double - 双实线

        • 内边距

          • padding - 同时设置四个方向的内边距

          • 使用方式 - 参考边框的使用方式

          • 注意

            • 实际宽度 = width + padding + border

            • 实际高度 = height + padding + border

        • 外边距

          • 设置上和左外边距

            • 作用 - 改变当前标签所显示的相对父级元素位置

            • 实际 - 父子关系

              • x轴(水平方向) - 父元素的左内边距+子元素的左外边距

              • y轴(垂直方向) - 父元素的上内边距+子元素的上外边距

        • 设置右和下外边距

          • 作用 - 改变当前标签的下一个兄弟元素的标签显示位置

          • 注意 - 兄弟关系

            • 下一个兄弟元素的显示位置不会叠加

        • 浏览器默认样式

          • 问题: 不同浏览器提供<body>标签的不同值的外边距

            • <body>标签被自动添加的外边距

          • 解决: 手动重置 <body> 标签的外边距

        • 外边距的重叠

          • 注意

            • 重叠效果只存在于垂直方向

            • 水平方向不存在重叠问题

          • 问题

            • 两者之间取最大值

          • 解决

            • 只设置上一个元素的外边距

    css
    宿命丶
    7 声望1 粉丝
    « 上一篇
    HTML基础

    引用和评论

    推荐阅读
    头像
    CSS Houdini：一种足以颠覆想象的 API

    王大冶赞 1阅读 1k

    头像
    微信小程序scroll-view中，最后一个元素右边距无效的问题

    热饭班长阅读 1.9k

    头像
    CSS---引用外部字体（一）---引入

    BigDipper阅读 1.8k

    头像
    你好，我是冴羽，我写了一套《前端大佬成长之路》

    冴羽赞 1阅读 446

    头像
    CSS 小技巧 —— CSS 实现 ... 的 loading 加载中动画

    月恒赞 1阅读 527

    头像
    9个防御式的CSS代码

    史晶晶赞 1阅读 478

    头像
    CSS---引用外部字体（二）---优化

    BigDipper阅读 905

    0 条评论
    得票最新