J2EE进阶之CSS 二

来源：互联网发布：2k17mc模式奥尼尔数据编辑：程序博客网时间：2024/06/01 09:00

CSS

CSS （Cascading Style Sheet）是层叠样式表.作用来定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS的优点

1：CSS可以更加精细的控制网页的内容形式。比如说前面的font标签中的size属性，可以用于控制文字的大小，但是，它控制的字体只有7级。   要是出现其他级别的文字，它就实现不了，而css可以办到，它可以任意设置字体的大小。2：CSS样式是丰富多彩的。3：CSS的样式定义是灵活多样的。

CSS和HTML结合的方式

sytle属性方式(行内样式)

    利用标签中style属性来改变每个标签的显示样式。例：<p style="background-color:#FF0000; color:#FFFFFF">        p标签段落内容。</p>该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

style标签方式(内嵌样式)

    在head标签中加入style标签，对多个标签进行统一修改。<head><style type=”text/css”>    p { color:#FF0000;}</style></head>该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

导入方式

    前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。例：<style type="text/css">    @import url(css_3.css);    div { color:#FF0000;}    </style>注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

链接方式

    通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。例：<link rel="stylesheet" type="text/css" href="css_3.css" />注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

实例代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title>    <!--         sytle属性方式(行内样式)        style标签方式(内嵌样式)        导入方式        链接方式     -->     <style type="text/css">        /* div{            font-size: 4cm;        } */     </style>     <link rel="stylesheet" type="text/css" href="03demo.css"></link></head><body>    <span style="font-size: 3cm">陈冠希</span>    <div>陈冠希</div>    <div>陈冠希</div></body></html>

CSS样式优先级和代码规范

    由外到内，由上到下 级别逐步增高    书写规范：    属性：属性值;属性1：属性值1    属性：属性值1 属性值2; 如 border:1px solid blue;

CSS选择器

CSS三种常用选择器

    html标签名选择器。使用的就是html的标签名     class选择器。其实使用的标签中的class属性        1.用.开头进行定义        2.可以使得相同的标签具有不同的显示效果        3.可以使得不同的标签具有相同的显示效果     id选择器。其实使用的是标签的中的id属性。        1.用#进行定义，在标签中用id属性进行引入        2.在使用时，最好保持id唯一

实例代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title>    <style type="text/css">        /*            html标签名选择器。使用的就是html的标签名            class选择器。其实使用的标签中的class属性            id选择器。其实使用的是标签的中的id属性。                多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。                所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。        */        .haha{            background-color: blue;color: red        }        #hehe{            font-family: 宋体;            font-size:20px;            color: green;        }    </style></head><body>    <div class="haha">这是div的区域1</div>    <div id="hehe">这是div的区域2</div>    <span class="haha">这是span的区域1</span>    <span>这是span的区域2</span>    <p>这是p的区域1</p>    <p>这是p的区域2</p></body></html>

CSS三种扩展选择器

关联选择器    1.标签允许嵌套，所以样式定义时，也可以对指定标签的内部标签进行选择组合选择器    用逗号隔开，可以一次性写多个html标签伪元素选择器    a:link  超链接未点击状态。    a:visited 被访问后的状态。    a:hover 光标移到超链接上的状态（未点击）    a:active 点击超链接时的状态        a:link{        color:blue;        text-decoration:none;        }        a:hover{        color:red;        text-decoration:underline;        }        a:active{        color:green;        text-decoration:none;        }        a:visited{        color:yellow;        text-decoration:underline;        }

实例代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title>    <style type="text/css">        /*            关联选择器                标签允许嵌套，所以样式定义时，也可以对指定标签的内部标签进行选择            组合选择器                用逗号隔开，可以一次性写多个html标签            伪元素选择器                a:link  超链接未点击状态。                a:visited 被访问后的状态。                a:hover 光标移到超链接上的状态（未点击）                a:active 点击超链接时的状态        */        div font{            color: red;        }        .haha,#hehe{            color: fuchsia;        }        input:FOCUS {            background-color: gray;        }        a:LINK {            text-decoration: none;            color: blue;        }        a:HOVER {            font-family:隶书;            font-size:30px            color: red;        }        a:ACTIVE {            font-family:隶书;            font-size:30px            color: black;        }        a:VISITED {            color: green;        }    </style></head><body>    <a href="http://www.baidu.com">百度</a><br>    <input type = "text" name="username">    <div class="haha">这是div的<font>区域1</div>    <div id="hehe">这是div的区域2</div>    <span class="haha">这是span的<font>区域1</span>    <span id="hehe2">这是span的区域2</span>    <p>这是p的区域1</p>    <p>这是p的区域2</p></body></html>

CSS的常见操作

    CSS中尺度单位的介绍    1in = 2.54cm = 25.4 mm = 72pt = 6pc             cm  mm pt px em=16pt    字体设置        font        font-size        font-style        font-weight        font-family    文本设置    text-align 设置对齐方式    text-indent:2em;设置缩进    背景设置            background-image:url("photo-3.jpg");背景图片            background-position:30px 30px;背景图片出现的位置（leftposition,topposition）            background-repeat:no-repeat;有没有重复            background-color:red;背影色    列表设置        list-style列表样式        list-style-image列表图片    盒子模型(border margin padding)        border边框        margin外补丁        padding賿补丁    定位设置(position,float,clear)            /*margin:20px; 设一个值:代表上右下左 20*/            /*margin:40px 10px;上下20px 左右10px*/            margin:180px 60px 50px;/*margin:10px 40px 50px; 上10px 左右40px 下50px */            /*调位置*/            width:100px;            height:100px;            /*内补丁padding              调内容与边线的距离大小            */    鼠标样式设置(cursor)

1 0