CSS入门部分

目录

1 基础语法

1.1 CSS规则

1.2 CSS选择器

1.3 伪类和伪元素

2 CSS样式

2.1 背景

2.2 文本

2.3 字体

2.4 列表

2.5 表格

3 CSS布局

3.1 三行两列布局

3.2 CSS中的float

3.3 CSS的定位模型

使用CSS的目的是规定格式，生成.css格式文件，确保在不同的浏览器中文本样式相同。

1 基础语法

1.1 CSS规则

起到的效果为在body标签内的全部字体颜色都为灰色。
注意：style标签中的注释为/* */，不知道为啥这么麻烦，有空再补上

1.2 CSS选择器

	



	
小青蛙
	
中青蛙
	
大青蛙
	
超大青蛙

CSS选择器包含4种，常用的是元素选择器和类选择器。
基于元素关系来分有:

1. A   E形式的祖先和后代元素选择器
2. A>E形式的父与子元素选择器
3. B+E形式的兄弟元素选择器（只针对下一个元素）

目前经常用到的只有A  E形式
PS：在使用过程中发现p标签为祖先元素时，对后代元素样式修改失效，原因待考察。

1.3伪类和伪元素

伪类：针对a标签，共四种

伪元素：
为元素前后添加内容，伪代表的可能是只是形式上的添加文本。

	
大兔子

2 CSS样式

2.1 背景

	.superRabbit{
		height: 100px;		/*模块高度*/
		background-color: aqua;		/*背景颜色*/
		background-image: url(../个人浏览记录/image/QQ.png);	/*背景图片*/
		background-repeat: no-repeat;		/*图片是否重复*/
		background-position: 200px 20px;	/*图片位置*/
	}
	.littleCat{
		height: 100px;
		background: aqua url(../个人浏览记录/image/weibo.png) no-repeat 200px 20px;	
		/*与上边的表现形式一样*/
	}

上边的方法从代码可读性上来说更强一些，所以还是以第一种方式来写更好一些。

2.2 文本

	.superRabbit{
		height: 100px;
		background-color: aqua;		/*背景颜色*/
		background-image: url(../个人浏览记录/image/QQ.png);	/*背景图片*/
		background-repeat: no-repeat;		/*图片是否重复*/
		background-position: 200px 20px;	/*图片位置*/
		color:green;		/*字体颜色*/
		text-align:center;	/*水平对齐方式*/
		vertical-align: middle;		/*垂直对齐方式，但需要配合display: table-cell使用*/
		text-decoration:overline underline;		/*文本样式：上划线，下划线*/
	}

2.3 字体

	.superRabbit{
		font-family:"微软雅黑";	/*字体*/
		font-size: 40px;		/*字体大小*/
		font-style:oblique;		/*字体样式：正常，斜体*/
		font-weight:bolder;		/*字体粗细*/
	}

2.4 列表

	.fruit{
		list-style-image: url(../个人浏览记录/image/weibo.png);		/*使用图片作为标签*/
		list-style-position: outside;		/*列表所在位置：是否全部显示*/
		list-style-type: circle;		/*标签样式*/
	}

2.5 表格

		.rabbitAndFrog tr td{
			width: 200px;		/*表格宽度*/
			text-align: center; 	/*字体居中*/
			padding: 10px;		/*内边距宽度*/
			border-style: double;	/*边框样式*/
			border-color: #000000;	/*边框颜色*/

表格样式理解可以参考CSS的盒子布局。

3 CSS布局

3.1 CSS的盒子模型

外边距：magin 一般都设置为0px；
边框：border

• border-style 边框样式
• border-width 边框宽度
• border-color 边框颜色

内边距：padding 设置宽度

• padding-bottom 设置元素的底部填充
• 还有left、right、top等

3.2 CSS中的float

float的四个参数：

1. -float:left;
2. -float:left;
3. -float:none;
4. -float:inhert;

	



	

		
	生如夏花之绚烂，死如秋叶之静美，出自印度诗人泰戈尔《飞鸟集》第八十二首，《飞鸟集》英文本题名为Stray Birds.其中stray为漂泊的意思，Birds是鸟的复数形式，有时还可指人。《飞鸟集》是印度诗人泰戈尔的代表作之一，也是世界上最杰出的诗集之一，它包括300余首清丽的小诗。白昼和黑夜、溪流和海洋、自由和背叛，都在泰戈尔的笔下合二为一，短小的语句道出了深刻的人生哲理，引领世人探寻真理和智慧的源泉。
	

有三种防塌陷的方法：

1. clear元素：none，left，right，both4种；
2. 给父元素添加overflow属性
3. 给父元素添加浮动

3.3 CSS的定位模型

• static：自然模型
• relative：相对定位模型
• absolute：绝对定位模型
• fixed：固定定位模型
• sticky：磁贴定位模型

这一部分的代码内容后期再加上。