第一点内容，引入css文件。这是非常重要的内容，为什么呢！因为之前编写的css都是在html里面写的，要么直接写在html元素的style属性里面，要么写在html中的style标签里面。这两种方式都有弊端，第一种直接在html元素的style属性里面写，毫无疑问的，如果一些样式是一样的，就得写几遍。第二种写在style标签里面，如果有多个html页面要用到同样的css，那也得写多遍。为了解决这个问题，就可以把css单独放在一个css文件里面，然后在需要使用这套css的html里面引入。如下：
index.css //这是一个css文件，文件格式为.css。内容如下：
#container{
width:100%;
background-color:#eee;
}index.html //这是一个html文件，内容如下：
<html>
...
<head>
//这句代码就是引入一个css文件，href里面就是css文件的路径。
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="container"></div>
</body>
</html>在这里，有必要知道这几种写法的样式优先级。如果说在index.css里面设置了id为container的元素的样式，在index.html中的style标签里面也写了container的样式，那么最终使用的，是style标签里面的。在style标签里面的样式称为。。忘记了。反正对于同一个选择器而言，直接写在style标签里的样式会覆盖引入的css文件里面的样式。又如果此时在html元素里面直接用style属性设置了样式，那么这个样式优先级比style标签里面的样式优先级还要高，即最后使用的是元素里面的style属性的样式内容。
到这里，知道了如何去引入一个css样式，以及css文件的优先级style标签的优先级style属性的优先级。那么今后无论是正式开发还是学习过程中做测试做练习，都要把css写在css文件。养成好的编码习惯。
第二点内容是html的语义和常用布局元素。html语义是什么意思，就好像正常情况下，我们用杯子喝水，用牙杯刷牙。当然，也可以用碗喝水，用锅刷牙。问题是生活中很明显不会这么去做，因为锅就是用来炒菜的，它虽然可以盛水，但是他不是刷牙的作用。在html中，也是一样的，用来做什么的标签就用它做什么，不要去做别的。对于html的语义，在w3school里面讲的很清楚，这里就不重复了。
那么常用的布局标签有如下几个元素：
div,p,ul,dl,table,h1~h6。一个一个来。
div元素就不说了，它表示一个块。
p标签表示段落。什么情况下可以用？看下面这个例子
这种情况下，使用p标签再适合不过。还有如下这种
这里的温馨提示也是一个p标签。总之，一些前后换行的文字，都可以使用p标签。需要注意的是，p标签里面最好不要嵌套p标签，虽然没什么问题，但是文章中的段落中是不可能再去包含某个段落的。span里面也不要嵌套span，这是一样的道理。OK，p标签就到这。
ul标签表示一个无序列表，用它布局的内容还是很多的。如下：
实现代码如下：
css:
<style>
ul{
padding-left:0px;
list-style:none;
}
ul li{
width:100px;
float:left;
}
</style>
html:
<ul>
<li>首页</li>
<li>个人中心</li>
<li>我的博客</li>
<li>设置</li>
<li>帮助</li>
</ul>
又如：
实现代码如下：
css:
<style>
ul{
padding-left:0px;
list-style:none;
}
ul li{
width:300px;
border-top:1px solid #ccc;
}
ul li:first-child{
border-top:0px;
}
</style>
html:
<ul>
<li>
<h3>HTML</h3>
<p>用于渲染用户做交互的组件</p>
</li>
<li>
<h3>CSS</h3>
<p>用于设置html组件的样式，使其更美观</p>
</li>
<li>
<h3>JS</h3>
<p>用于控制html组件，与用户做交互。</p>
</li>
</ul>这种有规律的，横着或者竖着的，都可以通过ul来做。需要注意的是，ul下的每一个li都会有一个黑色的点，这个点可以通过设置ul的list-style样式去掉。其次，ul默认有一个margin-left，也可以把他给去掉。即:
ul{
list-style:none;
padding-left:0px;
}使用ul布局，就是需要注意这两个属性即可。OK，ul就到这。
dl表示什么鬼我也搞不清楚，貌似经验丰富的前端都会用到dl标签。什么使用呢，如下：
实现代码如下：
css:
<style>
dl dd{
width:100px;
float:left;
margin-left:0px;
}
</style>
html:
<dl>
<dt>上海</dt>
<dd>浦东新区</dd>
<dd>徐汇区</dd>
<dd>宝山区</dd>
<dd>青浦区</dd>
</dl>又如：
实现代码如下：
css:
<style>
dl dt{
width:75px;
float:left;
}
dl dd{
margin-left:75px;
}
</style>
html:
<dl>
<dt>用户名</dt>
<dd><input type="text"/></dd>
</dl>
<dl>
<dt>密码</dt>
<dd><input type="password"/></dd>
</dl>一些有规律的并且有头部提示的，比如”上海”,”用户名”，就可以考虑使用dl布局。OK，dl就到这。
table顾名思义就是表格，在有数据表格的时候用，别的地方尽可能的用div来代替。
h1,h2,h3,h4,h5,h6这些都是标题标签，h表示head头部的意思。一个页面中最多使用一个h1标签，这表示整个网页的标题。而一个网页顶多就一个标题。h后面的数字越大，字就越小。什么时候用呢？在上面的例子中，有一段代码：
<li>
<h3>JS</h3>
<p>用于控制html组件，与用户做交互。</p>
</li>这里就用到了h3标签，这是一个标题，那么就可以考虑用h标签。h标签前后会换行。对于这个标签，也没什么好多讲的，仅仅是一些标题什么的时候使用，且不要嵌套。OK，h标签就到这。
那么到现在，知道了如何引入一个css文件，各种css编写方式的优先级以及一些常用的html布局元素。那么现在讲一个css的特效。
经常看到网上有鼠标悬浮以后，按钮的边框满满的亮起来，或者背景颜色慢慢的变亮。这种慢慢的改变某个背景颜色或者其他属性的属性，就是css3中的transition。由于是动态的，所以没法截图。只能文字描述。先看代码
<style>
button{
background-color:red;
padding:10px 25px;
}
button:hover{
background-color:yellow;
transition:all 2s ease 0s;
}
</style>这段代码表示，所有按钮的背景颜色都是红色的，当鼠标悬浮上去以后，背景色变成黄色。并且是红色慢慢的变成黄色。有多慢？通过transition的第二个参数值可以看出，从红色变成黄色，用了2s钟。下面来解释一下transition各个属性值的意思。
第一个参数值为all，表示所有的css属性都使用这套过渡的效果。当然，如果只需要过渡width，那就可以写成transition:width 2s ease 0s;
第二个参数值为过渡的时间，也就是红色变成黄色的时间，也就是一个属性值到另一个属性值之间经历多长时间。
第三个参数值为过渡的方式，ease表示慢速开始，慢速结束。取值如下：
ease//慢速开始，慢速结束
ease-in//慢速开始
ease-out//慢速结束
ease-in-out//慢速开始，慢速结束
cubic-bezier(x1,y1,x2,y2)//可以先不管，这是一条贝兹曲线，设置两个点，但是用的非常少。
第四个参数值为延迟时间，在这里就表示鼠标放到按钮上多久才开始过渡。
之前有学过border，这是一个参数值集合，它可以通过border-width,border-color等属性把border给拆分开来单独设置。那么transition也是一样的。
transition-property:all;//使用这套过渡设置的属性，对应参数一
transition-duration:2s;//过渡时间，对应参数二
transition-timing-function:ease;//过渡方式，对应参数三
transition-delay:0s;//过渡延迟时间，对应参数四。
使用transition还需要注意一点，那就是浏览器的兼容问题。
为了使chrome，火狐，opera等主流浏览器兼容。除了编写transition属性外，还得编写各自浏览器对应的transition属性。例如低版本的chrome浏览器对应的transition属性为-webkit-transition，opera浏览器对应的为
-o-transition等等等等，我也记不清楚了，将来碰到这种不兼容的问题可以百度一下对应的属性。
OK，到这里，全部的内容已经掌握了，剩下的就是练习。
5634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
