Web前端——CSS复习1（3.25）

最新推荐文章于 2024-05-01 00:52:28 发布

置顶 pdsu_zhao

最新推荐文章于 2024-05-01 00:52:28 发布

阅读量534

点赞数

分类专栏： Web前端——html+css web前端复习+面试文章标签： web前端选择器 CSS规则 CSS规范边框边距

本文链接：https://blog.csdn.net/zxy9602/article/details/65934923

版权

web前端复习+面试同时被 2 个专栏收录

50 篇文章 10 订阅

订阅专栏

Web前端——html+css

30 篇文章 0 订阅

订阅专栏

1、什么是CSS?

CSS是层叠样式表，又称级联样式表，简称样式表。

作用：CSS实现了html文档中元素的样式定义，

（1）实现了将内容与表现的分离；

（2）提高了地代码的可重用性和可维护性。

2、CSS与HTML之间的关系

首先，HTML用于构建网页的结构，CSS用于创建HTML元素的样式；

其次，HTML是页面的内容组成，CSS是页面的表现。

上述解决了“结构与样式相分离，内容与页面表现相分离”的问题。

3、使用CSS的方法

（1）内联样式：在html页面的内容中写样式

	<h1 style="color:red">新世纪英语</h1>

优点：易于对内容各个部分进行设置样式

缺点：不利于样式的重用性

（2）内部样式：将css样式定义在网页的head里，放在一对style标记里

<style type="text/css">
h1{
	color:red;
}
</style>

（3）外部样式：将css样式定义在一个独立的css样式里，然后链接在html文档里。

<head>
...
<link rel="stylesheet"  type="text/css" href="basic.css"/>
</head>

4、CSS语法

（1）CSS语法规范

a、css语法规范总结

内联样式：由样式声明组成

b、css样式表特征

aa：继承性——大多数css样式规则可以被继承

bb：层叠性——首先，可以定义多个样式；其次，在不冲突时，多个样式表中的样式可层叠为一个

cc：优先级——在样式定义冲突时，按照不同样式规则的优先级来应用样式

c、样式优先级高低（aa < bb < cc）

aa：浏览器缺省设置

bb：外部样式表或内部样式表——就近优先

cc：内联样式

优先级案例——

<head>
..
<link rel="stylesheet" type="text/css" href="basic.css"/>
..
</head>
<body>
<h1>标题1</h1>
<p>正文1</p>
<h1 style="color:black">标题2</h1>
</body>

basic.css样式为：

body{
color:red;
}
h1{
color:pink;
}
p{
color:yellow;
}

结果：标题1显示“pink”，正文1显示“yellow”，标题2显示“black”

d、!important规则

aa：采用!important可以调整样式规则的优先级

bb：将!important添加在样式规则之后，中间用空格隔开

——选择器{属性：属性值 !important}

cc：谨慎使用

<style type="text/css">
h1{
	color:blue !important;
	color:puple;
}
</style>

（2）CSS选择器

A：基础选择器

a、通用选择器（*）

b、元素选择器（p、span、h1）

c、类选择器（."class名"）

d、id选择器（#"id名"）

总结：优先级——通用 <元素 <类 <id

B：复合选择器

a、群组选择器（用“，”隔开）

选择器声明以逗号隔开的选择器列表

将一些相同的规则作用于多个元素。

（“元素选择器”与“类选择器”混合，“类选择器”与“id选择器”，“元素选择器”与“id选择器”）

b、后代选择器（“儿子或孙子”）

指的是某父元素中的所有后代子元素（儿子辈+孙子辈）

依据元素在其位置的上下文关系来定义样式；

作用：用于选择某一元素的后代元素。

案例如下——

<h1>
<span>标题<span>
</h1>

样式为：

h1{color:green}
h1 span{color:red;}

c、子代选择器（“儿子”）

指的是某父元素中的直接子选择器

div >span{...}

C.伪类选择器

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

使用方法：采用冒号（:）作为结合符，结合符左边的是其他选择器，右边是伪类

“选择器:伪类”

CSS伪类选择器可以分为

（1）链接伪类——:link（尚未访问的链接）

:visited（访问过的链接）

注意：该链接伪类仅适用类似于“<a></a>”文字链接属性中，对于div并不适合。

（2）动态伪类，用于呈现用户操作

:hover（当鼠标悬停在所指定的元素上所使用的样式）

:active（当所指定的元素处于激活状态，鼠标在元素上按下还没有松开）

:focus（适用于html元素获得焦点时）

例如“input:focus{color:red;}”表示点进去时的样式

总结：

a、选择器优先级——

根据比较选择器权值的大小，进而判断优先级的高低。

元素选择器（权值为1）< 类选择器（权值为10）< 伪类选择器（）

< id选择器（权值为100）< 内联选择器（权值为1000）

b、选择器效率——

根据出现的频率，进而判断效率高低

id选择器 > 类选择器

（3）CSS规则

A.尺寸与边框

a、尺寸单位——%(百分比)：子元素占父元素的百分比

pt(磅)：1pt等于1/72英寸

px(像素)：计算机屏幕上的一个点

em(字体尺寸)：1em等于当前的字体尺寸，2em等于当前尺寸的两倍

（注意：屏幕一般为9pt，字体一般设置为14px）

b、颜色单位——RGB(R—red G—green B—blue)

表示色光三原色（红绿蓝）

2进制：0,1,10,11,100...

16进制：0,1,2，...,9,a,b,...f

（注意：若r=g=b，全为0为“黑”，全为f为“白”，越接近f越浅，越接近0越深）

c、尺寸——

尺寸属性是用于设置元素的宽度和高度

aa：width——max-width/min-width

bb：height——max-height/min-height

d、溢出

使用尺寸属性控制框的大小时，如果内容所需空间>框本身的空间，会导致溢出。

（1）overflow：当元素溢出框时如何处理

aa——overflow:visible 溢出的内容可见

bb——overflow:hidden 溢出的内容被隐藏

cc——overflow:scroll 无论任何情况均显示滚动条

dd——overflow:auto 浏览器自动判断，需要滚动条即显示，不需要即不显示

此外，还有两种分为水平方向、垂直方向

（2）overflow-x：水平方向元素溢出框

（3）overflow-y：垂直方向元素溢出框

<div id="chuchuang">
<p>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
</p>
</div>

设置其css样式，

#chuchuang{
	width:400px;
	height:300px;
	border:1px solid #000;
	overflow-x:auto;
	overflow-y:hidden;
}
#chuchuang p{
	width:500px;
}
img{
	width:100px;
}

e、边框

简写方式——border:width style color

若要隐藏边框，可以设置

border-right:none;

border-bottom:transparent;

（border-right:none表示效率最高）

扩展——

aa：边框圆角border-radius

bb：边框阴影

box-shadow：h-shadow v-shadow blur spread color inset

例如：box-shadow:0px 0px 5px 1px red;

cc：图片边框