采用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>
CSS样式
原文地址：http://www.cnblogs.com/wlc297984368/p/7629353.html