css基础

css简介

css：层叠样式表，css是对html进行样式修饰语言。

css的引入方式

1.内嵌样式(css代码嵌入到html标签里面)

<div style="color:red;font-size: 100px;">你好啊 小朋友</div>

2.内部样式

<style type="text/css">
div{color:red;font-size: 100px;}
</style>

3.外部样式

<link rel="stylesheet" type="text/css" href="demo1.css"/>

4.@import()导出

<style type="text/css">
@import url("css地址");
</style>

**

css选择器

**
id选择器 (唯一性)

<div id='app'></div>
 #app{属性:属性值}

类选择器class

<div class='a'></div>
.a{width:100px,height:100px}

标签选择器

<p></p>
p{属性:属性值}

伪类选择器

a标签
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
<style type="text/css">
    a:link{color:blue}
    a:hover{color:red}
    a:active{color:yellow}
    a:visited{color:green}
</style>

属性选择器

<input type="password" />
基本选择器[属性=‘属性值’]{css属性}
<style type="text/css">
   input[type='password']{background-color: pink}
</style>

层次选择器
*通配符选择器

css属性

1.css浮动属性 float:left/right
什么叫脱离文档流?
文档流:脱离正常的网页排版布局,成为浮动流,不占据空间
清除浮动 clear:both 清除浮动
作用:解决高度塌陷和元素重叠问题

css文本属性
font-size:value 文本大小
font-weight:value 字体加粗
color:颜色 文本颜色
font-family:字体

text-align:left/center/right
line-height:value  设置行高
text-decoration:none/underline/overline/line-throgh    文本修饰
内外边距    margin/padding  
margin:  10px(上)  10px(右) 10px(下) 10px(左)   遵循上右下左原理   
margin-left:value  margin-right  margin-top  martin-bottom
边框样式
border:1px solid red    
下边框  border-bottom   上边框  border-top  左边框 border-left  右边框  borde-right''

css背景属性

 - background-color  背景颜色
 - background-image  背景图片
 - background-repeat   背景是否平铺
 - background-attachment   背景图像是否固定或者随着页面的其余部分滚动。
 - background-position  设置背景图像的起始位置   
 写法1
	background-color:red
 	background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;
写法2
background:	red url('smiley.gif') no-repeat fixed  center 
顺序:背景颜色 背景图片  背景是否平铺  背景是否固定  背景的起始位置

css盒模型(标准盒模型和怪异盒模型)

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距


1.标准模型中，盒模型的宽高只是内容（content）的宽高，
2.IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高，在IE6/5的低版本IE中

css定位

• static 静态定位
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位
• sticky 粘性定位