本篇内容介绍了“CSS基础知识以及常用样式”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
什么是CSS
在HTML页面中嵌套使用CSS的两种方式
三种方式代码展示
链入外部样式表文件
以下是常用的样式
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。语法格式：
<标签 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" >对不起，用户名不能为空！</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>
边框
（1）
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基础知识以及常用样式”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
