02-css

02-css

cascading style sheets 层叠样式表

css+div

<style>
    选择器{
        属性名：属性值；
        属性名2：属性值2；
    }
</style>

• 块标签
  • div：默认占一行，自动换行
  • span：内容显示在同一行

1.选择器

• ID选择器 以#开头 唯一

#ID的名称{
	属性名：属性值；
	...
}

• 类选择器 以.开头

.类的名称{
	属性名：属性值；
	...                                                        
}

• 选择器优先级

行内样式>ID选择器>类选择器>元素选择器

就近原则 哪个选择器离得近用哪个

• 其他选择器

  • 选择器分组

  选择器1，选择器2{属性名：属性值}

  • 属性选择器

  <a href="3" title=" "></a>
  

  a[title]([][]){
      属性名：属性值
  }
  

  • 后代选择器 找出所有后代

  h1 em{...}
  

  • 子元素选择器 找出某个儿子

  h1 > em{...}
  

  • 伪类

  a:link{color:red} 未访问
  a:visited{..} 已访问
  a:hover{...} 光标移动在上
  a:active{...} 选定的
  

2.css引入方式

2.1 外部样式

同时修改多个html文件的属性

style.css
   .shuiguo{
   	color=" ";
}

在html中
<link rel="stylesheet" href="style.css"/>

2.2 内部样式

html中的style

2.3行内样式

只改变一行的样式

<div class="shuiguo" style="color:green">
    
</div>

3.浮动

CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

			float属性:
				left
				right
			
			clear属性: 清除浮动
				both : 两边都不允许浮动
				left: 左边不允许浮动
				right : 右边不允许浮动
			流式布局

流式布局

<div style="float:left";></div>

属性：

float:left/right

浮动的元素会脱离正常的文档流，不占文档流的空间

clear：消除浮动

​ both：两边都不允许浮动

​ left：左边

​ right：

line-heigh = heigh时，字体居中

4.注册页面

4.1 盒子模型

​ 内边距 padding-top div与div之间的距离

​ padding-left

​ padding-right

​ padding-left

<!--四周都留10px-->
padding:10px
<!--上下10px 左右20px-->
padding:10px 20px;
上 右 下 左

​ 外边距 margin-top

4.2 绝对定位

position：absulte

​ top:距离顶部的位置

​ left：距离左边的位置