首页 > 代码库 > CSS样式表

CSS样式表

2024-10-04 02:58:02   216人阅读

CSS样式表的样式主要可以分为大小，背景，字体，对齐方式，边界边框，列表方块，格式布局等。

元素的大小：

    #div1{
        width:300px;
        height:1000px;
                }

width:宽度，单位可以使用百分比或者像素

height：高度，单位可以使用百分比或者像素

如果没有内容且不设置高度和宽度在页面是看不到。

背景：

#div1{
        width:300px;
        height:1000px;
        background-color:#0C0;
        background-image:url(preview.jpg);
        background-repeat:no-repeat;
        background-position:center;
        background-attachment:scroll;
        background-size:200px 250px;
}

技术分享

background-color：背景颜色

background-image：背景图片，在页面中背景图在背景颜色上边

background-repeat：背景图片的平铺方式

　　常用的有：

　　background-repeat:repeat;平铺，默认选项

　　　　　　　　　　　  :no-repeat;不平铺

 　　　　　　　　　　　 :repeat-x;横向平铺

　　　　　　　　　　　  :repeat-y;纵向平铺　　　　　　　　　　　　

background-position：背景图的位置，图片默认出现在左上角

　　常用的有：

　　background-position:top;上

　　　　　　　　　　　　:bottom;下

　　　　　　　　　　　　:left;左

　　　　　　　　　　　　:right;右

　　　　　　　　　　　　:center;居中

　　background-position还可以使用空格和像素来达到靠右下角并且留有一定距离的效果

#div1{
        background-position:bottom 20px right 20px;
        }

 技术分享

background-attachment:背景图是否随着滚动条滚动

　　主要有：

　　background-attachment:fixed;不滚动

　　　　　　　　　　　　　　:scroll;滚动

background-size:背景图的大小，可以自己设置像素大小，也可以根据提示这只自动等

文字：

    #div1{
        font-family:微软雅黑;
        font-size:.5em;
        font-style:italic;
        font-weight:bold;
        text-decoration:line-through;
        color:#666;
        text-indent:-5em;
        }

font-size:字体大小，可以用像素表示，普通正文一般用14px，页脚一般用12px，也可以用百分比或者em表示，200%是默认字体的两倍，.5是默认字体的0.5倍

font-family:字体样式，原则上不能使用太过花哨特殊的字体，因为用户电脑上可能没有，特殊情况可以使用图片代替

color:文字颜色 

font-weight:bold;加粗 

font-style:italic;倾斜

text-decoration:underline;下划线

　　　　　　　　none;去掉下划线

　　　　　　　　line-through;删除线

text-indent：首行缩进，特殊情况可以使用负号

文字对齐方式：

 

<!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>
    #div1{
        height:50px;
        background-color:#9CC;
        text-align:center;}
    #div2{
        height:50px;
        background-color:#666;
        text-align:right;
        vertical-align:center;
        line-height:50px;
        }
</style>
</head>

<body>
    <div id="div1">这是第一个div中的文字</div>
    <div id="div2">这是第二个div中的文字</div>
</body>
</html>

 

技术分享

 

text-align：水平对齐方式

　　　　　　center;居中

　　　　　　left;左

　　　　　　right;右 

vertical-align：垂直对齐方式,单独设置没有效果，需要和行高配合使用

　　　　　　　middle;居中

　　　　　　　top;上

　　　　　　　bottom;下 

line-height:行高

边界与边框：

<!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>
    #div1{
        height:100px;
        width:100px;
        border:1px #000033 solid;
        margin:10px 20px 30px 40px;
        padding:10px 20px 30px 40px;}
    #div2{
        height:30px;
        width:20px;
        border:1px #00FF00 solid;}
</style>
</head>
<body>
    <div id="div1">
        <div id="div2"> </div>
    </div>
</body>
</html>

技术分享

margin：外边距，用像素表示，顺序依次为上右下左，顺时针方向，也可以分别用margin-top/right/bottom/left来设置，如果只写一个表示四个方向的距离均为此值。

padding：内边距，和margin相同，都是用像素，上右下左，也可以分别设置，如果使用了padding，该元素会相应变大

border：边框，可以同时设置宽度，颜色，边框线，用空格隔开，也可以单独设置，border也可以单独设置上/下/左/右边框，边框的大小也是包含元素里面的

关于border，还有很多用法：

<!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>
    #div1{
        width:0px;
        height:0px;
        border-top:100px solid #000;
        border-right:100px solid #FFF;
        border-bottom:100px solid #FFF;
        border-left:100px solid #FFF;}
</style>
</head>

<body>
    <div id="div1">
    </div>
</body>
</html>

技术分享

可以利用border的特性制作一些不规则的形状。

列表与方块：

<!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>
    #ol1{
        list-style:none;}
    #ol2{
        list-style-image:url(%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA7.gif)}
</style>
</head>

<body>
    <ol id="ol1">
        <li>第一项</li>
        <li>第二袭</li>
        <li>第三幕</li>
        <li>第四部</li>
    </ol>
    <ol id="ol2">
        <li>第一项</li>
        <li>第二袭</li>
        <li>第三幕</li>
        <li>第四部</li>
    </ol>
</body>
</html>

技术分享

list-style:列表符号的样式

　　　　inside 符号在元素里面

　　　　outside  符号在元素外部

　　　　none 没有符号

list-style-image：列表前面加图片作为排序符号

格式与布局：

格式与布局比较复杂难以理解

position:

技术分享

下面举例来说明：

absolute; 绝对定位（相对于浏览器边界）

<!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>
    #div1{
        height:200px;
        width:200px;
        background-color:#006;
        position:absolute;
        top:20px;
        right:30px;
        }
    .d1{
        width:100px;
        height:500px;}
        
</style>
</head>

<body>
    <div id="div1">
    </div>
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
</body>
</html>

技术分享

拉动滚动条，位置随之改变。

fixed 固定位置：

<!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>
    #div1{
        height:200px;
        width:200px;
        background-color:#006;
        position:fixed;
        top:20px;
        right:30px;
        }
    .d1{
        width:100px;
        height:500px;}
        
</style>
</head>

<body>
    <div id="div1">
    </div>
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
</body>
</html>

技术分享

拉动滚动条，位置不变。

relative 相对定位，相对于该元素本该出现的位置：

<!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>
    #div1{
        background-color:#0F0;
        position:relative;
        top:20px;
        left:30px;
        }
</style>
</head>
<body>
    这是一段文字
    <div>这是div中的文字</div>
    <div id="div1">
    这是相对定位div中的文字
    </div>
</body>
</html>

技术分享

在原本应该出现的位置偏移。

需注意的是，只要加了position，该元素就和其他元素不在同一层了，原本被挤下去下面的元素就会浮上来。

设置居中：margin：0px  auto;

流式布局：

做网页布局。可以让元素流动。

<!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>
    .div1{
        margin:10px;
        width:100px;
        float:right;
        background-color:#999;}
    #nr{
        height:300px;
        width:100%;
        background-color:#063;}
</style>
</head>
<body>
    <div class="div1">首页</div>
    <div class="div1">产品介绍</div>
    <div class="div1">发展历史</div>
    <div class="div1">个人中心</div>
    <div class="div1">相关内容</div>
    <div class="div1">联系我们</div>
    <div style="clear:both"></div>
    <ul style="list-style:none;">
        <li class="div1">首页</li>
        <li class="div1">首页</li>
        <li class="div1">首页</li>
        <li class="div1">首页</li>
        <li class="div1">首页</li>
        <li class="div1">首页</li>
    </ul>
    <div style="clear:both"></div>
    <div id="nr"></div>
</body>
</html>

技术分享

float:left/ight; 向左/右流，会随着浏览器大小适应

截断流：<div style="clear:both"></div>

z-index:给元素设置一个层级，数字越大越靠上

其他：

HTML和css使用的注释不同，在HTML代码中使用<!--  -->，但是在css中该注释无效，应使用/*  */。

CSS样式表


联系
我们