CSS样式表

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; 绝对定位(相对于浏览器边界)

选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。简单来说,如果div中没有设置定位,他里面再套一个div设置绝对定位,里面的div不会出现在外面div里面。如果两个div都设置absolute,里面的div就是相对外div来进行定位的。

<!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中该注释无效,应使用/*  */。

:hover鼠标移上的效果

<!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;
        height:200px;
        width:200px;
        background-color:#333;
        border-radius:15px;}
    #div1:hover{
        background-color:#030;
        cursor:pointer;
        box-shadow: 10px 10px 10px blue;
        border-radius:15px;}
</style>
</head>

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

如图,两个方块应用的是同样的样式,下面方块是鼠标移上去的效果。应用方法是在选择器:hover,然后正常应用各种样式就好。

cursor:pointer; 鼠标的光标变成手

border-radius:5px;圆角,像素的多少代表圆角的弧度

box-shadow:0 0 5px white; 阴影效果,每个方向阴影的大小以及颜色

display:none隐藏 block显示 隐藏不占位置

visibility:hidden 隐藏 visible 显示 隐藏占位置 overflow:hidden; 超出部分隐藏

需要注意的是,<sapn>标签的大小是由内容决定的,单独设置标签的大小没有意义,但是,如果给它display:block使它块状显示,就可以,会达到和<div>相似的效果。

透明效果:

opacity:0.2;

-moz-opacity:0.2;

filter:alpha(opacity=20);

这三种方式均可达到透明效果,是不同CSS标准的写法,由于有些不同浏览器支持不同的标准,所以最好全部写上。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript事件与例子(三)

    两个例子,好友选中效果和左侧右侧子菜单 一、好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,...

    二十三年蝉
  • JavaScript事件(二)

    例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html...

    二十三年蝉
  • 两个HTML,CSS布局实例

    今天首先仿照某公司页面只做了一个几乎一模一样,连距离都相同的页面。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T...

    二十三年蝉
  • 第138天:Web前端面试题总结(编程)

    2、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为...

    半指温柔乐
  • 18.CSS

    选择器 1.标签上直接设置style属性 <p style="color: red">直接标签里面写</p> 2.id选择器 <style> ...

    zhang_derek
  • (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能

    Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离!

    Tz一号
  • 14. css3 media响应式样式示例

    在日常的样式编写中,对于浏览器宽度变化的时候,我们为了增加体验,总是需要根据变化进行响应式的样式设置。

    Devops海洋的渔夫
  • 个人总结(css3新特性)

    css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得...

    守候i
  • 盒模型的实际尺寸

    好了,从上图来看,已经绘画除了三个正方形了。下面继续看看增加一下边框border看看。

    Devops海洋的渔夫
  • 一步步实现静态页面布局

    本文内容概要: 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券