CSS小记

一. CSS概述

<!DOCTYPE html>
		<html>
		  <head>
		    <meta charset="utf-8">
		    <title>css概述</title>
		  </head>
		  <body>
		    <h1>css???</h1>
		    <p>
		      CSS:层叠样式表语言
		      一种样式表语言，专门修饰HTML页面的，让HTML页面更好看
		      CSS是离不开HTML的，离开了HTML就没有意义了
		    </p>
		  </body>
		</html>

二. HTML中嵌入CSS的方式

1. 内联定义方式

<div style="width:200px;height:200px;background-color: aqua;"></div>

内联定义的语法格式：

<标签 style="样式名:样式值;样式名:样式值;"></标签>

2. 定义样式块对象

a. id选择器和标签选择器

<style type="text/css">
		#mydiv {
		  width:200px;
		  height:200px;
		  background-color: aquamarine;
		}
		input {
		  width:500px;
		  height:50px;
		  border-color: blue;
		  border-style: dashed;
		  background-color: aliceblue;
		}
		</style>
		...
		<div id="mydiv"></div>
		用户名<input type="text" name="username" />

b. 类选择器

<style type="text/css">
		.student {
		  width:200px;
		  height:30px;
		  background-color: blue;
		}
		</style>
		...
		<input type="text" class="student" />
		<div class="student">3</div>

id选择器：用#id，只能用于唯一元素，优先级最高
类选择器：用.class，可用于多个元素，优先级高于标签选择器
标签选择器：直接用标签名，优先级最低

优先级顺序：id选择器 > 类选择器 > 标签选择器

3. 引入外部独立的CSS文件（最实用）

实际开发中常用：

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

#div1 {
		  width:400px;
		  height:200px;
		  background-color: blue;
		  position:absolute;
		  top:100px;
		  left:300px;
		}
		#div2 {
		  width:300px;
		  height:200px;
		  background-color: red;
		  position:absolute;
		  top:120px;
		  left:320px;
		}

三. 常见的CSS样式

1. 隐藏样式

.citys {
		  display: inline-block; /* 也可用 none/block */
		}

display:none 隐藏元素
display:block 块级显示
display:inline-block 行内块显示

2. 字体样式

#nameerror {
		  font-size: 12px;
		  color: red;
		}

3. 文本装饰

.baidu {
		  text-decoration: none; /* 去下划线 */
		}

4. 列表样式

#county {
		  list-style-type: none;
		}

5. 鼠标悬停效果

#shubiao:hover {
		  color: red;
		  cursor: pointer;
		}

6. 补丁样式（margin/padding）

#divv {
		  margin-top: 100px;   /* 外补丁 */
		  padding-right: 200px;/* 内补丁 */
		}

7. 浮动效果

#indiv {
		  float: right;
		}

8. 定位

#mydiv2 {
		  position: absolute;
		  top: 0px;
		  left: 0px;
		}

四. 小结

CSS让HTML页面更美观、灵活
常用选择器：id、class、标签
开发中推荐外部CSS文件统一管理样式
掌握常用布局、字体、装饰、浮动、定位等样式