CSS基本知识总结

目录

一、CSS语法

二、CSS选择器

三、CSS样式表

1.外部样式表

2.内部样式表

3.内联样式

四、CSS背景

1.背景颜色：background-color

2.背景图片：background-image

3.背景大小：background-size

4.背景图片是否重复：background-repeat

5.背景图像起始位置：background-position

6.背景图像是否固定：background-attachment

7.背景图像相对于什么定位：background-origin

8.背景绘制区域：background-clip

五、CSS文本格式

六、CSS链接

七、CSS盒子模型

1.margin-外边距

2.border-边框

3.padding-内边距

八、CSS定位-Position

九、CSS布局-Overflow

十、代码示例

---

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

---

一、CSS语法

CSS语法构成：选择器+1条或多条声明。每条声明由一个属性和一个值构成。

p {
    color:red;
    text-align:center;
}

---

二、CSS选择器

CSS选择器包含：id选择器和class选择器。

id选择器以 # 显示。

# demo {
    color:#0fff;
    display:flex;
 }
/*调用时*/

class选择器以 . 点号显示。

.img {
    background-color:#0fff;
 }
/*调用时*/

---

三、CSS样式表

1.外部样式表

通过标签链接到样式表。

2.内部样式表

通过

3.内联样式

这是一个段落。

---

四、CSS背景

1.背景颜色：background-color

.image {
    background-color:transparent  /*透明*/
}

2.背景图片：background-image

通过url设置相对或绝对位置。

.image {
    background-image:url("相对或绝对位置");
}

3.背景大小：background-size

属性值	描述
cover	使背景图片始终铺满整个背景区域，但如果图片比背景区域小，会自动拉伸或放大图片，使其铺满整个背景区域。
contain	使背景图片在不拉伸的情况下，尽可能地在背景区域中居中显示，同时保留其原始大小。
px	直接指定背景图片的大小，可以是固定值、百分比或关键字auto，其中auto表示原始大小。

4.背景图片是否重复：background-repeat

属性值	描述
repeat	默认值，表示背景图像在水平和垂直方向都重复出现。
repeat-x	表示背景图像只在水平方向重复出现，而不在垂直方向上出现 。
repeat-y	表示背景图像只在垂直方向上重复出现，而不在水平方向上出现。
no-repeat	表示背景图像不重复出现。

5.背景图像起始位置：background-position

（1）属性值为“长度单位”

当background-position取值为长度单位时，要设置水平方向数值（x轴）和垂直方向数值（y轴）。通过px，百分比%来设置。

属性值	描述
x（数值）	设置网页的横向位置
y（数值）	设置网页的纵向位置

（2）属性值为“关键字”

当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，使用关键字。

属性值	描述
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

6.背景图像是否固定：background-attachment

属性值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置

7.背景图像相对于什么定位：background-origin

属性值	描述
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

8.背景绘制区域：background-clip

属性值	描述
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

---

五、CSS文本格式

属性值	描述
color	设置文本颜色
direction	设置文本方向
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

---

六、CSS链接

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

注意：

• a:hover 必须跟在 a:link 和 a:visited后面
• a:active 必须跟在 a:hover后面

---

七、CSS盒子模型

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

1.margin-外边距

margin属性可以有1-4个值：

• margin:25px 50px 75px 100px;
  • 上边距为25px
  • 右边距为50px
  • 下边距为75px
  • 左边距为100px
• margin:25px 50px 75px;
  • 上边距为25px
  • 左右边距为50px
  • 下边距为75px
• margin:25px 50px;
  • 上下边距为25px
  • 左右边距为50px
• margin:25px;
  • 所有的4个边距都是25px

2.border-边框

border-style属性可以有1-4个值：

• border-style:dotted solid double dashed;
  • 上边框是 dotted
  • 右边框是 solid
  • 底边框是 double
  • 左边框是 dashed
• border-style:dotted solid double;
  • 上边框是 dotted
  • 左、右边框是 solid
  • 底边框是 double
• border-style:dotted solid;
  • 上、底边框是 dotted
  • 右、左边框是 solid
• border-style:dotted;
  • 四面边框是 dotted

3.padding-内边距

padding属性可以有1-4个值：

  padding:25px 50px 75px 100px;

• 上填充为25px
• 右填充为50px
• 下填充为75px
• 左填充为100px

  padding:25px 50px 75px;

• 上填充为25px
• 左右填充为50px
• 下填充为75px

  padding:25px 50px;

• 上下填充为25px
• 左右填充为50px

  padding:25px;

• 所有的填充都是25px

---

八、CSS定位-Position

属性值	描述
static	默认值，静态定位。
relative	相对定位元素的定位是相对其正常位置。
fixed	元素的位置相对于浏览器窗口是固定位置。
absolute	绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。
sticky	粘性定位，基于用户的滚动位置来定位。

---

九、CSS布局-Overflow

属性值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

十、代码示例

下面结合上面学到的知识代码，将会简单编写代码实现：发送新年祝福~

	
		
		
			
		
		
		
		
		
		
	
	
	
		

			

				

			
			

				

					
年
				
			
			

				

				

				
			
		
		
		

			

				

			
			

				

					
新
				
			
			

				

				

				
			
		
		
		

			

				

			
			

				

					
乐
				
			
			

				

				

				
			
		
		
		

			

				

			
			

				

					
快
				
			
			

				

				

				
			
		

		

		
新年快乐
		
龙年大吉
		

		

			
			
			
		
	
		

			小
			哪
			吒
			祝
			各
			位
			在
			新
			的
			一
			年
			里
			，
			心
			想
			事
			成
			，
			财
			运
			亨
			通
			！
		
	
	

具体实现如下：

新年祝福

本文主要分享了CSS的基础知识，通过学习这篇文章，相信大家会对CSS有一个初步认识，下篇将会介绍：CSS3的基础知识，大家尽请期待~