03-css属性，高级面试题+解析

–>

链接式与导入式：

	链接式	导入式
相同点	本质都是将一个独立的css样式表引用到HTML页面中
不同点	<link/>标签属于XHTML范畴	而@import是css2.1中特有的【不支持】
	在网速慢的效果下也会一点点显示出来	网速慢不好使，黑白

n 样式优先级：

Ø 行内样式>内部样式表>外部样式表【就近原则】

n 选择器优先级：

Ø ID选择器>类选择器>标签选择器

(一) CSS的高级应用

n css复合选择器

1. 后代选择器（常用）

写法：把最外层的标签写在前面，内层的标签写在后面，用空格分开。当标签发生嵌套时，内层的标签就为外层标签的后代。

在HTML标签嵌套时：

(1) 按标签的嵌套关系，直接按标签的嵌套关系编写。

(2) 按选择器的嵌套关系，eg:  .a  .b 或 .a  #b（直接按样式的嵌套关系编写）

(3) #a .b 或 #a b

2. 交集选择器（不常用）

第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写。这种方式的选择器，将选中同时满足后两者定义的元素，也就是前者所定义的标签类型，并且制定了后者的类型或者id的元素，故~~~。

p空格.txt{color:red ;}后代选择器

p.txt{color:blue ; line-height:28px ;}交集选择器

3. 并集选择器

它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器（3个）都可以作为并集选择器的一部分。

n css继承特性

将HTML标签看作一个个容器，其中被包含的小容器会继承包含它的大容器的风格样式，也称包含与被包含的标签为父子标签，即子标签会继承父标签的风格样式。

第5章 CSS美化网页元素 2014/9/13

(一) 使用css美化网页文本的意义：

Ø 有效地传递页面信息

Ø 使页面更漂亮、美观，吸引用户

Ø 可以更好地突出页面主题内容

Ø 具有良好的用户体验

n ****是一个重要的编辑文本的标签，用来被组合HTML文档中的行内元素，它没有固定的格式表示。

n 使用css为标签添加样式，可以使用那3种选择器。

n 使用CSS设置字体样式

属性名	含义
font-family	类型
font-size	大小
font-style	风格
font-weight	粗细
font	在一个声明中，设置所有字体属性，        font : italic bold 36px “宋体”;

1. 字体类型font-family （英文/中文）

² a {font-family:Verdana,”楷体”;}

² b { font-family: Times, “Times New Roman”, “楷体”}

² 英文字体放在中文字体前

2. 字体大小font-size【px】

其它的单位：in、cm、mm、pt、pc

3. 字体风格font-style

font-style属性有三个值：normal（默认）、italic（斜体可以理解成Italic是使用文字的斜体，）和oblique（是让没有斜体属性的文字倾斜）

4. 字体的粗细font-weight 属性的值

值	说明
normal	默认值，定义标志的字体400
bold	粗体字体700
bolder	更粗的字体
lighter	更细的字体

5. 字体属性

顺序：字体风格 字体粗细 字体大小 字体类型

中文	英文
楷体	regular script
宋体	Song typeface
隶书	the Han Dynasty
黑体	black body

n 使用CSS排版网页文本

文本属性

属性	含义
color	颜色
text-align	设置元素水平对齐方式
text-indent	首行文本的缩进
line-height	文本的行高
text-decoration	文本的装饰

1. 文本颜色（在font属性里面，颜色不能使用简写方式）

2. 水平对齐方式（text-align）

left(默认值) right（把文本排到右边） center（中间） justify（实现两端对其的效果）

3. 首行缩进与行高

p { text-indent:2em }

first para...

second long paragraph .

行高换算为像素：字体的大小（12px）*行高（line-height : 1.5 ;）=像素（18px）

4.  文本装饰

text-decoration的常用值

值	说明
none【常用】	默认值，定义的标准文本
underline【常用】	下划线
overline	上划线
line-through	删除线
blink	设置文本闪烁，只在火狐有效，IE无效

5. 垂直对齐方式【经常用来图片与文字居中】（top、bottom）

p img {vertical – align : middle ; }

文字

(二) 使用CSS设置超链接

n 超链接伪类

n 超链接单机前和单机后的不同颜色，其实是超链接的伪类样式。所谓伪类，就是不根据名称、属性、内容而根据标签处于某种行为或状态时的特征来修饰样式。

n 基本语法“标签名：伪类名{声明；}”

a:hover{ color ：# 61E461 ;}

n 为了防止图片加上超链接后出现边框**：通常会CSS文件开头加入“img { border : 0px ; }”**

n 常用的超链接伪类【顺序】

伪类名称	含义
a : link	未单击访问时超链接样式
a : visited	单击访问后超链接样式
a : hover	鼠标悬浮其上超链接样式
a : active	鼠标单击未释放的超链接样式

在实际页面开发中，仅设置两种超链接样式，一种是超链接a标签选择器样式（超链接无下划线 text-decoration:none;），另一种是鼠标悬浮在超链接上（显示下划线）的样式。

n 使用CSS设置鼠标形状（浏览器之间有差异）

cursor属性常用值

值	说明
default	默认光标
pointer	超链接的指针span{ cursor：pointer ; }
wait	指示程序正在忙
help	指示可用的帮助
text	指示文本
crosshair	鼠标呈现十字状

(三) 背景样式

² < div >标签可以把HTML文档分割成独立的、不同的部分。

² 设置页面中id名称为 header的

的宽和高，（控制网页元素宽、高的两个属性）#header {

width : 200px;

height : 280px;

}

n 背景属性在CSS中背景包括背景颜色和背景图像两种方式。

1. 背景颜色

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-MfdYoZjH-1710864283019)]
[外链图片转存中…(img-5JdwcGWS-1710864283020)]
[外链图片转存中…(img-BbmtVRex-1710864283021)]
[外链图片转存中…(img-z5OjKA5l-1710864283021)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-Gti22RPb-1710864283021)]