J2EE进阶之CSS 二

ゞ浴缸里的玫瑰 2024-02-17 21:34 66阅读 0赞

## **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>
    
        
    
         <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)