css基础

目录：

1. 布局方式
2. css的概念
3. css的三种引入方式
4. 选择器
5. 段落(文本)属性和边框以及背景属性

布局方式

• table网页设计 内容和样式(外观和布局)混合
• table+css网页设计 table布局,css指定外观
• div+css网页设计 div放内容,css指定样式(外观和布局), 内容和样式彻底分离

css的概念

CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一

用作布局以及样式

css的三种引入方式

1. 直接在标签中写入 行内样式

	
helloworld

缺点:

• css样式过长
• 样式和内容混合, 不便于后期的维护

2. 内部样式

   css的样式写在head标签中间

3. 外部样式

   将css写入到一个单独的文件中, 然后在html中直接引入

html:
	
css:
	 div{
		background-color: black;
		font-size: 25px
	}

回到目录

选择器

可以理解成作用域 ，会对此选择器发生作用。

div{
	background-color: red;
	font-size: 25px
}

1. 标签(html标签)选择器

css:
	div(html标签){
		font-size: 25px;
		background-color: bisque;
	}
html:
	
this is  div

2. ID选择器

css:
	#i1(id选择器){
		background-color: red;
	}
html:
	
ndsandjsanjdsnajd

注意:
id值相同, 存在问题:
   1. 不规范, id本身就是唯一的
   2. DOM的时候, 会出现问题

3. 类别选择器:

css:
	.c1{
		font-size: 25px;
		background-color: green;
	}
html:
	
this is  div
	
ndsandjsanjdsnajd
	
djskadksamfk
	
ry8ewr8ewq
	
hfgldhglfd

4. 通用选择器

* {margin:0;padding:0;}

将网页上所有的元素运用上此样式

5. 包含选择器:

css:
	.i1 span {
		background-color: coral;
	}
html:
	

		this is span
	
	
ndsandjsanjdsnajd
	bdjsabjdsbajdsja

6. 分组选择器

css:
	.c1,span{
		color: red;
	}
html:
	
ndsandjsanjdsnajd
	bdjsabjdsbajdsja

7. 伪类选择器:

:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式

css:
	a:hover{
		color: red;
	}
	a:active{
		color: green;
	}
	a:visited{
		color: aquamarine;
	}
html:
	跳转到百度

9. 优先级:
   行内样式 > ID选择器 > 类别选择器 > 标签选择器 > 通配符选择器

css:
	 #show1{color:gold;}
	.show {color:pink;}
	/*h1 {color:red;}*/
	* {color:green;}
html:
	 
优先级测试

回到目录

段落(文本)属性和边框以及背景属性

1. 边框:

border: 1px solid red;
如果你不知道你所占的div的大小的时候, 可以使用border
border-radius: 50% : 图像变圆角

2. 文本属性:

font-size: 设置字体的大小
color: 设置字体的颜色
text-align : left/right/center
line-height: 行高  字体居中显示   取值应和height的值一样
text-decoration: underline/line-through/overline

3. background-color: 颜色

颜色的取值:
	a. 颜色的英文名 (red/yellow等)
	b. 十六进制 (#dddddd)
	
	color:#292378; //6个十六进制数获得颜色
	color:#A64; //#AA6644的缩写
	color:red; //颜色关键字定义颜色
	color:rgb(100,159,170); //rgb定义颜色

ps: chrome控制台可以获取你想要的颜色

4. 背景图像:

background-img:
background-image: url("aaa.png");
background-repeat: repeat-y;
background-position-y: 图像位置  距离浏览器窗口顶部的距离

background-position-x: 图像位置  距离浏览器左边的距离

以下属性只对块级元素发生效果		

使用背景属性的一个常见案例：

当我们的网站流量比较大的时候，我们一般在请求图片资源时，并不是一张一张的去请求，而是一整张的去请求，然后根据需求对图像进行截取，这样的话，能够减少网络的请求，节省大量的费用

图像示例：

5. 布局属性:

外边距:

一个div和另一个div之间的距离

margin-top: 上边距
margin-bottom: 下边距
margin-left: 左边距
margin-right: 右边距

margin : 10px  : 上下左右  都是10px
margin : 10px 20px; 上下是10px 左右是20px
margin : 10px 20px 30px   
		margin-top: 10px;
		margin-right: 20px;
		margin-bottom: 30px;
		margin-left: 20px;
margin : 10px 20px 30px 40px;

内边距:

padding-top:10px;   文字距离div顶部的距离
padding-left:20px;  文字距离div左边的距离
padding-right:20px;
padding-bottom: 30px;



padding: 10px; 上下左右  都是10px
padding : 10px 20px; 上下是10px 左右是20px
padding : 10px 20px 30px   
		margin-top: 10px;
		margin-right: 20px;
		margin-bottom: 30px;
		margin-left: 20px;
padding : 10px 20px 30px 40px;


*{
margin:0;
padding:0;
}

取消自带的留白

6. 浮动属性:

float: left / right;

如果儿子飘起来, 老子管不住:
	 

7. display:

display: block;  设置行内元素成一个块级元素
display: inline; 设置块级元素成一个行内元素
display: inline-block; 此元素分别具有块级元素和行内元素的特性

8. overflow溢出处理属性

overflow: auto; 自动设置滚动条
	
overflow: none: 自动隐藏超出的部分

9. 定位属性

position : fixed/ releative/ absolute
	top: 0;
	left: 0;
	right: 0;
	bottom:0;

relative: 基于自己原来的位置进行定位, 单独使用没有任何的意义

absolute 是要和releative配合使用的

（祖先元素的定位方式（relative）来进行定位

	找祖先元素是否有定位，如果没有定位，找到，就相对body来定位
	如果找到祖先元素有定位，相对祖先元素来定位

10. z-index
    设置对象的层叠顺序

特点：
较大 number 值的对象会覆盖在较小 number 值的对象之上

示例：

回到目录