采用web标准目的： 将内容与样式分离
web标准： 结构标准 html5 表现标准 css 行为标准 js
css应用方式
1.内联样式表 将样式直接写入标签 <p style="color:red" /> 应用于一个标签
2.嵌入式样式表 使用标签嵌入到head当中 <style type = "text/css"/> 应用于一类标签
3.外部链接式样式表将样式表放到一个独立的css文件里边在head标签内用link标签使用该css样式
<link href="main.css" rel="stylesheet" type="text/css" />
4.导入式样式表 不推荐 可以将多个样式表导入到一个css文件中然后在html中link这个css文件
<style type="text/css">@import url("style.css") </style>
css控制元素状态--伪类
a:link {/*链接原始显示样式*/
text-decoration: none;
color: #aaaaaa;
}
css选择符
1.标签选择符： 针对html标签
input {
width:100px;
height: 30px;
border: 2px solid gold;
line-height: 30px;
vertical-align: middle;
}
2.id选择符： 针对页面中只出现一次的内容 用id
#spanId2 {
vertical-align: sub;/*下标 super 上标*/
}
3.类选择符： 针对相同的元素同样的样式 重复的样式
input:focus {
background: pink;
}
4.*通配符
*{margin：0；padding:0;}使用效率最低
5.选择符的嵌套使用 包含选择符 父元素 子元素 {属性：值}优化了css代码 无需要单独加ID
p strong {
font-size: 24px;
}
#p_id strong { 通过id的子元素添加样式
font-size: 24px;
}
6.选择符分组 将具有相同样式的选择符写到一起
h1, h2, h3,......#p_id strong {font-size:15px;}
h1 {
width: 1000px;
height: 50px;
font-size: 15px;
background: #ccc;
line-height: 50px; /*行高等于height时使得文字正好居中 缺点是不能换行只能一行*/
}
p {
line-height: 150%;
}
li {
font-size: 18px;
font-weight: bold;
}
h2 {
font-weight: normal;/*是否加粗字体*/
font-size: 18px;
}
.blue {
background: blue;
}/*为main单独定义的一个类*/
#p {
text-decoration: underline;/*是否有下划线*/
}
.indent {
text-indent: 2em;/*缩进2字*/
text-align: left;/*对齐方式*/
white-space:pre;/*保留原先文本格式不使用br也可以换行*/
text-transform: uppercase;/*大小写转换 capitalize 首字母大写 lowercase 全部小写*/
}
#span2 {
vertical-align: sub;/*下标 super 上标*/
}
input {
width:100px;
height: 30px;
border: 2px solid gold;
line-height: 30px;
vertical-align: middle;
}
input:focus {
background: pink;
}
p strong {
font-size: 24px;
}
/*链接样式*/
a:link {/*链接原始显示样式*/
text-decoration: none;/*去掉链接下划线*/
color: #aaaaaa;/*改变字体颜色*/
}
a:visited {/*访问之后的显示样式*/
color: lightseagreen;
}
a:hover {/*鼠标经过显示样式*/
text-decoration: underline;
color: green;
}
a:active {/*鼠标按下显示样式*/
text-decoration: line-through;
color: blue;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link href="css_file/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<script type="text/javascript">
//alert("这是js脚本！");
//当网页加载完成后执行的操作
window.onload = function () {
//先获取id main的元素
var main = document.getElementById(‘main‘);
//当鼠标经过main时为main加上blue这个样式
main.onmouseover = function () {
this.className = "blue"
};
//当鼠标移走还原原来的样式
main.onmouseout = function () {
this.className = ""
}
};
</script>
<a href="">WHAT</a>
<a href="">ARE</a>
<a href="">YOU</a>
<a href="">DOING</a>
<h1 id="main">
EditPlus - Windows text editor with FTP and sftp</h1>
<p id="p" class="indent">
Welcome to EditPlus text editor home page!
Welcome to EditPlus text editor home page!
</p><br/>
<label>UserName：</label><input type="text"><br/>
<label>PassWord：</label><input type="password"><br/>
<ul>
<li>Click here to Buy Now</li>
<li>Download EditPlus Text Editor 4.3 (2017-05-12)</li>
<li> Latest Bug Patch <strong>File</strong> - 4.3 patch build 2427 (2017-10-03) New!</li>
</ul>
<div>
EditPlus IconEditPlus is a Windows text <strong>editor</strong> with built-in FTP (also FTPS) and sftp capabilities. While it can
serve
as a good Notepad replacement,
</div>
<h2>
将h2的粗体还原it also offers many powerful features for Web page <strong>authors</strong> and programmers.
</h2>
<p>
it also offers many powerful features for Web page <strong>authors</strong> and programmers.
</p>
<p>
it also offers many powerful features for Web page <strong>Web page</strong> and programmers.
</p>
<p>X<span id="span2">2</span></p>
</body>
</html>
原文：http://www.cnblogs.com/wlc297984368/p/7629353.html