css三种样式!
内部样式表
内部样式表需要在网页的<head>部分定义,格式如下:
<head>
<style type="text/css">
/*符合CSS语法结构的CSS语句,例如*/
body { background-color: blue; }
</style>
</head>
行内样式表(内嵌样式表)
行内样式表直接在标签内部定义,使用style属性,写法如下:
<标签 style="符合CSS语法结构的CSS语句">
例如:
<p style="text-indent:24px;">段落内容</p>
外部样式表
使用外部样式表时,CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件,你需要在网页的<head>部分插入以下内容:
<head>
<link rel="stylesheet" type="text/css"
href="文件位置/你的CSS文件名.css" />
/*文件位置就是所处在的文件夹相对与当前网页的相对路径*/
</head>
相关文档:
第一步:规划网站,本教程将以图示为例构建网站
1.规划网站,本教程将以下图为例构建网站。
点击看大图
其基本布局见下图:
点击看大图
主要由五个部分构成:
1.Main Navigation 导航条,具有按钮特效。 Width: 760px Height: 50px
2.Header 网站头部图标,包含网站的logo和站名。 Width: 760px Height: 15 ......
这段时间在学习css,总结了一些技巧来和大家分享下:
1、使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。
2、清除容器浮动
#main {
overflow:hidden;
}
......
1、列表横排
将li的样式设置为
li {display:block;float:left;}
2、去除图片垂直方向的空白
最好的做法是为img 加上 vertical-align属性,这样就看不到空白了。
......
屏蔽IE浏览器(也就是IE下不显示)*:lang(zh) select {font:12px !important;} /*FF,OP可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。仅IE7与IE5.0可以识别*+html ......
平时我们在浏览网页的时候,常常看见导航栏是动态的,其实我们可以通过css样式表的定义就可以完成。
首先我们看一下css代码:
#nav {
width:900px;
margin:0 auto;
background:#E1F4FD;
}
#nav li {
float:left;
font-size:14px;
}
#nav li a {
color:#000000;
......