CSS常用属性

炫酷CSS

HTML与CSS的关系

CSS（Cascade Style Sheets）层叠样式表, 是一种用来表现HTML文件样式的计算机语言。

CSS 目前最新版本为 CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能。

CSS语法格式

注释

可以将注释插入 CSS代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

/* 这里的内容就是注释 */

/*
	也可以这样多行注释
 */

行内式

行内式将样式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只适用于当前元素，在设定某个元素的样式时比较常用。但是这种写法会使得页面非常杂乱无章，真正开发中实际上是使用嵌入式或引入外联样式文件的方式来进行渲染的。

<!-- 设置指定的div的宽度和高度，背景色为黑色 -->
<div style="width:200px;height:300px;background:black;"></div>

嵌入式

嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套<style>标签，在<style>中通过选择器的方式调用指定的元素并设置相关 CSS。

选择器名称 {
    属性:属性值;
    ...
}

<style type="text/css">
    /* 使用元素选择器给所有div设置宽度和高度，背景色为黑色 */
    div {
        width:200px;
        height:300px;
        background:black;
    }
</style>

注意：

• css 声明要以分号;结束，声明以{}括起来
• 建议一行书写一个属性
• 若值为若干单词，则要给值加引号，如 font-family: "agency fb";

引入外联样式文件

在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达到更好的重用效果。

style.css

/* 使用元素选择器给所有div设置宽度和高度，背景色为黑色 */
div {
    width:200px;
    height:300px;
    background:black;
}

index.html

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

rel: 规定当前文档与被链接文档之间的关系。

stylesheet: 文档的外部样式表。

很多时候，大量的 HTML 页面使用了同一个CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中，然后通过<link />元素去引入它。

CSS选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

CSS 选择器有很多，掌握常用的即可。

基本选择器

*通用选择器

/* 初始所有元素的内外间距为0 */
* {
	margin: 0;
	padding: 0;
}

元素选择器

选择器名称 {
    属性:属性值;
    ...
}

/* 使用元素选择器给所有div设置宽度和高度，背景色为黑色 */
div {
    width:200px;
    height:300px;
    background:black;
}

.类选择器

.class属性值 {
    属性:属性值;
    ...
}

/* 使用类选择器给所有class="dv"的元素设置宽度和高度，背景色为黑色 */
.dv {
    width:200px;
    height:300px;
    background:black;
}

#id选择器

#id属性值 {
    属性:属性值;
    ...
}

/* 使用id选择器给id="dv"的元素设置宽度和高度，背景色为黑色 */
#dv {
    width:200px;
    height:300px;
    background:black;
}

分组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

选择器1,
选择器2, ...{
    属性:属性值;
    ...
}

/*
	使用元素选择器给所有p元素
	使用id选择器给id="name"的元素
	设置字体颜色为红色，字体大小为20px
*/
p,
#name {
	color: red;
	font-size: 20px;
}

组合选择器

CSS 组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。

后代选择器（派生选择器）

用于选择指定标签元素下的后辈元素，以空格分隔。

父元素 子元素(可以继续获取子元素的子元素) {
    属性:属性值;
    ...
}

/*
	使用类选择器给所有class="food"的元素
	的所有子元素li设置蓝色的边框
*/
.food li {
    border: 1px solid blue;
}

/*
	使用类选择器给所有class="food"的元素
	的所有子元素li
	的所有子元素ul
	的所有子元素li设置红色的边框
*/
.food li ul li {
    border: 1px solid red;
}

<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

CSS常用属性

背景

背景属性用于定义HTML元素的背景效果。

background-color

设置元素的背景颜色。

/* 
	设置body元素的背景色为灰色
	两种方式效果一致
*/
body {
    background-color:gray;
    /* 另一种方式 */
    background:gray;
}

background-image

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

/* 
	设置body元素的背景为图片
	两种方式效果一致
*/
body {
    background-image: url(img/Daniel_Wu.jpg);
    /* 另一种方式 */
    background: url(img/Daniel_Wu.jpg);
}

background-repeat

设置是否重复图像及如何重复背景图像。

/* 
	设置body元素的背景为图片，图片不重复显示
	两种方式效果一致
*/
body {
    background-image: url(img/Daniel_Wu.jpg);
    background-repeat: no-repeat;
    /* 另一种方式 */
    background: url(img/Daniel_Wu.jpg) no-repeat;
}

background-repeat可选的值。

值	描述
repeat	默认。背景图像将在垂直和水平方向重复
no-repeat	背景图像仅显示一次
repeat-x	背景图像水平方向重复
repeat-y	背景图像垂直方向重复

文本

color

设置文本的颜色。

/* 字体颜色蓝色 */
body {
    color:blue;
}
/* 字体颜色绿色 */
h1 {
    color:#00ff00;
}
/* 字体颜色红色 */
h2 {
    color:rgb(255,0,0);
}

text-align

设置文本对齐方式，center（居中），left（左对齐），right（右对齐）。

body {
    text-align:center;
}

text-decoration

规定添加到文本的修饰，属性值：none、underline、overline、line-through。

• underline：对文本添加下划线。
• overline：对文本添加上划线。
• line-through：对文本添加中划线。
• none：关闭原本应用到元素上的所有横线样式。

h3 {
    text-decoration:underline;
}

text-indent

设置文本首行缩进。

p {
    text-indent: 2em;
}

字体

font-family

文本字体，该属性设置文本的字体。

font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体，所以尽量将不常见的字体靠前，将最常见的字体放置在最后，作为替补。

注意：

• 只有当字体名中含有空格或符号或汉字时，才需要在font-family声明中加引号：

  body {
      font-family: "arial black";
  }
  

• 多个字体系列是用一个逗号分隔指明

  /* 靠前的先生效 */
  p {
      font-family: "微软雅黑", "黑体", "agency fb";
  }
  

font-size

文本大小

/* 字体大小50px */
body {
    font-size: 50px;
}

/* 字体大小25px */
#span1 {
    font-size: 25px;
}

font-weight

字体加粗，该属性设置文本的粗细。100 ~ 900：为字体指定了 9 级加粗度。

font-weight: blod;可以将文本设置为粗体。

400 等价于 normal；

700 等价于 bold。

body {
    font-weight: 100;
    font-weight: 900;
    /* 下面两种方式效果一致 */
    font-weight: 700;
    font-weight: blod;
    /* 下面两种方式效果一致 */
    font-weight: 400;
    font-weight: normal;
}

列表

list-style

设置列表样式，list-style可选的值。

值	描述
none	无标记
disc	默认，标记是实心圆
circle	标记是空心圆
square	标记是实心方块
decimal	标记是数字
decimal-leading-zero	标记是0开头数字(01, 02, 03…)
lower-roman	标记是小写罗马数字(ⅰ, ⅱ, ⅲ,…)
upper-roman	标记大写罗马数字(Ⅰ, Ⅱ, Ⅲ,…)
lower-alpha	标记是小写英文字母(a, b, c,…)
upper-alpha	标记是大写英文字母(A, B, C,…)

/* 列表样式无标记 */
.food li ul li {
    list-style: none;
}

对齐方式

text-align

规定元素中的文本的水平对齐方式。属性值如下。

值	描述
left	默认值，文本排列到左边
right	文本排列到右边
center	文本排列到中间
justify	文本两端对齐

display

display属性用于定义元素的显示类型。

属性值如下。

值	描述
none	此元素不会被显示
block	此元素将被显示为块级元素，此元素前后会带有换行符
inline	此元素被显示为内联元素，元素前后没有换行符
inline-block	行内块元素，li中使用会变为类似导航的效果

盒子模型

border、padding、margin三个属性构成了盒子模型。

border

设置所有的边框属性。

1.可同时设置边框的宽度、样式、颜色

/* 设置边框和宽高 */
div{
    border: 1px solid black;/* 设置粗细为1px的黑色实心线边框 */
    width: 200px;/* 宽 */
    height: 100px;/* 高 */
}

2.使用border-width、border-style、border-color单独设置

div {
    border-width: 1px;/* 粗细1px */
    border-style: solid;/* 实心线 */
    border-color: black;/* 黑色 */
}

border-style的属性

值	描述
none	无边框
dotted	点状边框
dashed	虚线边框
solid	实心线边框
double	双实线边框

padding

设置元素所有内边距的宽度，默认按照上右下左的顺序设定，或者设置各边上内边距的宽度。

/* 设置上右下左的内边距 */
div {
    padding:10px 5px 15px 20px;
}

单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-righ。

/* 设置上右下左的内边距 */
div {
    padding-top: 10px;
    padding-left: 5px;
    padding-bottom: 15px;
    padding-right: 20px;
}

margin

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

/* 设置上右下左的外边距 */
div {
    margin:10px 5px 15px 20px;
}

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right。

/* 设置上右下左的外边距 */
div {
    margin-top: 10px;
    margin-left: 5px;
    margin-bottom: 15px;
    margin-right: 20px;
}

auto 可以设置居中效果。

div {
    margin: 0px auto;
}

auto：自动，可以理解为居中的意思，浏览器自动计算外边距。

margin: 0px auto; 0或者0px表示上下间距为0px，auto表示左右外边距自动计算，表现为居中状态。

测试

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<style>
			.a_div {
				width: 300px;
				height: 300px;
				border: 1px solid red;
                /* 设置上右下左的外边距 */
				margin: 100px;
			}

			.b_div {
				width: 200px;
				height: 200px;
				background: yellow;
                /* 设置左外边距 */
				margin-left: 20px;
                /* 设置上外边距 */
				margin-top: 20px;
                /* 设置上右下左的内边距 */
				padding: 20px;
			}
		</style>
	</head>

	<body>
		<div class="a_div">
			<div class="b_div">你好</div>
		</div>
	</body>

</html>

CSS定位和浮动

CSS 定位 (positioning) 属性允许你对元素进行定位 ，定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制：普通流、浮动和定位

除非专门指定，否则所有框都在普通流中定位，即普通流中的元素的位置由元素在HTML 中的位置决定浏览器在读取 HTML 源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。默认的书写方式即是普通流。

定位position

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

值	描述
static	默认值，普通流
relative	相对定位，其子元素如果使用定位相对于它的位置改变
absolute	绝对定位，相对于其父元素的位置作为参照物
fixed	固定定位，相对于浏览器窗口作为参照物

static：默认值，普通流（忽略left，top，right，bottom 或者z-index 声明）。

relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过left，top，right，bottom属性进行改变，其子元素如果使用定位相对于它的位置改变。

absolute：生成绝对定位的元素，相对于其第一个父元素进行定位，如果父元素没有设置relative属性，则向上继续寻找，直到body元素。元素的位置通过left，top，right，bottom 属性进行规定。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left，top，right，bottom 属性进行规定。

浮动float

float 的属性值有none、left、right。

值	描述
none	默认值，不浮动
left	左浮动，元素从左边开始并列显示为一行
right	右浮动，元素从右边开始并列显示为一行

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS定位和浮动</title>
		
		<style type="text/css">
			
			.a_div {
				width: 200px;
				height: 200px;
				background: black;
                /* 相对定位，其子元素如果使用定位相对于它的位置改变 */
				position: relative;
				margin: 0 auto;
			}
			
			.b_div {
				width: 50px;
				height: 50px;
				background: yellow;
                /* 
                	绝对定位，相对于其第一个父元素进行定位，
                	如果父元素没有设置relative属性，则向上继续寻找，直到body元素
                */			
				position: absolute;
				top: 0px;
				left: 0px;
			}
			
			.c_div {
				width: 50px;
				height: 50px;
                 /* 相对浏览器绝对定位 */
				position: fixed;
				bottom: 20px;
				right: 20px;
				background: blue;
			}
			
			#div1 {
				width: 100px;
				height: 100px;
				background: red;
				float: left; /* 左浮动 */
			}
			#div2 {
				width: 100px;
				height: 100px;
				background: blueviolet;
				float: left; /* 左浮动 */
			}
			#div3 {
				width: 100px;
				height: 100px;
				background: darkcyan;
				float: left; /* 左浮动 */
			}
			#div4 {
				width: 100px;
				height: 100px;
				background: darksalmon;
				float: left; /* 左浮动 */
			}
			
			/* 鼠标移动至指定元素时修改样式 */
			#div4:hover {
				background: black;
			}
		</style>
	</head>
	<body>
		
		<div class="a_div">
			<div class="b_div"></div>
		</div>
		
		<div class="c_div"></div>
		
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
		
	</body>
</html>

案例练习：百度注册

百度注册，利用HTML+CSS+DIV开发百度注册页面。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>注册百度账号</title>
		<!-- 引入外部css文件 -->
		<link rel="stylesheet" href="css/baidu.css" />
	</head>

	<body>
		<!-- --------------------头部 begin-------------------- -->
		<div id="head">
			<!-- 百度logo -->
			<div id="head_logo">
				<a href="http://www.baidu.com">
					<img src="img/baidu.gif" />
				</a>
			</div>
			<!-- 百度登录 -->
			<div id="head_login">
				<span>我已注册，现在就</span>
				<input type="button" value="登录" />
			</div>
		</div>
		<!-- --------------------头部 end---------------------- -->
		
		<!-- --------------------导航 begin-------------------- -->
		<div id="nav">
			<img src="img/reg_hr.png" />
		</div>
		<!-- --------------------导航 end---------------------- -->

		<!-- --------------------注册 begin-------------------- -->
		<div id="register">
			<!-- 注册表单 -->
			<div id="reg_form">
				<form>
					<!-- 输入框 -->
					<p><label>用户名</label><input placeholder="请设置用户名" /></p>
					<p><label>手机号</label><input placeholder="可用于登录和找回密码" /></p>
					<p><label>密码</label><input placeholder="请设置登录密码" /></p>
					<p>
						<label>验证码</label><input placeholder="请输入验证码" style="width: 190px;" />
						<!-- 短信按钮 -->
						<button id="reg_form_msg">获取短信验证码</button>
					</p>
					<!-- 注册协议 -->
					<div id="reg_form_isCheck">
						<input type="checkbox" style="width: 14px;height: 14px;" />
						<span>阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a></span>
					</div>
					<!-- 注册按钮 -->
					<div id="reg_form_btn">
						<button type="button">注册</button>
					</div>
				</form>
			</div>

			<!-- 注册二维码 -->
			<div id="reg_qrcode">
				<img src="img/qrcode.png" />
			</div>
		</div>
		<!-- --------------------注册 end---------------------- -->

		<!-- --------------------版权信息 begin----------------- -->
		<div id="copyright">
			<p>2018 &copy;Baidu</p>
		</div>
		<!-- --------------------版权信息 end------------------- -->
	</body>

</html>

baidu.css

/* 采用什么编码解析文件 */
@charset "utf-8";

/* ------------------------头部 begin---------------------- */
/*
 * 使用id选择器渲染id="head"标签的样式
 */
#head {
	width: 1000px;/* 宽度1000px */
	/* 上外边距20px 左外边距自动计算居中 下外边距0px 右外边距自动计算居中 */
	margin: 20px auto 0px auto;
}

/*
 * 使用id选择器定位到id="head"标签
 * 然后渲染其子标签id="head_logo"的样式
 */
#head #head_logo {
	width: 330px;/* 宽度330px */
	/* 设置背景图片不重复并靠右 */
	background: url(../img/logo.png) right no-repeat;
	/* 设置背景的位置 y轴上移5px */
	background-position-y: -5px;
	cursor: pointer;/* 鼠标变手势 */
	float: left;/* 左浮动 */
	/* 内下间距5px 为了和导航之间保持距离 */
	padding-bottom: 5px;
}

/*
 * 使用id选择器定位到id="head"标签
 * 然后渲染其子标签id="head_login"的样式
 */
#head #head_login {
	float: right;/* 右浮动 */
	font-size: 10px;/* 字体大小 */
	margin-top: 10px;/* 上外间距10px */
}

/*
 * 使用id选择器定位到id="head"标签
 * 然后渲染其子标签id="head_login"的子标签input的样式
 */
#head #head_login input {
	font-weight: 700;/* 加粗 */
	color: #666;/* 字体颜色 */
	height: 32px;/* 输入框高度 */
	width: 64px;/* 输入框宽度 */
	border: 0;/* 边框为0 */
	/* 设置背景图片不重复并通过具体坐标获取显示部分 */
	background: url(../img/reg_icons.png) no-repeat 0 -48px;
	font-family: Arial, "宋体";/* 字体种类 */
}
/* ------------------------头部 end---------------------- */

/* ------------------------导航 begin---------------------- */
/*
 * 使用id选择器渲染id="nav"标签的样式
 */
#nav {
	width: 1200px;/* 宽度1200px */
	margin: 0 auto;/* 上外间距0px 居中 */
}
/* ------------------------导航 end---------------------- */

/* ------------------------注册 begin---------------------- */
/*
 * 使用id选择器渲染id="register"标签的样式
 */
#register {
	width: 950px;/* 宽度950px */
	/* 上外边距20px 左外边距自动计算居中 下外边距0px 右外边距自动计算居中 */
	margin: 20px auto 0px auto;
}

/*
 * 使用id选择器渲染id="register"标签的样式
 * 然后渲染其子标签id="reg_form"的样式
 */
#register #reg_form {
	float: left;/* 左浮动 */
	text-align: right;/* 文本靠右 */
	font-size: 14px;/* 字体大小 */
	color: #666;/* 字体颜色 */
	font-weight: 700;/* 字体粗细 */
}

/*
 * 使用id选择器渲染id="register"标签的样式
 * 然后渲染其子标签id="reg_form"的子标签label的样式
 */
#register #reg_form label {
	margin-right: 10px;/* 右外间距10px */
}

/*
 * 使用id选择器渲染id="register"标签的样式
 * 然后渲染其子标签id="reg_form"的子标签p的子标签input的样式
 */
#register #reg_form p input {
	height: 38px;/* 高度38px */
	width: 350px;/* 宽度350px */
	border: 1px solid #ddd;/* 边框1px 实心线 颜色#ddd */
	font-size: 14px;/* 字体大小 */
	color: #666;/* 字体颜色 */
	margin-bottom: 6px;/* 每个input底部外间距6px */
	text-indent: 10px;/* 首行缩进10px */
}

/*
 * 使用id选择器渲染id="register"标签的样式
 * 然后渲染其子标签id="reg_form"的子标签id="reg_form_msg"的样式
 */
#register #reg_form #reg_form_msg {
	height: 42px;/* 高度42px */
	width: 156px;/* 宽度156px */
	background: #f7f7f7;/* 背景颜色 */
	font-size: 14px;/* 字体大小 */
	border: 1px solid #ddd;/* 边框1px 实心线 颜色#ddd */
	cursor: pointer;/* 鼠标变手势 */
}

/* 鼠标移动至指定标签改变样式 */
#register #reg_form #reg_form_msg:hover {
	background-color: #eee;
}

/*
 * 使用id选择器渲染id="register"标签的样式
 * 然后渲染其子标签id="reg_form_isCheck"的样式
 */
#register #reg_form_isCheck {
	font-size: 10px;/* 字体大小 */
	font-weight: 400;/* 字体粗细 */
	margin-right: 30px;/* 设置右外间距30px */
}

/*
 * 使用id选择器渲染id="register"标签的样式
 * 然后渲染其子标签id="reg_form_isCheck"的子标签a的样式
 */
#register #reg_form_isCheck a {
	text-decoration: none;/* 去除所有字体横线样式 */
}

/*
 * 使用id选择器渲染id="register"标签的样式
 * 然后渲染其子标签id="reg_form_btn"的子标签button的样式
 */
#register #reg_form_btn button {
	height: 50px;/* 高度50px */
	width: 352px;/* 宽度352px */
	background: #4490f7;/* 背景颜色 */
	border: 0;/* 边框0 */
	color: white;/* 字体颜色 */
	font-size: 16px;/* 字体大小 */
	font-weight: 700;/* 字体粗细 */
	border-radius: 3px;/* 边框变圆角 */
	margin-top: 20px;/* 上外间距20px */
	font-family: Arial, "宋体";/* 字体类型 */
	cursor: pointer;/* 鼠标变手势 */
}

/*
 * 使用id选择器渲染id="register"标签的样式
 * 然后渲染其子标签id="reg_qrcode"的样式
 */
#register #reg_qrcode {
	float: right;/* 右浮动 */
	margin-top: 15px;/* 上外间距15px */
	margin-right: -10px;/* 右外间距-10px */
}
/* ------------------------注册 end---------------------- */

/* ---------------------版权信息 begin------------------- */
/*
 * 使用id选择器渲染id="copyright"标签的样式
 */
#copyright {
	text-align: center;/* 文本居中 */
	color: #7a77c8;/* 字体颜色 */
	font-size: 10px;/* 字体大小 */
	margin-top: 520px;/* 上外间距520px */
}
/* ---------------------版权信息 end------------------- */

演示效果。