CSS基础标签属性及案例，HTML列表标签

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：docs.qq.com/doc/DSmRnRG…

外部结合

• 优点：将HTML和CSS代码完全分离，复用性高；

• ./代表同一个目录

• …/代表上一级目录

3. CSS选择器

---

让开发者能够选定元素；

3.1 Id选择器

使用 # 引入，引用的是元素的id属性；id唯一标识

语法：

#id属性值{

​ 属性名:属性值;

}

id选择器 font{ font-size: 20px; } #i{ color: red; } #j{ color: orangered; } #k{ color: green; }

this is font one

this is font two

this is font three

3.2 类选择器

使用”.”来描述，引用的的是元素上的class属性值；

格式：

.class属性值{

​ 属性名:属性值;

}

处理多个元素有相同样式效果的；

类选择器 font{ font-size: 20px; } .red{ color: red; } .green{ color: green; } .blue{ color: blue; }

this is font red

this is font red

this is font green

this is font green

this is font blue

this is font blue

3.3 标签选择器

对页面上的标签进行统一的设置，引用的就是标签的名称；

格式：

标签名{

​ 属性名:属性值;

}

标签选择器 body{ font-size: 20px; } font{ color: red; } span{ color: blue; } div{ color: green; }

this is a font1

this is a span1

this is a font2

this is a span2

this is a font3

3.4 选择器的分组

多个选择器使用同一段CSS,那么就可以将这多个选择器划为一组,使用分组。选择器之间使用逗号分开；

格式：

id选择器,class选择,元素选择器{

​ 属性名:属性值;

}

选择器的分组 #f1,.s1,div{ font-size: 20px; color: red; }

this is a font

this is a span

3.5 派生选择器

通过依据元素在其位置的上下文关系来定义，可以使标记更加简洁。也称为上下文选择器；

父标签名(父id,父类名) 子标签名(子id,子类名){

​ 属性名:属性值;

}

派生选择器 span font{ font-size: 20px; color: blue; }

这是一个font

3.6 选择器的优先级

内联样式 > id选择器 > 类选择器 > 标签选择器

作用范围越小，优先级越大

选择器优先级 /*标签选择器*/ font{ font-size: 10px; color: yellow; } /*类选择器*/ .class{ font-size: 20px; color: red; } /*id选择器*/ #id1{ font-size: 30px; color: beige; }

这是一个font

4.CSS伪类

---

CSS伪类用于向某些选择器添加特殊的效果；

在支持CSS的浏览器中，链接的不同状态都可用不同方式显示，这些状态包括活动状态、已访问状态、未被访问状态、鼠标悬停状态；

a:link {color: #FF0000} 未访问的链接

a:visited {color: #00FF00} 已访问的链接

a:hover {color: #FF00FF} 鼠标移动到链接上

a:active {color: #0000FF} 选定的链接

注意事项

​ a:hover 必须被置于 a:link 和 a:visited 之后

​ a:active 必须被置于 a:hover 之后

CSS伪类 a:link { /* 未访问的链接 */ color: cornflowerblue; } a:visited { /* 已访问的链接 */ color: red; } a:hover { /* 鼠标移动到链接上 */ color: orange; } a:active { /* 选定的链接 */ color: green; } font:hover{ color: green; font-size: 100px; } button{ background-color: orange; } button:hover{ background-color: orangered; }

this is a super link

this is a font element

按钮

5.CSS的属性

---

5.1 字体属性

CSS 字体属性允许设置字体样式 (font-family) 和字体加粗 (font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）；

font-family:

​ 默认微软雅黑，如果浏览器不支持字体系列，就会使用默认的字体系列；

font-size:

​ 字体大小

font-style:

​ 字体倾斜度

font-weight:

​ 字体的粗细

字体属性 span{ font-family: "楷体"; font-size: 10px; font-style: oblique; font-weight: bolder; }

这是一个span标签

5.2 文本属性

可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进；

css文本属性

​ direction:

​ ltr: left to right

​ rtl: right to left

​ line-height:文本行高

​ text-align:文本的对齐方式

​ text-decoration：文本装饰 常用属性underline、none、line-through

​ text-indent:首行缩进以em为单位，如首行缩进2个字符2em；

​ letter-spacing:字符间距,字符与字符之间的间距

​ word-spacing:单词间距,单词与单词之间的间距

文本属性 div{ font-size: 50px; color: gray; direction: ltr; text-align: left; text-decoration: none; } a{ font-size: 50px; text-decoration: none; } #i1{ font-size: 100px; letter-spacing: 20px; } #i2{ font-size: 100px; word-spacing: 20px; }

超链接

5.3 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；

background-color:将颜色作为背景

background-image:将图片作为背景

CSS背景属性 body{ background-color: darkgoldenrod; color: red; font-size: 100px; background-image:url(img/123.png); background-size: cover; }

卡卡之家

5.4 尺寸属性

CSS 尺寸 (Dimension)属性允许控制元素的高度和宽度。同样，允许你增加行间距；只对你设定的范围有效；

CSS尺寸属性对行内元素无效，只对是块级元素

CSS尺寸属性 #d1{ min-width: 100px; max-width: 300px; min-height: 100px; max-height: 300px; width: 500px; height: 500px; background-color: green; }

5.5 列表属性

CSS 列表属性允许放置、改变列表项标志，或者将图像作为列表项标志；

list-style-image 将图象设置为列表项标志；

list-style-position 设置列表中列表项标志的位置；

list-style-type 设置列表项标志的样式；

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素