css笔记一

企业里面在html页面开发中有2种布局方式:

table布局
Css+div布局(主流,因为属性更加强大,div使用更加方便)


CSS+div:
  html的标签
	div标签  `<div></div>`   块级元素
		自动换行
	
span标签 `<span></span> 行`内元素
		在同一行

区别:
		div：自动换行,可以设置宽高
		span: 在同一行,不可以设置宽高
	
转换:
		display: inline; div转换span
		display: block;  span转换div

一 .什么是css？

	CSS：Cascading Style Sheets ----层叠样式表

二 .css的作用？

	   作用：专门用来美化网页的

三.如何使用css?

1. css的三种方式 （熟悉）
		       
		       1 内嵌方式
				style="font-size:500px; color: red;"
					属性名1:属性值1;属性名2:属性值3;....
		      
		       2 内部方式
				<style>
					div
					{
						color: red;
						font-size: 50px;
					}
				</style>
				
		       
		       3 外部方式
				<link rel="stylesheet" href="../css/css.css" />
				
			优先级: 谁离标签近谁的优先级高
2. css的选择器 
			 只适用于内部方式和外部方式
		     1 元素选择器:设置所有标签
			      标签名
		     2 类选择器:设置多个标签的
			      条件：需要在标签上设定class属性
		     3 ID选择器:设置单个标签
			      条件：需要在标签上设定ID属性

			优先级： ID选择器(使用于单个)>类选择器(适用于多个)>元素选择器(适用于全部)


		扩展:
			属性选择器
				格式:标签名[属性名="属性值"]{...}
			包含选择器
				格式:父标签 后代标签{}
	     
 3 .css的常用属性
		
			1/*文本内容颜色*/
			color: red;
			
			2/*边框*/
			border: 1px solid blue;
			
			3/*设置宽度和高度*/
			width: 300px;
			height: 150px;
			
			4/*设置背景颜色*/
			background-color: black;
			
			5/*设置背景图片*/
			background-image:url(../img/middle01.jpg);
			
			6/*设置div显示和隐藏*/
			display: block;
			            block：显示 默认值
				    none:隐藏

		         7/*去除超链接下划线*/
			   text-decoration: none;

			 8 /*居中*/
				text-align
4. css的浮动
		  作用：让所有div在同一行
		  
		  格式:
		  float:可以用来控制div标签
			取值：left
			      right

	          
		  clear: 清除浮动
			取值
				left:清除左边浮动
				right:清除右边浮动
				both:自己判断自动清除

5. css的盒子模型

		    外边距 ：margin
			  取值：
				left
				right
				top
				bottom


		    内边距 : padding
			  取值：
				left
				right
				top
				bottom