一、CSS的使用方式
1、行内样式
格式:<HTML 标签 style="样式属性:取值;样式属性:取值;..."><HTML 标签>
例如:<h1 style="color:orange">标题1</h1> (不提倡使用)
2、内部样式
格式:<head>
<style type="test/css">
选择器1{样式属性1:取值;样式属性2:取值;...}
选择器2{样式属性1:取值;样式属性2:取值;...}
......
</style>
</head>
3、外部样式
格式:<head>
<link rel="stylesheet" type="text/css" href="样式表文件的地址">
</head>
rel="stylesheet"属性用来生明在HTML文件中使用外部样式表。
type="text/css"属性用来指明该文件的类型是样式表文件。
href="...."属性用来指定样式表文件的路径和名称。
二、CSS的选择器
1、标签选择器
<style type="text/css">
div{
font-size: 24px;
color: #f00;
}
</style>
<body>
<div>div的内容</div>
</body>
2、id选择器
<style type="text/css">
#div1{
font-size: 24px;
color: #f00;
}
</style>
<body>
<div id=div1>div1的内容</div>
</body>
3、类选择器
<style type="text/css">
.div2{
font-size: 24px;
color: #f00;
}
</style>
<body>
<div class=div2>div2的内容</div>
</body>
4、并集选择器(分组选择器)
#div1,.divCls,...{
background-color: #f00;
}
(选择器之间用逗号隔开)
5、交集选择器(包含选择器)
#div1 span{
font-size: 24px;
color: #0f0;
}
(父选择器:#div1 子选择器:span,用空格隔开)
6、通用选择器:
*{
background-color: #f00;
}
三、伪类选择器
<style type="text/css">
没有访问过的状态
a:link{
font-size: 24px;
color: #f00;
}
鼠标访问过的状态:visited:点击了,并且松开的状态
a:visited{
font-size: 24px;
color: :#FFFFCC;
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;
}
</style>
<body>
<a href="01.CSS的选择器.html">超链接</a>
</body>
( 锚伪类要循环显示一种效果:四个状态必须有先后循环
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。)
四、CSS文本
<style type="text/css">
body{
文本颜色属性:color
color: #f00;
line-height:行高
line-height: 60px;
letter-spacing:字符间距
letter-spacing: 10px;
text-align:文本的对其方式
text-align: center;
word-spacing:字间距:shu默认两个组成的叫单词
word-spacing: 10px;
文本修饰
text-decoration
常用的属性值
underline:下划线
none:没有下划线
overline:上划线
line-through:中划线
text-decoration: line-through;
}
五、CSS字体
<style type="text/css">
body{
font-family:字体系列(类型)
系统默认是宋体
font-family: "楷体";
font-size:字体尺寸
font-size: 24px;
font-style:字体的样式
常用的属性值:
normal:标准的字体样式
italic:斜体
font-style: italic;
font-wight:设置字体的粗细
属性值:bold:适当加粗
font-weight: bold;
CSS字体的简写属性
font:italic bold 36px "黑体" ;
}
</style>
六、CSS背景
body{
背景颜色:background-color
background-color: #0CF;
背景图片:background-image:
属性:url指定图片的路径
background-image: url(img/mm.jpg);
background-repeat:设置背景图片是否重复以及如何重复
常用的属性值:
默认值:repeat:x轴和y轴重复
repeat-x:背景图片水平方向重复
repeat-y:y轴重复
no-repeat:不重复
background-repeat: no-repeat;
background-position 设置背景图像的起始位置
可能用到的属性值
图片的显示的位置 图片在浏览器中的位置
top left
content center
bottom right
background-position: top right;
CSS背景图片的简写属性
background: #f00 url(img/mm.jpg) no-repeat top center;
}
</style>
七、CSS列表
<style>
body ul{
list-style-type:设置列表项前面的类型
list-style-type: none;
给列表项前面的类型自定义
list-style-image:
常用的属性值:URL() 图像的路径
list-style-image: url(img/start.jpg);
}
</style>
<body>
XX学生管理系统:
<ul>
<li>学生管理</li>
<li>选课管理</li>
<li>教师管理</li>
</ul>
</body>
八、CSS表格
<style type="text/css">
body table{
将表格的边框合并为单一的框
属性值:collapse
border-collapse :collapse;
}
</style>
<body>
<table border="1px" align="center" width="400px" height="300px">
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>张三</td>
<td>计算机1班</td>
<td>87</td>
</tr>
<tr align="center">
<td>李四</td>
<td>计算机2班</td>
<td>89</td>
</tr>
<tr align="center">
<td>王五</td>
<td>计算机1班</td>
<td>98</td>
</tr>
</tbody>
</table>
</body>
九、CSS边框
<style type="text/css">
div{
边框的颜色
border-color:边框颜色的简写属性
1)边框颜色默认的顺序:上 右 下 左
2)边框颜色某一边如果没设置,那么取对边的颜色
border-color:#f00;
border-left-color:#f00 ;
border-right-color:#00f ;
border-top-color: #0f0;
border-bottom-color: #FF0;
边框的宽度
border-width:
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;
边框宽度的简写属性
border-width: 10px;
一块标签,要想显示边框的效果,必须指定属性:边框的样式:
border-style:边框样式的简写属性
border-style: solid;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dotted;
border-bottom-style: double;
一个div显示边框,使用boder的简写属性
border:1px solid #000 ;
width: 50px;
height: 50px;
}
</style>
十、盒子模型
盒子模型:div块标签+css进行网页布局
一个盒子属性:
容量:就是给div块标签指定的宽度和高度
<style type="text/css">
div{
设置边框
border:1px solid #000;
width: 100px;
height: 100px;
padding-left: 10px ;
}
#dv1{
让div1盒子内边距向右移动10px
padding-left: 10px;
给div1设置一个下外边距
margin-bottom: 10px;
}
#dv2{
上外边距
margin-top: 10px;
}
dispaly属性
常用的属性值:none 次元素不会被显示 隐藏了!
.cba{
display:none;
}
#spanId{
display: block; 此元素将显示为块级元素,此元素前后会带有换行符
}
h3{
display: inline;默认。此元素会被显示为内联元素,元素前后没有换行符。
}
浮动属性
float:
常用的两个属性值:
left:左浮动
right:右浮动
#ww{
float:left;
}
clear属性
设置一个元素的侧面是否允许其他的浮动元素。
both:在当前两侧都不允许有浮动元素
.cle{
clear:both;
}