一.css的使用方式
1)
行内样式 ”书写样式” />
弊端:不利于维护(style属性和html标签混合在一块
2) 内部样式
在head标签体中,书写style标签
3) 外部样式
A:创建一个独立一后缀名为.css结尾的css文件
选择器{
书写样式
}
B:导入外部css文件
书写:”xx.css” rel=”stylesheet”/>
二 CSS的语法
选择器(id选择器,类选择器,标签选择,并集选择器,交集选择器,通用选择器){
CSS属性:CSS的属性值;
CSS属性(字体,背景,边框,背景图片的起始位置…(大小,颜色,边框的样式,边框的尺寸 left/center/right…)
}
1 标签选择器
div{
font-size: 24px;
color: #f00;
}
2 id选择器
#div1{
font-size: 36px;
color: #0f0;
}
在标签中一定要给定一个id属性
,并且指定
id属性值
”text” id=”inputId” >
3 类选择器
.divCls{
font-size: 36px;
color: #f00;
}
4，并集选择器
#div1,.divCls{
background-color: #f00;
}
用逗号分隔
5 交集选择器
#div1 span{
font-size: 24px;
color: #0f0;
}
用空格分隔
div1的内容span的内容
div2的内容
div3的内容
span的内容
注意事项:
1) 一个标签同时被标签选择和id选择器选中,那么id选择器的优先级要高于标签选择器
2)在同一个html页面中,不要给多个标签指定同名id属性,如果指定同名id属性值,那么js的时候,获取标签对象的时候,获取不到:getElementById(“id属性值”) ;
四 伪类选择器
a:link{
font-size: 24px;
color: #f00;
}
a:visited{
font-size: 24px;
color: :#FFFFCC;
text-decoration: none;
}
a:hover{
font-size: 24px;
color: #00f;
text-decoration: none;
}
a:active{
font-size: 24px;
color: #0f0;
text-decoration: underline;
}
五 css常用属性
1 文本属性
body{
color: #f00;
line-height: 60px;
letter-spacing: 10px;
text-align: center;
word-spacing: 10px;
text-decoration: line-through;
}
2 字体
body{
font-size: 24px;*/
font:italic bold 36px "黑体" ;
}
3 背景
body{
background-color: #0CF;*/
background-position: top right;*/
background: #f00 url(img/mm.jpg) no-repeat top center;
}
4 列表
body ul{
list-style-type: none;
list-style-image: url(img/start.jpg);
}
XX学生管理系统:
- 学生管理
- 选课管理
- 教师管理
5表格
body table{
border-collapse :collapse;
}
6边框
div{
border:1px solid #000 ;
width: 50px;
height: 50px;
}