javaweb基础学习—— css

1

导入方式：(优先级：离的越近，优先级越高。导入样式优先级最低)

内部样式，行内样式，外部样式，导入样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p,h1{
            /*宽度*/
            width:100px;
            /*高度*/
            height:100px;
            /*背景颜色*/
            background-color:yellow;
        }
    </style>
    <link href="css.css" rel="stylesheet" type="text/css">
    <style>
        @import "css.css";
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color: aliceblue">呵呵</div>
    <p>换行</p>
    <h1>asd</h1>
</body>
</html>

2

选择器：元素选择符：通配符，类选择器，id选择器，类型选择器 （*在IE中不代表通配符，而是代表根元素）关系选择符：子元素选择器，兄弟元素选择器，相邻选择器，包含选择器。属性选择符：当前元素[属性=“属性值”]{}伪类选择符：（给html标签的某种状态设置样式）元素:link{}设置超链接被访问前的样式，元素：visited{}设置超链接地址被访问之后的样式，                hover：设置元素在鼠标悬停时的样式。active：设置元素被用户激活时的样式            注意：a:hover要位于a:link以及a:visited之后，a:active必须位于a:hoverzhihou            较为可靠的顺序是：link visited hover active  利用love hate，即喜欢与讨厌来记忆选择器的优先级：！important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符            注意：！important要写在属性值的后面，分号的前面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css-1.css" type="text/css">
    <style>
        a[href]{
            color:#66ccff;
        }
    </style>
    <style>
        ul li a:link {
            color: yellow;
        }
        ul li a:visited{
            color: blue;
        }
        ul li a:hover{
            color: #66ccff;
        }
        ul li a:active{
            color: red;
        }
    </style>

    <style>
        span{
            color: yellow !important;
        }
        p span{
            color: blue;
        }
        p  .ha{
            color: red;
        }
        p #ha{
            color: #66ccff;
        }

    </style>
</head>
<body>
    <a href="www.baidu.com">百度一下</a>
    <a>百度一下</a>
    <p>123</p>
    <p class="hp">456</p>
    <p id="hs">789</p>
    <ul>
        <li>
            这是列表
        </li>
        <li>
            这是列表
        </li>
        <li>
            这是列表
        </li>
    </ul>
    <ul>
        <li>
            <a href="#">伪类选择符</a>
        </li>
    </ul>
    <p>
        <span class="ha" id="ha">
            14548946123

        </span>
    </p>
</body>

元素选择符
*{
    background-color: #2cf7ff;
    padding: 0px;
    margin: 0px;
    font-family: ‘微软雅黑‘;
}
.hp{
    width: 100px;
    height: 100px;

}
#hs{
    color: aquamarine;
    font-family: ‘楷体‘
}
li{
    color: black;
}

div>p{
/*只选择子元素*/
}
p~h3{
/*只选择p标签后的h3元素*/
}
p+h3{
/*只选择与p相邻的h3元素*/
}
ul li{
/*不仅选择ul里的li元素，还选择li中的子元素*/
}

3

背景：backgr-attachment:背景图像是否固定或随着页面的其余部分滚动background-color:设置背景颜色background-image:把图片设置为背景background-position:设置背景的起始位置background-repeat:设置背景是否以及如何重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*background-color: #66ccff;*/
            /*background-image: url("");*/
            /*background-repeat: no-repeat;*/
            /*background-position:  ;*/
            /*background-attachment: fixed;*/
            background: url("") no-repeat fixed;
        }
        div{

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框：border-width 边框宽度border-style 边框样式border-radius 设置圆角边框box-shadow 设置对象阴影border-image 边框背景图片

颜色：Color Name，HEX，RGB，RGBA，透明色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 200px;
            height: 100px;
            background-color: #66ccff;
            border-width: 5px;
            border-color: yellow;
            border-style: solid;
            border-radius:10px;
            box-shadow: 5px 5px 10px rgba(0,0,0,0.2);/*水平位移，垂直位移，模糊度，颜色*/
        }
    </style>
</head>
<body>
    <div class="container">

    </div>

</body>
</html>

4

字体：font 复合属性font-style 设置字体样式font-size 设置字体大小font-weight 设置字体粗细font-family 设置文本的字体名称注意：可以使用本地不存在的字体，利用@font-face加入即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 30px;
            font-style: italic;
            font-weight: 700/*bold*/;
            font-family: Arial;

        }
        @font-face {
            font-family: myfont;
            src :url("");
        }
        p{
            font-family: myfont;
        }
        p{
            font: italic bold 100px fantasy;
        }
    </style>
</head>
<body>
    <p>hello world!!</p>
</body>
</html>

文本：color 文本颜色text-align 文本水平对齐方式vertical-align 垂直对齐方式line-height 行高（可以使单行文本进行垂直居中）text-transform 设置文本大小写（一般用来规范英文文本的书写情况）text-indent 文本缩进（单位 em是指当前文本大小）

文本装饰：text-decoration 复合属性text-decoration-line 文本装饰线条的位置text-decoration-color 文本装饰线条的颜色text-decoration-style 文本装饰线条的形状text-shadow 文本阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css" type="text/css">
</head>
<body>
    <p>文字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色测试</p>
    <div>
        垂直居中
    </div>
    <p class="123">文本装饰线条</p>
</body>
</html>

body{
    color:red;
}
p{
    width:300px;
    height: 200px;
    background-color: #66ccff;
    text-align: left;
    text-indent: 2em;

}
#a{
    text-transform: capitalize;
    text-transform: uppercase;
    text-transform: lowercase;

}
div{
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    font-size: 20px;
    line-height: 200px;
}
p{
    text-decoration-line: underline;
    text-decoration-color: #66ccff ;
    text-decoration-style: wavy;

    text-shadow: 5px 5px 5px yellow;
}

5

列表：list-style-type：列表类型（列表前为圆点还是方点还是数字）list-style-image:列表项图像list-style-position：列表标志位置list-style：复合属性

表格：border：表格的边框（参数分别为：宽度，类型，颜色）border-collapse：合并或使边框独立td中设置width以及height，paddingtext-align：文本对齐td中设置background-color：设置表格的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="list.css" type="text/css" />

</head>
<body>
    <ul>
        <li>列表元素</li>
        <li>列表元素</li>
        <li>列表元素</li>
    </ul>
    <table border="1px solid blue">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr><tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr><tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
    </table>
</body>
</html>

ul li{
    list-style-type: decimal;
    list-style-image: url("li.png");
    margin-left: 200px ;
    width: 200px;
    list-style-position: inside;
}
table{
    border-collapse: collapse;
    border-color: #66ccff;
}
td{
    width: 200px;
    height: 200px;
    /*padding-left: 10px;*/
    text-align: center;
    background-color: #66ccff;
}

6

块级元素：特点： 每个块级元素都从新的一行开始，且其后面的元素也另起一行        元素的高度，宽度，行高以及顶和底边距都可以设置        元素宽度在不设置的情况下，与其父亲容器相同可以设置display：block可将元素显示为块级元素。

内联元素：特点：与其他非块级元素在一行        元素的高度，宽度以及顶部和底部边距不可设置        元素的宽度就是它包含的文字或者图片的宽度，不可改变可以设置display：inline将元素显示为内联元素。

内联块级元素：常用/*<img> <input>*/特点：和其他非块级元素在一行        元素的高度，宽度，行高以及顶部和底部的边距可以设置可以设置display：inline-block将元素设置为内联块级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="app.css" type="text/css"/>
</head>
<body>
    <div class="one">我是div</div>
    <div class="two">我是div
    <p>很好</p>
    </div>
    <span>我是内联元素</span>
    <a href="#">我是a</a>
</body>
</html>

div{
    width: 100px;
    height: 100px;
    display: inline;
}
.one{
    background-color: #66ccff;
}

.two{
    background-color: antiquewhite;
}
span{
    background-color: #66ccff;
    display: block;
}

7

盒子模型

内容：content，padding,border,margin

分类：    标准盒：正常盒模型。怪异盒模型    伸缩盒：新，旧

内边距：padding在content之外，边框内边框：borderborder-width 边框宽度border-style 边框样式border-radius 设置圆角边框box-shadow 设置对象阴影border-image 边框背景图片外边距：margin围绕在内容边框的区域就是外边距，外边距默认为透明区域外边距接受任何长度单位以及百分数值注意：外边距合并（取相邻元素外边距较大的值）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            padding: 5px;
            border: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        哈哈哈哈
    </div>

</body>
</html>

怪异盒子模型：将盒子模型的初始padding+margin+content固定为width与height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            padding: 20px;
            border: 1px solid bisque;
            box-sizing: border-box;
        }
        .content{
            width: 100px;
            height:100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">

        </div>
    </div>

</body>
</html>

伸缩盒（旧）box-orient：伸缩盒对象子元素的排列方式box-pack：垂直居中box-align：水平居中box-flex：伸缩盒对象子元素如何分配其剩余空间box-direction：伸缩盒对象的子元素的排列顺序是否进行反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="flexbox.css" type="text/css">-->
    <style>
        .container{
            width: 600px;
            height: 600px;
            background-color: #66ccff;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            -webkit-box-direction: reverse;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            -webkit-box-flex: 3;
        }
        .two{

            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-box-flex: 2;

        }
        .three{
            width: 100px;
            height: 100px;
            background-color: #6fc9fa;
            -webkit-box-flex: 1;
        }
        /*display: -webkit-box; 将元素变成（旧）盒子*/
    </style>
</head>
<body>
    <div class="container">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>

    </div>

</body>
</html>

伸缩盒（新）display: -webkit-flex; 变成（新）盒子flex：复合属性flex-grow 按比例分配flex-flow复合属性，设置伸缩盒对象的子元素排列方式flex-direction 伸缩盒对象在父容器中的位置flex-wrap： 设置伸缩盒对象的子元素超出父容器时是否换行order：设置伸缩盒对象的子元素出现的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 600px;
            height: 600px;
            background-color: #66ccff;
            display: -webkit-flex;
            /*变成盒子*/
            -webkit-flex-direction: row;
            -webkit-flex-flow: wrap;

        }
        .one{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            -webkit-flex-grow: 1;
            -webkit-order:3;
        }
        .two{

            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-flex-grow: 1;
            -webkit-order:2;

        }
        .three{
            width: 100px;
            height: 100px;
            background-color: #3ffa72;
            -webkit-flex-grow: 1;
            -webkit-order:1;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>

</body>
</html>

8

position 把元素放到静态的，相对的，绝对的或者固定的位置中top    元素向上的偏移量left   元素向左的偏移量right  元素向右的偏移量bottom  元素向下的偏移量z-index 设置元素的堆叠顺序CSS position属性：static:对象遵循常规流。此时四个定位偏移属性不会被应用relative：对象遵循常规流，并且参照常规流中的位置通过top，right，bottom，left这四个定位偏移属性进行偏移，不影响常规流中的任何元素absolute：对象脱离常规流，其实偏移属性参照的是离自身最近的定位祖先元素，如果没有定位祖先元素，则一直回溯到body元素，其margin不与其他任何margin折叠fixed：与absolute一致，但偏移定位是以窗口为参考。出现滚动条时对象不会碎着滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            position: relative;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="one">哈哈哈哈</div>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>

</body>
</html>

9

浮动：float：  left        right        none        inherit 从父级继承浮动属性注意：float在绝对定位和display为none时不生效（此时该元素被去除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            float: left;
            background-color: #66ccff;
        }
        .two{
            background-color: #3ffa72;
        }
        .three{
            background-color: bisque;
        }
        .container{
            width: 600px;
            height: 600px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>

    </div>
</body>
</html>

clear属性：去掉浮动值，包括继承来的属性属性值与float相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text1{
            float: right;
            background-color: #66ccff;

        }
        .text2{
            clear: right;
            background-color: #3ffa72;
        }
    </style>
</head>
<body>
    <div class="text1">1</div>
    <div class="text2">2</div>

</body>
</html>

9

visibility:设置是否显示对象，此属性是为隐藏的对象保留其所占据的物理空间，与display：none不同希望对象可视，则其父对象也必须可视属性值：visibel        hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            visibility: visible;
        }

    </style>
</head>
<body>
    <div class="one">大家好</div>

</body>
</html>

overflow复合属性，设置对象处理溢出内容的方式，效果等同overflow-x+overflow-y属性值：visible：对溢出的内容不做处理，内容可能会超出容器（默认）        hidden：隐藏溢出的内容        scroll：隐藏溢出的内容，溢出的内容以滚动条的方式出现        auto：按需觉得是否出现滚动条。（此为body对象以及textarea的默认值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width: 200px;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="content">大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好</div>

</body>
</html>

10

2D,3D转换

2D：translate，rotate，scale，skew3D：rotateX，rotateY

浏览器内核：Chrome/Safari     WebkitFirefox           mozPresto            oIE                ms


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
        }
        .change{
            transform: translate(100px,200px);
            transform: rotate(30deg);
            transform: scale(2.3);
            transform: skew(50deg,50deg);
            transform: rotateX(120deg);
            transform: rotateY(120deg);
        }
    </style>
</head>
<body>
    <div > 初始</div>
    <div class="change"> 变换后</div>
</body>
</html>

11

过渡：
transition   复合属性transition-property  应用过渡的css属性的名称transition-duration  定义过渡效果花费的时间，默认0transition-timing-function  规定过渡效果的时间曲线。默认为ease            取值： linear      线性过渡                    ease        平滑过渡                    ease-in     由慢到快                    ease-out    由快到慢                    ease-in-out 由慢到快再到慢transition-delay     规定过渡效果的延迟时间，默认0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            transition: background-color 2s linear;
        }
        .one:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one"> 效果</div>

</body>
</html>

12

动画：animation 复合属性animation-name 检索或者设置对象所应用的动画名称animation-duration 检索或者设置对象动画的持续时间animation-timing-function 检索或者设置对象动画的过渡类型animmation-delay 检索或者设置对象动画的延迟时间animation-iteration-count 检索或者设置对象动画出的循环次数。infinite 无线循环animation-direction  检索或者设置对象动画在循环中是否反向运动。normal 正常方向  alternate 正反交替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            animation-name :cartoon;
            /*animation-duration:5s;*/
            /*animation-timing-function: linear;*/
            /*animation-delay:2s;*/
            /*border-radius: 5px;*/
            /*animation-iteration-count: infinite;*/
            /*animation-direction: alternate;*/
            animation: cartoon 2s linear 2s infinite alternate;
        }
        @keyframes cartoon {
            0%{
                transform: rotate(0deg);
                background-color: yellow;
            }
            25%{
                transform: rotate(90deg);
                background-color: brown;
            }
            50%{
                transform: rotate(180deg);
                background-color: #3ffa72;
            }
            75%{
                transform: rotate(270deg);
                background-color: bisque;
            }
            100%{
                transform: rotate(360deg);
                background-color: #66ccff;
            }
        }
    </style>
</head>
<body>
    <div class="one">
        效果
    </div>

</body>
</html>

13

多列：columns 复合属性column-width 每列的宽度column-count 列数column-gap  列与列之间的间隙

column-rule 列与列之间的边框   复合属性column-rule-width 列与列之间的边框厚度column-rule-style 列与列之间的边框样式column-rule-color 列与列之间的边框颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            /*-webkit-column-count: 2;*/
            /*-webkit-column-width:500px ;*/
            -webkit-columns: 2 500px;
            /*-webkit-column-rule-style: solid;*/
            /*-webkit-column-rule-color: #66ccff;*/
            -webkit-column-rule: 5px solid #66ccff ;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">
            <img src="1.png"width="300px">
            选项卡管理：
            通过执行js命令实现新开选项卡window.open()
            不同的选项卡是存在列表里browser.window_handles
            通过browser.window_handles[0]就可以操作第一个选项卡
        </div>
         <div class="two">
            <img src="1.png"width="300px">
            选项卡管理：
            通过执行js命令实现新开选项卡window.open()
            不同的选项卡是存在列表里browser.window_handles
            通过browser.window_handles[0]就可以操作第一个选项卡
        </div>

    </div>

</body>
</html>

14

CSS Hack :针对不同的浏览器或者不同版本的浏览器写相应的css代码的过程

实现形式：

css属性前缀法：在css样式属性名前加上一些只有特定浏览器才能识别的hack前缀- IE6* IE7\9  IE6`10\0  IE8`10\9\0 IE9和IE10

选择器前缀法：在css选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack*html IE6*+html IE7

IE条件注释法：（IE10+不再支持条件注释）<!-- [if IE]>这段文字只在IE浏览器中显示<![endif]--><!-- [if IE 6]>这段文字只在IE6浏览器中显示<![endif]--><!-- [if gte IE 6]>这段文字只在IE6以上版本浏览器中显示<![endif]--><!-- [if ！ IE 8]>这段文字不在IE8浏览器中显示<![endif]-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="one">111111</div>
    <div class="two">111111</div>
</body>
</html>

15

媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;

        }
        /*.d1{*/
            /*width: 100%;*/
            /*height: 800px;*/
            /*background-color: #66ccff;*/
        /*}*/
        @media screen and(max-width: 640px){
            .d1{
                width: 100%;
                height: 800px;
                background-color: #66ccff;
            }

        }

        @media screen and(min-width: 800px) {
            .d1 {
                width: 100%;
                height: 800px;
                background-color: green;
            }
        }
        @media  screen and (min-width: 640px)  and(max-width: 800px){
              .d1{
                  width: 100%;
                  height: 800px;
                  background-color: red;
              }
        }

    </style>
</head>
<body>
    <div class="d1">

    </div>

</body>
</html>

16

居中方式：margin：0 auto（将一个块级元素居中）

文字居中:line-height;text-align;center（将块级元素之间的文字居中）

由table演变来的居中：display:table(将外部声明为表格)

display: table-cell;（将文字所在p标签设置为单元格）text-align: center;vertical-align: middle;

利用伸缩盒：display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;

        }
        .container{
            width: 100%;
            min-width: 996px;
            height: 70px;
            background-color: #66ccff;

        }
        .header{
            width: 80%;
            min-width: 996px;
            height: 50px;
            background-color: #3ffa72;
            margin: 0px auto;
            text-align: center;
            line-height: 50px;

        }
        ul li{
            display: inline-block;

        }
        .two{
            display: table;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        p{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .outer{
            display: -webkit-box;
            width: 200px;
            height: 200px;
            background-color: yellow;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: #3ffa72;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <ul>
                <li>列表</li>
                <li>列表</li>
                <li>列表</li>
            </ul>
        </div>
    </div>
    <div class="one">
        <div class="two">
          <p>哈哈哈</p>
        </div>
    </div>
    <div class="outer">
        <div class="inner">
          哈哈哈
        </div>
    </div>

</body>
</html>




原文地址：https://www.cnblogs.com/wanmudong/p/8478611.html
				


				
时间： 2024-07-28 19:04:25 

		


		


	

	
	

		


		
javaweb基础学习—— css的相关文章


								

		

			

                JavaWeb基础学习体系与学习思路
			

		

		

									

				对于JAVAWEB的学习,首先一定要明确的是学习整体框架和思路,要有一个把控.对于WEB,很多人认为是做网页,简单的把静态网页与JAVAWEB与网页设计一概而论. 拿起一本JS就开始无脑的学习,学了一会儿就不知所云.那么,我们应该怎么来学习呢? 我认为,对于JAVAWEB的学习,主要分为三部分,前端,服务器,数据库. 首先,前端的内容为HTML+CSS+JAVASCRIPT,这三部分为前端的主要内容. 将前端比作一个人的话,HTML做骨架,CSS做外表,JAVASCRIPT控制人的行为. 而前期			

		

	

				

		

			

                JavaWeb基础: 学习大纲
			

		

		

									

				JavaWeb基础: Web应用和Web服务器 JavaWeb基础: Tomcat JavaWeb基础:HTTP协议和基于Restful的架构 JavaWeb基础: Web工程配置文件 JavaWeb基础:Servlet JavaWeb基础:Servlet Request JavaWeb基础:Servlet Response JavaWeb基础: Cookie			

		

	

				

		

			

                [JavaWeb基础] 028.CSS简介和基础语法
			

		

		

									

				css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 css 的优先顺序 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) css 的基础语法 代码结构 颜色的写法   p { color			

		

	

				

		

			

                前端基础学习-css文字颜色渐变的3种实现
			

		

		

									

				在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种方法,使用 background-cli. tex			

		

	

				

		

			

                前端基础学习css
			

		

		

									

				一.伪类 anchor用于控制链接效果 a:link (没有访问过的链接),定义链接的常规状态 a:hover(鼠标放在链接上的状态),用于控制显示效果 (常用) a:visited(访问过的链接) ,能清楚判断访问过的链接 a:active(在鼠标按下时的状态) 例子: Title.{             : : : }         .{             : : : }         .:.{             : }         :{             ::			

		

	

				

		

			

                前端基础学习-css实现波浪线及立方体
			

		

		

									

				这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html <div class="card-list"> <div class="wave-container"> <div class="wave"></div> <!-- 实现波浪线的div --> <div cla			

		

	

				

		

			

                前端基础学习-CSS实现柱形图
			

		

		

									

				CSS在处理排版之强大,没有做不到,只有想不到.下面我们将一同实现一个柱状图. 先打好一个具体的框架.我们利用无序列表做整体,里面的东西我们根本选择内联无素span,strong,em来填充. <ul class="chart"> <li><em>使命召唤</em><span>: </span><strong>35%</strong></li> <li><em&			

		

	

				

		

			

                前端基础学习-CSS表头固定
			

		

		

									

				纯CSS实现表头固定之所以难,主要在两点.一是占有最大市场份额的IE6不支持position:fixed.另一个,是人们想破头都想在一起表格中实现这种效果.不过外国真的人用纯CSS实现了这种效果,动用了数量惊人的CSS hacks--我觉得,如果搞到代码如此难懂且难扩展,还不如用javascript好了.碰巧今天我也遇到这种需求,换个视角想想,真的搞出来了. 我们知道,CSS是负责表现,HTML是负责结构,同样的结构,换个样式,给人的感觉完全不同,这也说明人的眼睛是很容易受骗.因此前些狂热鼓吹D			

		

	

				

		

			

                前端基础学习-css如何保持div等高宽比
			

		

		

									

				那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定). 下面以高宽 2:1 为例,通过2种方式来实现这种效果. 方式一:利用定位实现 .wrapper{ position : relative; background: #ccc; width: 10%; padding-bottom : 20%; } .inner{ position : absolute; top : 0; left