1.CSS的伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS伪类选择器</title>
<style>
/*link状态*/
a:link{
/*文本修饰*/
text-decoration: none;/*去掉下划线*/
color: :#F00;
}
/*visited状态*/
a:visited{
color:#CCC;
font-size: 20px;
}
/*hover状态--常用*/
a:hover{
color:#00F;
/*文本修饰*/
text-decoration: underline;
font-size: 20px;
}
/*active状态*/
a:active{
color:#FF0000;
/*文本修饰*/
text-decoration: none;
font-size: 30px;
}
</style>
<!--
CSS伪类:指定当前标签的状态
link状态:鼠标未访问过的状态
hover状态:鼠标经过标签的时候的一种状态
active状态:激活状态,鼠标点击了,但是没有松开的状态
visited:已经访问过的状态(鼠标点击过了并且松开了)
CSS伪类选择器注意:
1)在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2)在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
3)伪类名称对大小写不敏感。
-->
</head>
<body>
<a href="02_目标页面.html">超链接</a>
</body>
</html>
2.CSS文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS文本属性</title>
<!--
CSS格式
CSS(properties):CSS属性(value)
-->
<style>
body{
/*字体*/
color: red;
/*字体间距*/
letter-spacing: 5px;
/*文本对齐方式*/
text-align: center;
/**文本修饰:
* nono:去掉下划线
* underline:下划线
* overline:下划线
* line-through:中划线
*/
/*单词间距
解析:CSS属性的时候:默认两个字组成一个单词
* */
word-spacing: 10px;
}
</style>
</head>
<body>
千树万树梨花开
</body>
</html>
3.CSS背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS背景</title>
<style>
body{
/*背景颜色:background-color*/
/*
* background-image:设置背景图片
*/
/*background-image:url(img/唐诗logo.png);*/
/**
* 背景图片:默认x轴和y轴重复
*/
/**
* background-repeat:设置图像是否重复以及如何重复
* no-repeat:图片不重复,但是图片默认的位置在左上角(top-left )
*
*/
/*background-repeat:no-repeat;*/
/**
* 设置背景图片的起始位置
* 图片的三个位置(上下):top、center、bottom
* 浏览器的三个位置(左右):left、center、right
*/
/**
*背景简写属性:
* background:background-color
* background-img
* background-repeat
* background-position
*/
background: #00F url(img/唐诗logo.png) no-repeat top;
}
</style>
</head>
<body>
</body>
</html>
4.CSS表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS背景</title>
<style>
body{
/*背景颜色:background-color*/
/*
* background-image:设置背景图片
*/
/*background-image:url(img/唐诗logo.png);*/
/**
* 背景图片:默认x轴和y轴重复
*/
/**
* background-repeat:设置图像是否重复以及如何重复
* no-repeat:图片不重复,但是图片默认的位置在左上角(top-left )
*
*/
/*background-repeat:no-repeat;*/
/**
* 设置背景图片的起始位置
* 图片的三个位置(上下):top、center、bottom
* 浏览器的三个位置(左右):left、center、right
*/
/**
*背景简写属性:
* background:background-color
* background-img
* background-repeat
* background-position
*/
background: #00F url(img/唐诗logo.png) no-repeat top;
}
</style>
</head>
<body>
</body>
</html>
5.CSS字体属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS字体属性</title>
<style>
body{
/*字体类型:font-family
* CSS样式库中所有的字体库
* */
font-family: "微软雅黑";
/*字体大小:font-size*/
font-size: 26px;
/*字体样式:
* 默认nomal
* italic:斜体
* oblique:斜体更加明显
* */
font-style: italic;
/*字体粗细:font-weight
blod:适当加粗
* */
font-weight: bold;
/*简写属性:将上面所有的属性都写到一起
font:font-style font-size font-weight
对于字体属性,我们知道怎么写就可以了
* */
font: italic bold 26px "宋体";
}
</style>
</head>
<body>
百花绽放,hello world
</body>
</html>
6.CSS边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS边框属性</title>
<style>
div{
/*边框线的颜色
*border-color:是边框颜色的简写属性
* 分别给四个边框设置颜色
* 注意:
* (1)边框属性的设置必须是:上、右、下、左
* (2)边框的颜色/宽度/样式:某一边没有给定颜色、样式、宽度、样式,会取对边颜色、宽度、样式
*/
/*border-top-color:#00F ;
border-left-color:red ;
border-right-color:greenyellow ;
border-bottom-color:green;*/
/*边框颜色的简写属性:border-color*/
/*border-color: #00F,#0000FF,#C90,#F00;*/
/**边框线的宽度:
* 分别设置四个边框线的宽度
*
*/
/*border-top-width:10px ;
border-right-width:10px ;
border-bottom-width:10px;
border-left-width:20px ;*/
/*border-width: 10px,20px,30px,40px;*/
/**
* 如果标签想要指定边框的显示效果,那么必须要指定边框的样式
* border-style
* solid:单实现
* double:双实线
* dotted:点
* dashed:虚线
*/
/**
* 设置四个边的样式
*/
/*border-top-style:solid;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:solid; */
/*border-style: solid,solid,dashed,solid;*/
/*边框的简写属性
*border:边框宽度 边框样式 边框颜色
*/
border:3px solid #000;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>div的内容</div>
</body>
</html>
7.CSS盒子模型【重点】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<!--一定要记住那个图像,知道各个单词具体表示的是什么距离
网页布局:
div(块标签)+CSS
通过padding/margin设置内边距/外边距
-->
<style>
div{
width: 200px;
height: 200px;
#d1{
}
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
</body>
</html>
8.CSS浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#d11{
width: 200px;
height: 200px;
background-color: #F00;
border: 1px solid #000;
/*设置一个浮动属性*/
float: right;
}
#d12{
width: 200px;
height: 200px;
background-color: #00F;
border: 1px solid #000;
float: right;
}
#d13{
width: 200px;
height: 200px;
background-color: yellow;
border: 1px solid #000;
}
#clear{
/*清除浮动:加在哪个标签的下面哪个文档就会被清除浮动属性*/
clear: both;
}
</style>
<!--特别重要
CSS浮动:float属性——left/right
当前某个设置了浮动,那么这个标签就脱离了当前文档流只要遇到边框就会停止,后面依次排队的元素就会默认的填充当前文档流(符合一种流式布局)
有时候考虑页面布局:带浮动属性标签会影响后面标签的布局,需要设置当前左右两边不浮动(不会随着文档流的变化而变化)
-->
</head>
<body>
<div id="d11">div1</div>
<div id="clear"></div>
<div id="d12">div2</div>
<div id="clear"></div>
<div id="d13">div3</div>
</body>
</html>
9.CSS列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS列表</title>
<style>
ul{
/*自定义一个列表标记*/
/**列表样式类型——先去掉*/
list-style-type:none ;
/*将指定图片设置为列表标记*/
list-style-image: url(img/唐诗logo.png);
}
</style>
</head>
<body>
XX学生管理系统:
<ul type="square">
<li>选课管理</li>
<li>教务管理</li>
<li>其他</li>
</ul>
</body>
</html>
10.CSS定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<!--CSS定位:有三种定位方式
定位属性:position
相对定位:relative----相对于原来的属性元素的位置进行定位
绝对定位:absolute----相对于父标签(浏览器的位置)的位置进行定位——所以这个重要我们变换浏览器就可能会让我们的布局改变
固定定位:adv----
-->
<style>
div{
width:200px;
height: 300px;
border: 1px solid #000;
}
#d11{
background-color: red;
}
#d12{
background-color: yellow;
}
#d13{
background-color: blue;
/*相对定位*/
/*position: relative;*/
position: absolute;
top:20px;
left: 40px;
}
/*固定定位:使用场景--网站中的广告,是关闭不了的,必须要我们取点击,这些关不了的效果必须要js去完成*/
#adv{
background-color: #00F;
position: fixed;
top: 200px;
left: 400px;
}
</style>
</head>
<body>
<div id="d11">div1</div>
<div id="d12">div2</div>
<div id="d13">div3</div>
<div id="adv"><font color="red">立刻咨询</font></div>
</body>
</html>