HTML——CSS样式表&布局页面

CSS样式表：

一、作用：美化网页，页面布局。

二、分类：

　　内联，写在body里标签style=""里面的样式，优点是控制精确，可重用性差。

　　内嵌，嵌在网页的head里面，可重用性高外部，样式写在另一个文件里面，如果要用直接附加过来。

　　优先级：内联>内嵌>外部

三、选择器：

* 代表所有的元素一般的网页都需要在写这个样式，去掉有些标签自带的边界，auto代表居中，如：*{ margin: 0px auto; padding:0px; }

标签选择器：用标签的名字来选择元素。如：div{}

　　ID选择器：用标签的ID名来选择元素，ID的名字前面加# 如：#d1{}

　　CLASS选择器：用class名来选择元素，class名前面加. 如：.a{}

组合选择器：

　　并列关系：用逗号隔开，代表并列。如：.a1,.a2,.a3{}

　　后代关系：用空格隔开，空格前面的是后面的父级元素。如：#d1 a1{}

　　筛选关系：用点隔开。

样式：

1.前景与背景

　　1）前景：指文本 font：是否倾斜是否加粗字体大小选择字体；

font-family:修改字体 font-size：字体大小 font-style：字体样式，italic倾斜 font-weight：字体粗细，bold加粗

color:字体颜色 text-decoration：文本修饰，none可以去下划线 text-indent：首行缩进

　　2）背景： background-color：背景色，background-image：背景图片， background-repeat：平铺方式， background-position：背景图片的位置， background-attachment：背景图片的固定方式

　　3）对齐方式 text-align：水平对齐方式 center居中， vertical-align：垂直对齐方式 middle居中 top靠上 bottom靠下 line-height:行高

注意：设置垂直对齐方式前，必须先设置好行高

2.边框和边界

　　边框： border: 宽度样式颜色； border-1px; border-style:solid; border-color:#F00;

注意：border-width;border-style;border-color三者必须同时设置

　　边界：外边距： margin：上右下左； margin-top:上边距 margin-right:右边距 margin-bottom:下边距 margin-left:左边距

　　内边距： padding:上右下左； padding-top:内上边距 padding-right:内右边距 padding-bottom:内下边距 padding-left:内左边距

3.列表与方块宽度 height:高度

　　list-style:位置 type 图片； list-style-type:列表标示的样式，none去掉，list-style-image:列表图片，list-style-position：列表样式的位置

4.格式布局

position位置：

　　absolute绝对位置，相对于浏览器边界的位置；

　　relative相对位置，相对于它本应该出现的位置。

　　fixed:固定位置，它不会随着滚动。

设置好position之后，就可以用top right bottom left这四个样式。

　　float：流，流式布局。

两个方式：left向左流 right向右流

流后面如果要加东西的话要截断流：clear:both——<div style="clear:both"></div>

　　z-index：值越大的越靠上层

5.其它

　　display: none 隐藏（不占空间，相当于去掉了）； block显示

　　visibility：hidden隐藏（但是占空间，所占的位置还在）； visible显示

　　display和visibility的区别：display隐藏相当于这个元素没有了，visibility的隐藏该元素所占的位置还在，只是内容隐藏了。

　　overflow：超出范围。。。 hidden 超出隐藏（不占位置）； scroll 超出出现滚动条

　　cursor:pointer; 鼠标放上显示（小手）

　　hover：不是一个样式，用元素的ID或者CLASS之类后面跟冒号hover，代表鼠标放到此元素上显示哪些样式

如

6、超链接样式：

<style type="text/css">
a:link--一般链接
{
    color:blue;
}

a:visited--访问过的链接格式
{
    color:green;
}
a1:hover--设置鼠标指向链接时的形式

{

　　cursor:pointer;

　　background-color:#FFF;

　　text-decoration:underline;

}

7、半透明效果（滤镜）：

<div class="box">透明区域</div>
    //样式中的代码
.box
{
    opacity:0.5;
    -moz-opacity:0.5;
    filter:alpha(opacity=50)
}

下面是布局一个网页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">--内嵌，可重用性高
*--代表所有
{
    margin:0px auto;--外边距，auto代表自动居中
    padding:0px;--内边距
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;--字体
}
#top
{
    100%;--宽
    height:80px;--高
}
#tmenu
{
    100%;
    height:60px;
    margin:20px 0px 20px 0px;
}
#tb
{
    54.8%;
    height:60px;
    float:left;--向左流
    padding:0px 0px 0px 3.2%;
}
#menu
{
    42%;
    height:60px;
    float:left;
}
#tb img
{
    131px;
    height:60px;
}
#menu1
{
    margin:0px 25px 0px 15px;
    342px;
    height:60px;
    float:right;
}
#menu1 div
{
    float:left;
    height:40px;
    margin:20px 15px 0px 15px;
    line-height:60px;
    vertical-align:bottom;
    color:#999999;
    font-size:14px;
}
#menu1 div:hover
{
    color:#000;
    cursor:pointer;
}
#mmenu
{
    100%;
    height:50px;
    background-color:#f8f8f8;
    border-top:1px solid #e7e7e7;
    border-bottom:1px solid #e7e7e7;
}
#mmenu div
{
    float:left;
    height:50px;
    margin-left:30px;
    color:#999999;
    font-size:14px;
    line-height:50px;
    vertical-align:middle;
}
#mmenu div:hover
{
    color:#000;
    cursor:pointer;
}
#mmenu img
{
    margin:14px 14px 14px 0px;
}
#img
{
    100%;
    height:600px;
    background-image:url(National%20University%20of%20Singapore%20-%20Home_files/NUSS-ragday2015.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 600px;
}
#imgn
{
    100%;
    margin-top:1px;
}
#imgn div
{
    25%;
    float:left;
    overflow:hidden;
}
#imgn img
{
    margin:0px 0px 0px 1px;
}
</style>
</head>

<body>
<div style="100%;">--内联，可重用性差
<!--TOP菜单-->
<div id="top">
    <div id="tmenu">
        <div id="tb">
            <img src="National University of Singapore - Home_files/logo.png" />--图片链接
        </div>
        <div id="menu">
            <div id="menu1">
                <div>News</div>
                <div>Email</div>
                <div>Library</div>
                <div>Student</div>
                <div>Staff</div>
            </div>
        </div>
    </div>
</div>
<!--菜单-->
<div id="mmenu">
    <div style="margin-left:35px;">Home</div>
    <div>Admissions</div>
    <div>Education</div>
    <div>Research</div>
    <div>About</div>
    <div>Giving</div>
    <div style="float:right;margin-right:25px;"><img src="National University of Singapore - Home_files/sousuo.png"/></div>
</div>
<!--图片-->
<div id="img">
</div>
<div id="imgn">
    <div style="margin-right:-1px"><img style="margin-left:0px;" src="National University of Singapore - Home_files/scrolls.jpg" /></div>
    <div><img src="National University of Singapore - Home_files/save_sya-1.jpg"/></div>
    <div><img src="National University of Singapore - Home_files/IAUS.jpg"/></div>
    <div><img src="National University of Singapore - Home_files/nus110-blue.jpg"/></div>
</div>
</div>
</body>
</html>