菜单 搜索
首页 前端知识 HTML5与CSS3

HTML5与CSS3

2024-03-02 09:03:38 前端知识 前端哥 916 777 我要收藏

不会大量的详解，因为写出来完全没办法跟W3C和MDN进行对比，所以具体的语法属性还是需要去这两个网站查阅，还可以在网站上编写实时效果

MDN Web Docs (mozilla.org)

CSS前置知识

元素的语义化

  • 元素的语义化：用正确的元素做正确的事情
  • 标签语义化的好处
    • 方便代码维护
    • 减少让开发者之间的沟通成本
    • 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
    • 有利于SEO

什么是SEO？

  • 搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式

在这里插入图片描述

认识字符编码

  • 计算机是干什么的?
    • 计算机一开始发明出来时是用来解决数字计算问题的，后来人们发现，计算机还可以做更多的事，例如文本处理。
    • 但计算机其实挺笨的，它只“认识”010110111000…这样由0和1两个数字组成的二进制数字
    • 这是因为计算机的底层硬件实现就是用电路的开和闭两种状态来表示0和1两个数字的
    • 因此，计算机只可以直接存储和处理二进制数字
  • 为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制数字
    • 当然，肯定不是我们想怎么转换就怎么转换，否则就会造成同一段二进制数字在不同计算机上显示出来的字符不一样的情况，因此必须得定一个统一的、标准的转换规则

在这里插入图片描述

  • 字符编码的发展历史可以阅读coderwhy的简书一篇文章：https://www.jianshu.com/p/899e749be47c

邂逅CSS

认识CSS

  • CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）
    是为网页添加样式的代码

CSS如何编写呢？

在这里插入图片描述

  • 声明（Declaration）一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式。
    • 属性名（Property name）：要添加的css规则的名称
    • 属性值（Property value）：要添加的css规则的值；

如何将CSS样式应用到元素上？

  • CSS提供了3种方法，可以将CSS样式应用到元素上：
    • 内联样式（inline style）
    • 内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
    • 外部样式表（external style sheet）

内联样式（inline style）

  • 内联样式（inline style），也有人翻译成行内样式

    • 内联样式表存在于HTML元素的style属性之中

    在这里插入图片描述

  • CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

  • 很多资料不推荐这种写法：

  • 在原生的HTML编写过程中确实这种写法是不推荐的

  • 在Vue的template中某些动态的样式是会使用内联样式的

  • 所以，内联样式的写法依然需要掌握

内部样式表（internal style sheet）

将CSS放在HTML文件元素里的

在这里插入图片描述

  • 在Vue的开发过程中，每个组件也会有一个style元素，和内部样式表非常的相似（原理并不相同）

外部样式表（external style sheet）

  • 外部样式表（external style sheet） 是将css编写一个独立的文件中，并且通过元素引入进来；
  • 使用外部样式表主要分成两个步骤：
    • 第一步：将css样式在一个独立的css文件中编写（后缀名为.css）
    • 第二步：通过元素引入进来

在这里插入图片描述

@import

可以在style元素或者CSS文件中使用@import导入其他的CSS文件

在这里插入图片描述

必须掌握的CSS属性

在这里插入图片描述

CSS属性的官方文档

  • CSS官方文档地址

    • https://www.w3.org/TR/?tag=css

  • CSS推荐文档地址：

    • CSS 参考 - CSS：层叠样式表 | MDN (mozilla.org)

  • 由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：

    • 可以到https://caniuse.com/查询CSS属性的可用性；

CSS颜色的表示方法

  • 在CSS中，颜色，有以下几种表示方法：

  • 颜色关键字（color keywords）：

    • 是不区分大小写的标识符，它表示一个具体的颜色
    • 可以表示哪些颜色呢？
    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#语法

  • RGB颜色：

    • RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色

    也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；

    • RGB各个原色的取值范围是 0~255

RGB的表示方法

  • RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示

  • 方式一：十六进制符号：#RRGGBB[AA]

    • R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的
    • 比如，#ff0000等价于#ff0000ff

  • 方式二：十六进制符号：#RGB[A]

    • R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）

    • 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版

      比如，#f09和#ff0099表示同一颜色

    • 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版

      比如，#0f38和#00ff3388表示相同颜色

在这里插入图片描述

  • 方式三：函数符： rgb[a](R, G, B[, A])
  • R（红）、G（绿）、B （蓝）可以是（数字），或者（百分比），255相当于100%
  • A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）

CSS属性-文本

CSS属性 – text-decoration(常用)

  • text-decoration用于设置文字的装饰线

    • decoration是装饰/装饰品的意思;

  • text-decoration有如下常见取值:

    • none：无任何装饰线

      可以去除a元素默认的下划线

    • underline：下划线

    • overline：上划线

    • line-through：中划线（删除线）

text-transform(一般)

在这里插入图片描述

text-indent(一般)

在这里插入图片描述

text-align(重要)

  • text-align: 直接翻译过来设置文本的对齐方式
  • MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐(但也不是完全准确，如果div里面还有div，对内部块级元素居中不了)

如何解决这个问题：

  • 加上display:inline-block将元素呈递为行内块状元素，同时又保留了块状元素可以设置宽高的特性

  • 既能够设置宽高，又不独自占据一行。

  • 保留上下外边距/内边距。

  • 不添加换行符，因此该元素可以位于其他元素旁边。

  • 内容撑开宽度。

  • 使用margin:0 auto

  • 常用的值

    • left：左对齐
    • right：右对齐
    • center：正中间显示
    • justify：两端对齐

  • W3C中的解释:

    在这里插入图片描述

  • letter-spacing、word-spacing(一般)

    • letter-spacing、word-spacing分别用于设置字母、单词之间的间距。默认是0，可以设置为负数

CSS属性-字体

font-size(重要)

  • font-size决定文字的大小

  • 常用的设置

    • 具体数值+单位(比如100px)

      也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%

    • 百分比

      基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

font-family (重要, 不过一般仅设置一次)

  • font-family用于设置文字的字体名称

    • 可以设置1个或者多个字体名称;

    • 浏览器会选择列表中第一个该计算机上有安装的字体;

    • 或者是通过 @font-face 指定的可以直接下载的字体

      比如你们公司设置了字体，但是用户的电脑上是没有这个字体，显示不了的，那就可以通过加载网页的时候直接将字体一起从网上下载下来使用

font-weight(重要)

  • font-weight用于设置文字的粗细（重量）

  • 常见的取值:

    • **100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：**每一个数字表示一个重量
    • normal：等于400
    • bold：等于700

  • strong、b、h1~h6等标签的font-weight默认就是bold

font-style(一般)

在这里插入图片描述

font-variant(了解)

在这里插入图片描述

font-variant(了解)

在这里插入图片描述

line-height(常用)

  • line-height用于设置文本的行高
    • 行高可以先简单理解为一行文字所占据的高度

在这里插入图片描述

  • 行高的严格定义是：两行文字基线（baseline）之间的间距
  • 基线（baseline）：与小写字母x最底部对齐的线

在这里插入图片描述

  • 注意区分height和line-height的区别
    • height：元素的整体高度
    • line-height：元素中每一行文字所占据的高度
  • 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
    • 让line-height等同于div的height

在这里插入图片描述

font

  • font是一个缩写属性
    • font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写
    • font-style font-variant font-weight font-size/line-height font-family
  • 规则:
    • font-style、font-variant、font-weight可以随意调换顺序，也可以省略
    • /line-height可以省略，如果不省略，必须跟在font-size后面
    • font-size、font-family不可以调换顺序，不可以省略

在这里插入图片描述

CSS常见选择器

CSS选择器（selector）

  • 开发中经常需要找到特定的网页元素进行设置样式
    • 思考：如何找到特定的那个元素？
  • 什么是CSS选择器
    • 按照一定的规则选出符合条件的元素，为之添加CSS样式
  • 选择器的种类繁多，大概可以这么归类
    • 通用选择器（universal selector）
    • 元素选择器（type selectors）
    • 类选择器（class selectors）
    • id选择器（id selectors）
    • 属性选择器（attribute selectors）
    • 组合（combinators）
    • 伪类（pseudo-classes）
    • 伪元素（pseudo-elements）

通用选择器

  • 通用选择器（universal selector）
    • 所有的元素都会被选中;使用*
  • 一般用来给所有元素作一些通用性的设置
    • 比如内边距、外边距;
    • 比如重置一些内容
  • 效率比较低，尽量不要使用

简单选择器

  • 简单选择器是开发中用的最多的选择器:
    • 元素选择器（type selectors）, 使用元素的名称;
    • 类选择器（class selectors）, 使用 .类名
    • id选择器（id selectors）, 使用 #id;

在这里插入图片描述

id注意事项

  • 一个HTML文档里面的id值是唯一的，不能重复
    • id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
    • 最好不要用标签名作为id值
  • 中划线又叫连字符（hyphen）

在这里插入图片描述

属性选择器(attribute selectors)

  • 拥有某一个属性 [att]
  • 属性等于某个值 [att=val]

在这里插入图片描述
在这里插入图片描述

后代选择器（descendant combinator）

  • 后代选择器一: 所有的后代(直接/间接的后代)
    • 选择器之间以空格分割

在这里插入图片描述

  • 后代选择器二: 直接子代选择器(必须是直接子代)
    • 选择器之间以 > 分割;

在这里插入图片描述

兄弟选择器(sibling combinator)

  • 兄弟选择器一:相邻兄弟选择器
    • 使用符号 + 连接

在这里插入图片描述

  • 兄弟选择器二: 普遍兄弟选择器 ~
    • 使用符号 ~ 连接

在这里插入图片描述

选择器组 – 交集选择器

  • 交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

  • 在开发中通常为了精准的选择某一个元素

如下的div.one，既是一个div也得是一个类名为one的(div和.one之间没有空格，是连着写的)。而不是说div下的one

在这里插入图片描述

  • 并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
    • 在开发中通常为了给多个元素设置相同的样式;

在这里插入图片描述

认识伪类

  • 什么是伪类呢?
    • Pseudo-classes: 翻译过来是伪类
    • 伪类是选择器的一种，它用于选择处于特定状态的元素;
  • 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色

伪类(pseudo-classes)

常见的伪类
动态伪类（dynamic pseudo-classes）:link、:visited、:hover、:active、:focus
目标伪类（target pseudo-classes）:target
语言伪类（language pseudo-classes）:lang( )
元素状态伪类（UI element states pseudo-classes）:enabled、:disabled、:checked
结构伪类（structural pseudo-classes）(后续学习):nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last- >of-type( )
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty
否定伪类（negation pseudo-classes）(后续学习):not()
  • 所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

动态伪类（dynamic pseudo-classes)

  • 使用举例
a:link未访问的链接(从来没访问过)
a:visited已访问的链接(之前有访问过)
a:hover鼠标挪动到链接上(重要)
a:active激活的链接（鼠标在链接上长按住未松开）

  • 使用注意

    • :hover必须放在:link和:visited后面才能完全生效
    • :active必须放在:hover后面才能完全生效
    • 所以建议的编写顺序是 :link、:visited、:hover、:active

  • 除了a元素，:hover、:active也能用在其他元素上

动态伪类 - :focus

  • :focus指当前拥有输入焦点的元素（能接收键盘输入）
  • 文本输入框一聚焦后，背景就会变红色(例子)
  • 因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
  • 动态伪类编写顺序建议为
    • :link、:visited、:focus、:hover、:active
  • 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
    • 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

伪元素（pseudo-elements）

  • 常用的伪元素有(推荐使用两个冒号，跟伪类进行区分)
    • :first-line、::first-line
    • :first-letter、::first-letter
    • :before、::before
    • :after、::after
  • 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

伪元素 - ::first-line - ::first-letter(了解)

  • ::first-line可以针对首行文本设置属性
  • ::first-letter可以针对首字母设置属性

在这里插入图片描述

伪元素 - ::before和::after(常用)

  • ::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
    • 常通过 content 属性来为一个元素添加修饰性的内容

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/3076.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Session在前端页面无法传递的原因及解决方法

2024-06-10 23:06:14

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例4-9 HTML5 表单验证

2024-06-10 23:06:12

css如何把header栏固定在屏幕顶部

2024-06-10 23:06:11

《HTML5网页设计》——HTML5基础

2024-06-10 23:06:56

编程笔记 html5&css&js 076 Javascript 表达式

2024-06-10 23:06:55

js 指定光标位置

2024-06-10 23:06:55

Node.js毕业设计基于HTML5的历史车轮—汴京网站（Express 附源码）

2024-06-10 23:06:45

编程笔记 html5&css&js 014 网页布局框架

2024-06-10 23:06:45

HTML5文档头部相关标签怎样使用？，附架构师必备技术详解

2024-06-10 23:06:34

Vue2中v-html引发的安全问题

2024-06-10 23:06:30

大家推荐的文章
1

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
2

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
3

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
4

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
5

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
6

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
7

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
8

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
9

UE4.27支持HTML5

2024-05-07 13:05:261000
10

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！