css基础24

来源：互联网发布：威露士消毒液成分知乎编辑：程序博客网时间：2024/05/17 21:01

1 CSS入门
1.1 引入
html：负责网页的结构
css：负责网页的美观（样式）
1.2 体验

<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">
a{
font-size:24px;
color:#0F0;
}
</style>
</head>

<body>
<a href="xxxx" >超链接</a><br/>
<a href="xxxx" >超链接</a><br/>
<a href="xxxx" >超链接</a><br/>
<a href="xxxx" >超链接</a><br/>
</body>
</html>

1.3 定义
CSS（Cascading Style Sheet 层叠样式表）简称，样式。
主要负责网页的美观。
1.4 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文件


<link href="01.css" rel="stylesheet"/>

2 CSS语法

a{
font-size:24px;
color:#F00;
}

选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如，字体大小，颜色，背景.....
CSS值（value）：添加样式的具体值。12px , 红色，背景图片....

2.1 选择器
标签选择器
作用：选择同名的标签
div{
font-size:24px;
color:#F00;
}
注意：
1）选择到所有同名的标签

类选择器
作用：选择同类的标签
/*类选择器*/
.c1{
font-size:24px;
color:#F00;
}
注意：
1）选择的标签必须有class的属性。同类的标签使用同名
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！
id选择器
作用：选择一个标签
#d1{
font-size:24px;
color:#0F0;
}
注意：
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")
3）id选择器的优先级最高！

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

交集选择器

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

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

通用选择器

/*通用选择器*/
*{
font-size:24px;
color:#0F0;
}
作用；选择所有的标签
伪类选择器
作用：控制标签在不同状态下的样式。

标签有四种状态：
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
*/
</style>
</head>

<body>
<a href="01.css入门.html">超链接</a>
</body>
</html>

（课堂练习）案例：给表格每一行鼠标经过加上背景

2.2 常用的CSS属性和值
CSS文本

<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">

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

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

CSS字体
<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">
body{
/*字体类型
注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。
*/
/*
font-family:"宋体";
*/
/*字体大小*/
/*
font-size:24px;
*/
/*字体样式: 正(normal默认) 斜(italic)*/
/*
font-style:italic;
*/
/*字体粗细 bold 加粗*/
/*
font-weight:bold;
*/

/* font: 简写属性 */
font:italic bold 36px "黑体";
}
</style>
</head>

<body>
华育国际
</body>
</html>

CSS背景
<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">

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>

<body>
</body>
</html>

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">
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>

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">
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>

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页面上每个标签看做是一个盒子。

通过需求讲解盒子模型：
1.将盒子的宽高变为之前的两倍
2.将盒子厚度变为原来的两倍
3.盒子里面的内容距顶部内10px
4.盒子里面的内容距离左内边10px
5.下面的盒子距离上面的盒子10px(两种方式实现)

盒子相关的属性：
宽度和高度（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;
}

5. 作业：利用div+css设计一个qq登录页面，画图说明需求，代码完成

<!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>无标题文档</title>
<style>
#div1{
width:400px;
height:300px;
border:3px solid #F00;
background-image:url(05.%E7%B4%A0%E6%9D%90/1.jpg);
background-repeat:no-repeat;
background-position:top center;
}
#namediv{
margin-left:80px;
margin-top:100px
}

#passworddiv{
margin-top:20px;
margin-left:80px;
}

#btidiv{
margin-left:150px;
margin-top:20px
}

#nameip{
background-image:url(05.%E7%B4%A0%E6%9D%90/head.png);
background-repeat:no-repeat;
background-position:center left;
padding-left:30px;
}

#passwordip{ background-image:url(05.%E7%B4%A0%E6%9D%90/key.jpg);
background-repeat:no-repeat;
background-position:center left;
padding-left:30px;

}

</style>
</head>

<body>
<div id="div1">
<form>
<div id="namediv">用户名：<input type="text" id="nameip" /></div>

<div id="passworddiv">密  码：<input type="password" id="passwordip"/></div>

<div id="btidiv"><input type="button" value="登陆" /><input type="button" value="注册" /></div>

</form>
</div>
</body>
</html>

阅读全文

0 0