css入门

1. css的三种声明

• 在head标签中使用style标签声明

<style type="text/css">
		h3{color: blue;}
</style>

• 在标签上使用style属性进行声明

<a href="http://www.baidu.com" style="color: red">百度一下</a>

• 在head标签中使用link标签引入外部声明好的css文件

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

2. css的选择器

• 标签选择器:
  标签名{样式名1:样式值1;…}
  作用:会将当前网页内的所有标签增加相同的样式
• id选择器:
  #标签的id属性值{样式名1:样式值1;…}
  作用:给某个指定的标签添加样式
• 类选择器:
  .类选择器名{样式名1:样式值1;…}
  作用:给不同的标签添加相同的样式
• 全部选择器:
  *{样式名1:样式值1;…}
  作用:给所有的HTML标签添加相同的样式
• 组合选择器:
  选择器1,选择器2,…{样式名1:样式值1;…}
  作用:解决不同选择器之间重复样式的问题
• 子标签选择器:
  选择器1 子标签选择器{样式名1:样式值1;…}
• 属性选择器:
  标签名[属性名=属性值]{样式名1:样式值1;…}

3. css的定位
使用position属性，三个不同的值代表三个不同的定位方式,然后使用top，left，right，bottom进行设置

• 相对定位
  relative
  作用：相对元素原有位置进行移动

#img1{position: relative ;left:200px;}

• 绝对定位
  absolute
  作用：使元素参照界面或者相对父元素进行设置
  注意：如果使用父级元素成为参照物，必须使用相对定位属性，默认界面为参照物

#img1{position: absolute ;top:200px;}

• 固定定位
  fixed
  作用：将元素固定在界面指定位置，不随滚动条移动而移动

#img1{position: fixed ;top:200px;}

4. css的常见设置

• 边框设置：border
• 字体大小设置：font-size
• 字体格式设置：font-family
• 字体加粗设置：font-weight
• 字体颜色设置：color
• 背景颜色设置：background-color
• 背景图片设置：
  background-img：url（图片的相对路径）；
  background-repeate:no-repeate；//设置图片不重复
  background-size ：cover；//图片平铺整个界面
• 浮动设置:float:left/right
• 行高设置:line-height