Web前端最全CSS基础标签属性及案例，5年经验Web前端程序员面试27天

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3.3 标签选择器

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

格式：

标签名{

​ 属性名:属性值;

}

this is a font1

this is a span1

this is a font2

this is a div1

this is a span2

this is a font3

this is a div2

3.4 选择器的分组

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

格式：

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

​ 属性名:属性值;

}

this is a font

this is a span

this is a div

3.5 派生选择器

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

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

​ 属性名:属性值;

}

这是一个font

这是一个font

3.6 选择器的优先级

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

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

这是一个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 之后

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标签

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

超链接

this is a div1

this is a div2

5.3 背景属性

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

background-color:将颜色作为背景

background-image:将图片作为背景

卡卡之家

5.4 尺寸属性

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

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

这是一个div

5.5 列表属性

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

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

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

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

• 卡卡
• 之家
• 卡卡

• 5.6 边框属性

  CSS边框属性允许规定元素边框的样式、宽度和颜色；

  最后

  你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  我特地针对初学者整理一套前端学习资料

  

  

  a charset=“UTF-8”>
• 卡卡
• 之家
• 卡卡

• 5.6 边框属性

  CSS边框属性允许规定元素边框的样式、宽度和颜色；

  最后

  你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  我特地针对初学者整理一套前端学习资料

  [外链图片转存中…(img-5Yk3yiwe-1715852727637)]

  [外链图片转存中…(img-H1eh1asL-1715852727638)]