CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
实现CSS样式的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>CSS样式
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;设置绝对定位 */| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |