CSS基础知识

本文详细介绍了CSS的基本使用方法,包括行内样式、内部样式和外部样式等三种应用方式,并讲解了CSS选择器、文本属性、字体属性、背景属性、列表属性、表格属性、边框属性等内容。
1 CSS入门
1.1 css的使用方式
1)行内样式
注意:
1)使用标签的style属性进行css控制,css写在style属性值中
2)弊端:只能控制一个标签的样式
<a href="xxxx" style="font-size:19px;color:#090">超链接</a>


2)内部样式
注意:
1)使用style的标签进行css控制,css内容写在style标签体内
2)一次控制多个标签的样式
3)和html标签混杂在一起,不好维护。css内容无法在多个html页面中重用
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>

3)外部样式(推荐使用)
注意:
1)建立独立后缀为css的文件,css内容写在该文件中
2)在使用css的html页面中,导入外部css文件

<!-- 导入外部css文件
href  : 表示外部css文件的位置
rel: 表示关联的是样式表
-->
<link href="01.css" rel="stylesheet"/>



2 CSS语法

2.1 选择器
(1)标签选择器
作用: 选择同名的标签
div{
font-size:24px;
color:#F00;
}

(2)类选择器: 选择同类的标签
.c1{
font-size:24px;
color:#F00;
}
注意:
1)选择的标签必须有class的属性。同类的标签使用同名
2)当一个标签同时被标签选择器和类选择器选择,那么类选择器优先!!!

(3)id选择器:选择一个标签
#d1{
font-size:24px;
color:#0F0;
}
注意:
1)选择的标签必须有id属性。
2)在同一个html页面中,建议不要出现两个同名的id属性的标签,后面使用javascript代码选择标签的时候,getElementById("id属性值")
3)id选择器的优先级最高!



(4)并集选择器
.c1,#d1{
font-size:24px;
color:#0F0;
}
作用: 当多个选择器的css内容相同,那么可以使用并集选择器来合并css内容。


(5)交集选择器

/*div里面的span标签*/
.c1 span{ 
font-size:24px;
color:#0F0;
}

作用: 选择某个选择器中的子标签。


(6)伪类选择器
作用:控制标签在不同状态下的样式。

标签有四种状态:
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活(按下但没有松开)的状态
visited: 已经被访问过的状态(鼠标点下且松开)



<style type="text/css">
/*使用link伪类控制--没有访问过的状态*/
a:link{
font-size:24px;
color:#F00;
}

/*使用visited伪类控制--已经被访问过的状态(鼠标点下且松开)*/
a:visited{
font-size:24px;
color:#CCC;
text-decoration:none;
}

/*使用hover伪类控制-鼠标经过的状态*/
a:hover{
font-size:24px;
color:#00F;
text-decoration:none; 
}


/*使用active伪类控制--鼠标激活(按下但没有松开)的状态*/
a:active{
font-size:24px;
color:#0F0;
text-decoration:underline;
}





/*注意:
1)在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2)在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有
效的。

   正确顺序: link visited hover active
*/

案例:给表格每一行鼠标经过加上背景
<title>无标题文档</title>
<style type="text/css">
/*使用类选择器选中下面的三行*/
.c:hover{
	background-color:#036;
	}
</style>

</head>

<body>
<table border="1" align="center" width="400px" height="300px">
<tr>
<td>姓名</td>
<td>班级</td>
<td>成绩</td>
</tr>


<tr class="c">
<td>刘诗诗</td>
<td>java</td>
<td>60</td>
</tr>

<tr class="c">
<td>何炅</td>
<td>java</td>
<td>70</td>
</tr>

<tr class="c">
<td>鹿晗</td>
<td>java</td>
<td>80</td>
</tr>

</table>

</body>



2.2 常用的CSS属性和值
(1)CSS文本

<style type="text/css">

body{
/*color:颜色*/
color:#F00;
/*字符间距*/
letter-spacing:10px;
/*对齐方式*/
text-align:center;
/*文本修饰  下划线-underline,  中划线(line-through)   上划线-overline  没有:none*/
text-decoration:line-through;
/*单词间距*/
word-spacing:30px;
}
</style>



<body>
今天 天气 不错!
</body>
</html>



(2)CSS字体
<style type="text/css">
body{
/*字体类型 */
/*font-family:"宋体";*/
/*字体大小*/
/* font-size:24px;*/
/*字体样式: 正(normal默认)  斜(italic)*/
/*font-style:italic;*/
/*字体粗细  bold 加粗*/
/*font-weight:bold;*/
/* font: 简写属性 */
font:italic bold 36px "黑体";
}
</style>

<body>
步步惊心
</body>
</html>



(3)CSS背景
<style type="text/css">
body{
/*背景颜色*/
background-color:#0CF;
/*背景图片*/
background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
/*设置背景图片是否重复,或如何重复
not-repeat: 不重复
repeat-x: x轴重复
repeat-y: y轴重复
repeat: x和y轴重复(默认)
*/
background-repeat:no-repeat;
/*设置背景的起始位置*/
background-position:top center;
/*简写属性*/
background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;

}
</style>
</head>

(4)CSS列表

<style type="text/css">
ul{
/*列表符号类型*/
list-style-type:none;
/*设置列表符号的图片*/
list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);
}
</style>
</head>


<body>
系统菜单
<ul>
<li>步步惊心</li>
<li>女医明妃传</li>
<li>醉玲珑</li>
</ul>
</body>
</html>


(5)CSS表格
<style type="text/css">
		table{
			/*合并表格的边框*/
			border-collapse:collapse;
		}


	</style>
	</head>


	<body>
	<table border="1px" width="400px" height="200px" align="center">
		<caption>2014年期末考试成绩单</caption>
		<thead>
		<tr>
			<th>姓名</th>
			<th>班级</th>
			<th>成绩</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>龙葵</td>
			<td>计算机1班</td>
			<td>80</td>
		</tr>
		<tr>
			<td>若曦</td>
			<td>计算机2班</td>
			<td>78</td>
		</tr>
		<tr>
			<td>金俊勉</td>
			<td>软件1班</td>
			<td>90</td>
		</tr>
		</tbody>
	</table>
	</body>
	</html>

(6)CSS边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css边框</title>
	<style type="text/css">
		div{
			/*边框颜色*/
			/*简写属性
			  1) 默认设置方向属性: 上 右 下 左
			  2)如果当前方向没有设置颜色,那么取对面的颜色
			*/
			/*
			border-color:#F00;
			*/
			/*
			border-left-color:#F00;
			border-right-color:#0F0;
			border-top-color:#00F;
			border-bottom-color:#C90;
			*/
			
			/*边框宽度*/
			/*简写属性
			
			*/
			/*
			border-width:10px;
			*/
			/*
			border-left-width:10px;
			border-right-width:20px;
			border-top-width:30px;
			border-bottom-width:40px;
			*/
			
			/*边框样式(注意: 边框只有加了border-style才会显示出来)
			solid: 单实线
			dashed:虚线
			dotted: 点
			double: 双实线
			*/
			
			/*简写属性*/
			/*
			border-style:solid;
			*/
			
			/*
			border-left-style:solid;
			border-right-style:dashed;
			border-top-style:dotted;
			border-bottom-style:double;
			*/
		
			/*所有边框属性的简写属性*/
			border:2px solid #F00;
		}
	</style>
	</head>


	<body>
	<div>div1</div>
	</body>
	</html>

3 盒子模型
3.1 定义
可以把html页面上每个标签看做是一个盒子。
盒子相关的属性:
宽度和高度(width和height): 决定这个盒子的容量
内边距(padding): 盒子边框与内容的距离
边框(border): 盒子的厚度

外边距(margin): 盒子与盒子之间的距离







4. CSS定位
相对定位:relative(相对自己之前的位置)
绝对定位:abosolute(相对父标签的位置)
固定定位:fixed(相对浏览器位置固定,不随着滚动条的拖动而位置改变)
div{
width:100px;
height:100px;
border:10px solid #999;}
#div1{
background-color:#006;
 }
#div2{
background-color:#0C0;}
#div3{
background-color:#3F0;
/*position:relative;
top:10px;
left:10px;*/
/*
position:absolute;
top:20px;
left:20px;*/
position:fixed;
top:200px;
left:450px;
}



























































































评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值