CSS学习笔记(3)【CSS元素显示模式以及背景设置】

CSS基础学习

一、CSS元素的显示模式(了解)

在HTML中将所有标签分为容器级和文本级两类
在CSS中将所有的标签分为块级元素和行内元素

1.什么是块级元素和行内元素?

块级元素会独占一行而行内元素则不会

2.块级元素和行内元素的区别:

2.1 块级元素(容器级):
独占一行
如果没有设置宽度,那么默认和父元素一样

2.2 行内元素(文本级):
不会独占一行
如果没有设置宽度,默认和内容一样宽
行内元素是不可以设置宽度和高度的
2.3 行内块级元素

二、CSS元素显示模式转换

1.如何转换CSS元素的显示模式
通过设置display属性
其中:inline 行内
block 块级
inline-block 行内块级

三、背景颜色

1.如何设置标签的背景颜色?
在CSS中,通过backgroun-color属性设置标签的背景颜色

四、背景图片

1.如何设置背景图片?
在CSS中通过background-image:url();
注意:(1)图片必须放在 url() 中,图片地址可以是本地的也可以是网络上的
(2)如果图片的大小没有标签的大小大,那么会自动在水平和垂直方向平铺和填充
(3)如果网页上出现了图片,那么浏览器会在此发送请求获取

五、背景平铺

1.如何控制背景图片的平铺方式?
在CSS中通过background-repeat属性控制背景图片的平铺方式
取值:
repeat 默认,在水平是垂直方向都需要平铺
no-repeat 在水平和垂直方向都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺

六、背景定位

1.如何控制背景图片的位置?
在CSS中通过background-position属性控制背景图片的位置
2.格式:
background-position:水平方向 垂直方向
3.取值:
3.1 具体的方位名词如:left center right
top center bottom
3.2 具体的像素:
例:5px 20px 100px(一定要写单位)
具体的像素是可以接收负数的
注意:(1)同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色

七、CSS精灵图(了解)

1.什么是CSS精灵图?

一种图像合成技术

2.CSS精灵图的作用

可以减少请求的次数,以及可以降低服务器处理压力

3.如何使用CSS精灵图

CSS精灵图需要配合背景图片和背景定位来使用

猜你喜欢

转载自blog.csdn.net/qq_51368103/article/details/114273531