介绍
1.CSS是层叠样式表语言：Cascading Style Sheet
CSS的作用是:修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。
2.CSS：
1>在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式
语法格式：
<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;”></标签>
2>在head标签中使用style块，这种方式被称为样式块方式
语法格式：
<head>
<style type="tesxt/css">
选择器{
样式名:样式值;
样式名:样式值;
......
}
选择器{
样式名:样式值;
样式名:样式值;
......
}
</style>
</head>
3>链入外部样式表文件（最常用）（将样式写到一个独立的xxx.css文件中，在需要的网页上直接引入css文件，样式就引入了）
语法格式：
<link type="text/css" rel="stylesheet" href="css文件的路径"/>
//这种方式易于维护，维护成本较低
引入方法
引入CSS样式的第一种方式：内联定义方式
<!doctype html>
<html>
<head>
<title>html中引入CSS样式的第一种方式：内联定义方式</title>
</head>
<body>
<div style="width:300px;height:300px;background-color:#CCFFFF; display:block;border-color:red;border-width:1px;border-style:solid;"></div><!--block出现，none隐藏-->
<br>
<div style="width:300px;height:300px;background-color:#CCFFFF; display:block;border: 1px solid black ;">
</body>
</html>
引入CSS中的第二种方式：样式块
<!doctype>
<html>
<head>
<title>html中引入CSS中的第二中方式：样式块</title>
<style type="text/css">
/*
这是CSS的注释
*/
/*
id选择器
语法格式：
#id{
样式名:样式值;
样式名:样式值;
样式名:样式值;
....
}
*/
#usernameErrorMsg {
color:red;
font-size:12px;
}
/*
标签选择器
语法格式：
#标签名{
样式名:样式值;
样式名:样式值;
样式名:样式值;
....
}
标签选择器作用的范围比id选择器广
*/
div{
background-color:black;
border:1px solid red;
width:100px;
height:100px;
}
/*
类选择器
语法格式:
.类名{
样式名:样式值;
样式名:样式值;
样式名:样式值;
....
}
*/
.myclass{
border:1px solid red;
}
</style>
</head>
<body>
<span id="usernameErrorMsg">对不起，用户名不能为空</span>
<div></div>
<div></div>
<div></div>
<br><br><br>
<input type="text" class="myclass"/>
<br><br><br>
<select class="myclass">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
使用CSS的第三种方式：引入外部独立的css样式
CSS样式：
a{
text-decoration: none;
}
/*
cursor :鼠标样式，pointer是小手，hand也是，hand兼容没pointer好
*/
#baiduSpan{
text-decoration: underline;
cursor:wait;
}
引入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在html中使用CSS的第三种方式：引入外部独立的css样式</title>
<link rel="stylesheet" type="text/css" href="./1.css" />
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<span id="baiduSpan">
点击我X百度
</span>
</body>
</html>
CSS的列表属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>中国
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</li>
<li>美国</li>
<li>俄国</li>
</ul>
</body>
</html>
CSS绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式的绝对定位</title>
<style type="text/css">
#div1{
background-color: cornflowerblue;
border: 1px black solid;
width:300px;
height: 300px;
position: absolute;/* 绝对定位*/
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
