<!DOCTYPE html> <!-- 这是HTML的注释 --> <html lang="en" id="myHtml"> <head> <!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HtmlAll</title> <!-- 这里是我们引入外部配置的Css样式文件,也是开发最主流的方式 --> <link rel="stylesheet" type="text/css" href="css.css"/> <style type="text/css"> /* 这是css的语言注释 */ /* id选择器,写法#后面加ID然后大括号 */ #usernameError{ font-size: 30px; color: red; } /* 标签选择器,这个作用范围比较广,他会对当前页面的所有该标签生效 */ div{ background-color: black; border: 1px solid red; width: 100px; height: 100px; } /* 类选择器,.后面类名大括号 */ /* 这种方式所有是这个class都可以使用到这个效果,优点是我们可以实现跨标签 */ /* 这种所有标签都可以,这要class信息一样即可 */ .myClass{ border: red 1px solid; width: 80px; height: 30px; } </style> </head> <body> <!-- 引入CSS效果的第一种方式,直接在元素上设置 --> <div style="width: 300px; height: 300px; background-color: #CCFFFF; display: block; border-color: red; border-width: 1px; border-style: solid;"></div> <!-- width宽度,height高度,bakgroundcolor背景色设置,display布局样式none就是隐藏,block表示显示 --> <!-- border默认不显示,我们要通过设置是否显示来显示该边框,跨域设置颜色宽度 --> <div style="width: 300px; height: 300px; background-color: #CCFFFF; display: block; border: black 1px solid;"></div> <!-- 第二种设置方法,直接在border内设置所有的信息,样式还能这样写 --> <span id="usernameError">对不起,用户名不能为空</span> <div></div> <div></div> <input type="text" class="myClass"/> <select class="myClass"> <option>专科</option> <option>本科</option> <option selected>研究生</option> <option>硕士</option> </select> <a href="http://www.baidu.com">百度一下</a> <span id="baiDuSpan">点击我链接到百度</span> <ul> <li>中国 <ul> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </li> <li>美国</li> <li>俄国</li> </ul> <div id="div1"> </div> </body> </html><!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
<head>
<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtmlAll</title>
<!-- 这里是我们引入外部配置的Css样式文件,也是开发最主流的方式 -->
<link rel="stylesheet" type="text/css" href="css.css"/>
<style type="text/css">
/* 这是css的语言注释 */
/* id选择器,写法#后面加ID然后大括号 */
#usernameError{
font-size: 30px;
color: red;
}
/* 标签选择器,这个作用范围比较广,他会对当前页面的所有该标签生效 */
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/* 类选择器,.后面类名大括号 */
/* 这种方式所有是这个class都可以使用到这个效果,优点是我们可以实现跨标签 */
/* 这种所有标签都可以,这要class信息一样即可 */
.myClass{
border: red 1px solid;
width: 80px;
height: 30px;
}
</style>
</head>
<body>
<!-- 引入CSS效果的第一种方式,直接在元素上设置 -->
<div style="width: 300px; height: 300px; background-color: #CCFFFF;
display: block; border-color: red; border-width: 1px; border-style: solid;"></div>
<!-- width宽度,height高度,bakgroundcolor背景色设置,display布局样式none就是隐藏,block表示显示 -->
<!-- border默认不显示,我们要通过设置是否显示来显示该边框,跨域设置颜色宽度 -->
<div style="width: 300px; height: 300px; background-color: #CCFFFF;
display: block; border: black 1px solid;"></div>
<!-- 第二种设置方法,直接在border内设置所有的信息,样式还能这样写 -->
<span id="usernameError">对不起,用户名不能为空</span>
<div></div>
<div></div>
<input type="text" class="myClass"/>
<select class="myClass">
<option>专科</option>
<option>本科</option>
<option selected>研究生</option>
<option>硕士</option>
</select>
<a href="http://www.baidu.com">百度一下</a>
<span id="baiDuSpan">点击我链接到百度</span>
<ul>
<li>中国
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</li>
<li>美国</li>
<li>俄国</li>
</ul>
<div id="div1">
</div>
</body>
</html>
a{ text-decoration: none; font: red; } #baiDuSpan { text-decoration: underline; cursor: pointer; } /* cursor是鼠标样式,pointer是小手,hand也是,建议使用pointer */ /* wait会显示转圈圈 */ ul{ list-style-type: none; } /* 通过设置list-style-type为none就可以去掉我们无序列表和有序列表的前面的符号 */ #div1{ position: absolute; border: 1px solid black; width: 300px; height: 300px; left: 100px; right: 100px; } /* position: absolute;设置绝对定位 */a{
text-decoration: none;
font: red;
}#baiDuSpan
{
text-decoration: underline;
cursor: pointer;
}/* cursor是鼠标样式,pointer是小手,hand也是,建议使用pointer */
/* wait会显示转圈圈 */ul{
list-style-type: none;
}
/* 通过设置list-style-type为none就可以去掉我们无序列表和有序列表的前面的符号 */文章来源：https://www.toymoban.com/news/detail-744085.html#div1{
position: absolute;
border: 1px solid black;
width: 300px;
height: 300px;
left: 100px;
right: 100px;
}
/* position: absolute;设置绝对定位 */文章来源地址https://www.toymoban.com/news/detail-744085.html
到了这里，关于CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
