当然css代码很多，不可能这么快就精通的，我们只能慢慢来css层叠样式表是嵌套在html代码内部的一般格式都是<style>type="text/css"#siderRight{float:left;width:200px;height=300px;}</style>


这里有个老旧html css代码的对比

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><styletype="text/css">#header,#siderLeft,#siderRight,#footer{border:solid1px#666;padding:10px;margin:6px;}#header{width:500px}#siderLeft{float:left;width:60px;height:100px;}#siderRight{float:left;width:406px;height:100px}#footer{clear:both;width:500px;}</style></head><body><divid="header">导航</div><divid="siderLeft">菜单</div><divid="siderRight">内容</div><divid="footer">底部说明</div></body></html>

这里是新的html css代码

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><styletype="text/css">header,nav,article,footer{border:solid1px#666;padding:10px;margin:6px;}header{width:500px}nav{float:left;width:60px;height:100px;}article{float:left;width:406px;height:100px}footer{clear:both;width:500px;}</style></head><body><header>导航</header><nav>菜单</nav><article>内容</article><footer>底部说明</footer></body></html>

这里我们来发现一个超链接引用css文件的方式和h6里面引用css里面定义的类的一般格式

<!--Customstylesforthistemplate--><linkhref="/css/dashboard.css"rel="stylesheet"></head><body><navclass="navbarnavbar-fixed-topnavbar-darkbg-inverse"><buttonclass="navbar-togglerhidden-md-up"type="button"data-toggle="collapse"data-target="#navbar"aria-controls="navbar"aria-expanded="false"aria-label="Togglenavigation"></button><divclass="collapsenavbar-toggleable-sm"id="navbar"><aclass="navbar-brand"href="#">运维工具</a>

这里注意了h6 里面的引用超链接有相对路径和绝对路径的区别

<ahref="url"title="">链接</a>其中，url可以是一个绝对网址，比如：http://www.xuexuexi.com;也可以是一个相对的网页。如：123.html；还可以是其它文件。比如pdf，doc等等。还有一种是根目录的方式，根目录其实跟绝对路径有些相似，就是去掉前面的域名即可，比如：<a这个是相对路径href="/html/h2.html">链接</a>，