什么是CSS
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是:
修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。
在HTML页面中嵌套使用CSS的三种方式
第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式。
语法格式:
<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签>
第二种方式:在head标签中使用style块,这种方式被称为样式块方式。
语法格式:
第三种方式:链入外部样式表文件,这种方式最常用。(将样式写到一个独立的xxx.css文件当中,在需要的网页上
直接引入css文件,样式就引入了)
语法格式:
这种方式易维护,维护成本较低。
xxx.css文件
1.html中引入了
2.html中引入了
3.html中引入了
4.html中引入了
三种方式代码展示
内联定义方式
<!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第一种方式:内联定义方式</title>
<head>
<body>
<!--
width 宽度样式
heght 高度样式
background-color 背景颜色样式
display 布局样式(none表示隐藏,block表示显示)
-->
<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border-color: red;border-width: 3px;border-style: solid"></div>
<!--样式还可以这样写
border: width style color
-->
<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border: thick double yellow; "></div>
</body>
</html>
样式块方式
<!doctype html>
<html>
<head>
<title>HTML中引入样式的第二种方式:样式块方式</title>
<style type="text/css">
/*
这是CSS的注释
*/
/*
id选择器
#id{
样式名: 样式值;
样式名: 样式值;
样式名: 样式值;
........
}
*/
#usernameErrorMsg{
font-size: 12px;
color: red;
}
/*
标签选择器
标签名{
样式名: 样式值;
样式名: 样式值;
样式名: 样式值;
}
*/
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
类选择器
.类名{
样式名: 样式值;
样式名: 样式值;
样式名: 样式值;
}
*/
.myclass{
border: 2px double blue;
width: 400px;
height: 30px
}
</style>
</head>
<body>
<!--
设置样式字体大小12px,颜色为红色
-->
<!--<span id="usernameErrorMsg" style="font-size: 12px;color: red">对不起,用户名不能为空!</span>-->
<span id="usernameErrorMsg"">对不起,用户名不能为空!</span>
<div></div>
<div></div>
<div></div>
<!--class相同的可以认为是同一类标签。-->
<br><br><br><br>
<input type="text" class="myclass"/>
<br><br><br><br><br>
<select class="myclass">
<option>专科</option>
<option>本科</option>
<option>硕士</option>
</select>
</body>
</html>
链入外部样式表文件
css文件
a{
text-decoration: none;
}
#baiduSpan{
text-decoration: underline;
cursor: wait;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中引入CSS样式的第三种方式:链入外部样式表文件</title>
<!--引入css-->
<link type="text/css" rel="stylesheet" href="css/1.css"/>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduSpan">点击我链接百度</span>
</body>
</html>
以下是常用的样式
边框
div{
border : 1px solid red;
}
(2)
div{
border-width : 1px;
border-style : solid;
border-color : red;
}
隐藏
div{
display : none;
}
字体
div{
font-size : 12px;
color : red;
}
文本装饰
a{
text-decoration : none;
}
a{
text-decoration : underline;
}
列表
ul{
list-style-type : none;
}
设置鼠标悬停效果
:hover
定位
div{
position : absolute;
left : 100px;
top : 100px;
}
鼠标小手
div{
cursor : pointer;
}
帮助文档
具体可以查询帮助文档
以下是css帮助的帮助文档
https://pan.baidu.com/s/1tuUHbmPA9Fn5M-XHVWc6Fg
提取码zsy0