静态网页笔记02css

day02

1.css简介

*css:层叠样式表
	**层叠：一层一层的
	**样式表：
		很多属性与属性值
*使我的页面美观
*提高代码的可维护性，使样式和内容分离，提高显示功能

2.css和html的结合方式（四种结合方式）

（1）在每个html标签上面都有一个属性style，把css和html结合在一起
	- <div style="background-color: red;color:blue;">
  		  lalallallaalalalalala
	  </div>
（2）使用html的一个标签实现<style>标签，写在head里面
	-<style type="text/css">
		 div{
	            background-color: red;
	            color:blue;
    		}
	</style>
（3）在style标签里面使用语句	
		@import url(css文件路径);
			<style type="text/css">
    			@import "css/div.css";
			</style>
 (4) 使用头标签link,引入外部css文件
	 <link rel="stylesheet" type="text/css" href="css/div.css">
***第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式
***优先级（一般情况）
	由上到下，由外到内，优先级由低到高
	后加载的优先级更高
***格式 选择器名称{属性名:属性值;属性名:属性值;......}

3.css的基本选择器（三种）

**要对那个标签里面的数据进行操作
（1）标签选择器
	*使用我的标签名作为我的名称
		div{
		    background-color: yellow;
		    color:red;
			}
（2）class选择器
	*每个html标签都有一个属性class
	-<div class="ha">aaaaaa</div>
	 <p class="ha">bbbbbbbbb</p>
	    /*div.ha{
	            background-color: red;
	            color: blue;
	        }
	       p.ha{
	           background-color: red;
	           color: blue;
	       }*/
       .ha{
           background-color: red;
           color: blue;
       }
 (3)id选择器
	*每个html标签都有一个属性id
		  #hehe{
	            background-color: blue;
	            color:red;
	        }
 ***基本选择器优先级
	style优先级 > id选择器优先级 > class选择器优先级 > 标签选择器

4.css的扩展选择器

（1）关联选择器
	*<div><p>wwwwwww</p></div>
	*设置div标签里面的p标签的样式，嵌套标签里面的样式
	- div p{
	            background-color: red;
	        }
（2）组合选择器
	*<div></div>
	 <p></p>
	*把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
	- div,p{
	            background-color: red;
	        }
（3）伪元素选择器
	*在css里面提供了一些定义好的样式直接使用
	*比如超链接
		**超链接的状态
		  原始状态 鼠标悬停 点击状态  点击过后
		  :link   :hover   :active :visited
			/*原始状态*/
	        a:link{
	            background-color: red;
	        }
	        /*悬停状态*/
	        a:hover{
	            background-color: green;
	        }
	        /*点击状态*/
	        a:active{
	            background-color: blue;
	        }
	        /*点击过后*/
	        a:visited{
	            background-color: gray;
	        }

5.css的盒子模型

（1）边框
	border:统一设置:border: 5px solid blue;
	上：border-top:5px solid yellow;
	下:border-bottom:5px solid yellow;
	左:border-left:5px solid yellow;
	右:border-right:5px solid yellow;
（2）内边距
	padding:统一设置padding:20px;
	上：padding-top:20px;
	下：padding-bottom:20px;
	左：padding-left:20px;
	右：padding-right:20px;
（3）外边距
	margin:统一设置margin:50px;
	上：margin-top:20px;
	下：margin-bottom:20px;
	左：margin-left:20px;
	右：margin-right:20px;

6.css的布局的漂浮（了解）

float:
	**属性值：
		left:文本流向对象的右边
		right:文本流向对象的左边

7.css的布局定位

position:
	**属性值：
		-absolute:
		***将对象从文档流中拖出
		***	可以使用top,bottom等属性定位
		-relative:
		***不会将对象从文档流中拖出
		***	可以使用top,bottom等属性定位

8.案例：图文混排

9.图像签名

**在图片上面显示文字