HTML/CSS入门基础知识

‘’

属性名
1. 属性值

三、HTML头部

1. 元素

   ‘元素：定义HTML页面标题
   • ’元素：定义HTML页面中所以相对URL的根URL。
   • ‘元素：定义HTML页面引入的外部资源‘’
   • ‘’
2. \’元素：定义HTML页面的css样式
3. ’元素：定义HTML页面的元数据信息，例如编码格式，作者，关键字等
   ‘’
4. ‘

四、HTML注释

CSS概述

层叠样式表

如何使用css

一、内联样式

• “这是测试内容”

二、内嵌样式表

• \”

三、外联样式表

1. 创建一个为.css的文件
2. 将这个.css文件放到link标签中“”rel属性：用来定义引入文件与当前HTML页面的关系
3. href属性：定义映入的URL

四、css语法结构

1. 选择器
2. 声明块
3. 注释/* 内容 */

基本选择器(阶段2 CSS选择器)

一、元素(类型)选择器

元素名{

属性：属性值；

}

二、类(Class)选择器

.className{

属性：属性值；

}

三、ID选择器

#ID{

属性：属性值；

}

四、通用(通配符)选择器

*{

属性：属性值；

}`

五、属性选择器

1. [attr]属性选择器：通过HTML元素的attr属性名来定位具体的HTML元素
2. [attr=value]属性选择器：通过HTML元素的attr属性名并且属性值为value来定位具体HTML元素
3. [attr~=value]属性选择器：通过HTML元素的attr属性名，属性值是一个以空格分隔的列表并且value值是该值列表中的之一，来定位具体的HTML元素
4. [attr|=value]属性选择器：通过HTML元素的attr属性名并且属性值为value或者以value-为前缀来定位具体HTML元素
5. [attr^=value]属性选择器：通过HTML元素的attr属性名并且属性值是以value开头来定位的HTML元素
6. [attr$=value]属性选择器：通过HTML元素的attr属性名并且属性值是以value为结束来定位具体的HTML元素
7. [attr*=value]属性选择器：通过HTML元素的attr属性名并且属性值是包含value来定位具体HTML元素

选择器的优先级

1. 分配给指定的CSS声明的一个权重，由匹配的选择器中的每一种选择器类型的数值决定
2. 当优先级与多个CSS声明中的任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
3. 当同一个元素有多个声明的时候，优先级才会有意义

选择器类型的权重

1. 通配符选择器的优先级为0
2. 类型选择器的优先级为1
3. 类选择器和属性选择器的优先级为10
4. ID选择器的优先级为 100
5. 内联样式的优先级为1000

• 内联样式总会覆盖内嵌样式表和外联样式表中的任何样式

层级选择器

一、层级选择器种类

1. 后代选择器选择器1 选择器2 {
   属性 : 属性值;
   }

选择器1>选择器2 {
属性 : 属性值;
}

选择器1+选择器2 {
属性 : 属性值;
}

选择器1~选择器2 {
属性 : 属性值;
}

组合选择器

一、组合并集选择器

选择器1, 选择器2, ... ... {

属性 : 属性值;

}

二、组合交集选择器

伪类选择器

一、伪类选择器的种类

1. 动态伪类选择器：常与元素配合使用，用来表示用户的某种行为状态
2. 目标伪类选择器：常与

   <a>

   元素配合使用，用来定位当前 HTML 页面中唯一一个目标元素。

3. 元素状态伪类选择器：常与表单组件元素配合使用，用来表示表单组件的某种状态。
4. 结构伪类选择器：常与

   <table>

   元素配合使用，利用 HTML 元素之间的关系定位目标元素。

5. 否定伪类选择器：用来定位与指定选择器不匹配的 HTML 元素。

二、否定伪类选择器

:not(selector) { 属性 : 属性值; }

伪元素选择器

一、语法

选择器::伪元素 { 属性 : 属性值; }

伪元素选择器只能和基本选择器配合使用，并且一个选择器只能使用一个伪元素选择器，如果要为一个选择器增加多个伪元素选择器需要分别编写。

二、::before 和 ::after 伪元素

::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素，::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。

三、::first-letter 伪元素

为第一个字设置格式

四、::first-line 伪元素

为第一行文本设置样式

五、::selection 伪元素

颜色(阶段3：颜色与单位)

一、颜色值的类型

色彩关键字

RGB色彩模式

• 十六进制符号#RRGGBB
• 函数符rgb

HSL色彩模式

是一种将RGB色彩模型中的点在圆柱坐标系中的表示法

• **H **表示色调，其值范围为 0 ~ 360 之间的一个角度
• S 表示饱和度，其值范围为 0% ~ 100% 之间的百分值。
• L 表示亮度，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色

二、透明度

• 如果值为 0 或 0.0 则表示完全透明
• 如果值为 0.5 则表示半透明
• 如果值为 1 或 1.0 则表示不透明

单位

一、CSS单位

1. 绝对长度单位
   px
2. 相对长度单位
   em父元素的字体大小
   • ex字符\”x\”的高度
   • ch数字\”0\”的宽度
   • rem根元素的字体大小
   • lh元素的line-height
   • vw视窗宽度的1%
   • vh视窗高度的1%
   • vmin视窗较小尺寸的1%
   • vmax视图大尺寸的1%

结构化元素(阶段4：HTML—CSS文本)

一、结构化元素

• 段落p
• 粗体b
• 斜体i
• 上标元素sup
• 下标元素sub
• 换行符br
• 水平线元素hr

二、HTML5结构化元素

\”

元素