带你了解CSS基础知识,样式
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">什么是CSS</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">在HTML页面中嵌套使用CSS的两种方式</a></li><li><a href="#_lab2_0_1">三种方式代码展示</a></li><li><a href="#_lab2_0_2">链入外部样式表文件</a></li><li><a href="#_lab2_0_3">以下是常用的样式</a></li></ul><li><a href="#_label1">总结</a></li><ul class="second_class_ul"></ul></ul></div><p class="maodian"><a name="_label0"></a></p><h2>什么是CSS</h2><p>CSS(<strong>Cascading Style Sheet</strong>):层叠样式表语言。</p>
<p>CSS的作用是：</p>
<p>修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。</p>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>在HTML页面中嵌套使用CSS的两种方式</h3>
<p>第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。语法格式：</p>
<p><标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签></p>
<p>第二种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）语法格式：</p>
<div class="jb51code">
<pre class="brush:xhtml;">
这种方式易维护，维护成本较低。
xxx.css文件
1.html中引入了
2.html中引入了
3.html中引入了
4.html中引入了</pre>
</div>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>三种方式代码展示</h3>
<p><strong>内联定义方式</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!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>
</pre>
</div>
<p><strong>样式块方式</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!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>
</pre>
</div>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>链入外部样式表文件</h3>
<p><strong>css文件</strong></p>
<div class="jb51code">
<pre class="brush:css;">
a{
text-decoration: none;
}
#baiduSpan{
text-decoration: underline;
cursor: wait;
}
</pre>
</div>
<div class="jb51code">
<pre class="brush:xhtml;">
<!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>
</pre>
</div>
<p class="maodian"><a name="_lab2_0_3"></a></p><h3>以下是常用的样式</h3>
<p><strong>边框</strong></p>
<p>（1）</p>
<div class="jb51code">
<pre class="brush:css;">
div{ border : 1px solid red; }
</pre>
</div>
<p> （2）</p>
<div class="jb51code">
<pre class="brush:css;">
div{ border-width : 1px; border-style : solid; border-color : red; }
</pre>
</div>
<p><strong>隐藏</strong></p>
<div class="jb51code">
<pre class="brush:css;">
div{ display : none; }
</pre>
</div>
<p></p>
<p><strong>字体</strong></p>
<div class="jb51code">
<pre class="brush:css;">
div{ font-size : 12px; color : red; }
</pre>
</div>
<p><strong>文本装饰</strong></p>
<div class="jb51code">
<pre class="brush:css;">
a{ text-decoration : none; }
</pre>
</div>
<div class="jb51code">
<pre class="brush:css;">
a{ text-decoration : underline; }
</pre>
</div>
<p><strong>列表</strong></p>
<div class="jb51code">
<pre class="brush:css;">
ul{ list-style-type : none; }
</pre>
</div>
<p><strong>设置鼠标悬停效果</strong></p>
<div class="jb51code">
<pre class="brush:css;">
:hover
</pre>
</div>
<p><strong>定位</strong></p>
<div class="jb51code">
<pre class="brush:css;">
div{ position : absolute; left : 100px; top : 100px; }
</pre>
</div>
<p><strong>鼠标小手</strong></p>
<div class="jb51code">
<pre class="brush:css;">
div{ cursor : pointer; }
</pre>
</div>
<p class="maodian"><a name="_label1"></a></p><h2>总结</h2>
<p>本篇文章就到这里了，希望能够给你带来帮助，也希望你能够多多关注琼殿技术社区的更多内容！</p>
頁:
[1]