css

CSS

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

• 在标签中使用 style='xx:xxx;'
• 在页面中嵌入 < style type="text/css"> </style > 块
• 引入外部css文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

 

 

一。css选择器：

标签选择器：　　　　　　设置所有div

<style>　　　　　　　　　　　　　
    div{
        background-color:black;
        color:white;
    }
</style>

<div>aaaaaaaaaa</div>
<span>bbbbbbb
    <div>dddddddd</div>
    bbbbbbbb</span>
<div>cccccccccc</div>

 

class选择器：

<style>　　　　　　　　　　　　　　　　　　　　/*注释*/
    .c1{
        color:yellow
    }
</style>

<div class="c1">css的初体验</div>         <!--类选择器（可以重复）-->
<span class="c1">span标签1</span>
<span class="c1">span标签2</span>

　　

id选择器：

<style>
    #i1,#i2{
        background-color:red;
    }
    #i3{
        background-color:green;
    }
</style>

<div id="i1">css的初体验1-1</div>           （不要只用数字，不要重复）
<div id="i2">css的初体验1-2</div>
<div id="i3">css的初体验1-3</div>

　　

关联选择器(层级选择器)：　　将333333设置为红色

<style>
    span div{    或者    ./c1 div{
        color:red
    }
</style>

<div class="c1">111111111</div>
<span class="c1">22222222
    <div>33333333</div>
    22222222</span>
<div class="c1">44444444</div>

　　

组合选择器：　　　　　　

    <style>
        #i1,#i2,#i3{
        color:red
        }
    </style>


    <div id="i1">aaaaaaaaaa</div>
    <div id="i2">bbbbbbbbbb</div>
    <div id="i3">cccccccccc</div>

　　

属性选择器：           对选择到的标签根据属性再进行一次筛选

    <style>
        .c1[n="alex"]{width:10px;height=10px;}
        input[n="lsj"]{width:20px;height=20px;}
    </style>


    <input class="c1" type="text" n="alex">
    <input type="password" n="lsj">

　　

更多选择器      <----点我

 

 css选择器的优先级：标签上的style优先（body）， 编写顺序越下面优先级越高（head）

 将head中样式写在单独的css文件中，可在html的head中引用：<link rel="stylesheet" href="css文件路径文件名">

　

 

 二。css常用属性：

background（背景）

 

 

border（边框）

<div style="border:1px solid red;font-size:100px;text-align:center;">asdadasd</div>　　　　宽度，样式，颜色，字体，水平居中

border-top/bottom/left/right-color
line-height:???px　　与边框px相同，居中
fount-weight:???　　加粗

 

margin 与 padding   （ 外边距与内边距 ）

    <div style="border:1px solid red;height:70px;">
        <div style="background-color:green;height:50px;margin-top:50px;"></div>
    </div>

　　<div style="margin：0 auto;"></div>　　去掉边框与屏幕边缘的空格　　　　
    
    </div>
        <div style="background-color:green;height:50px;padding-top:50px;"></div>
    </div>

　　

display（显示）　　  块级标签与内联标签的转换

    <div style="background-color:red;display:inline;">aaaaaaa</div>
    <a style="background-color:red;display:block;">bbbbbbbb</a>
    <!--行内标签无法设置  高度，宽度，边距      块级标签可以设置-->
    <div style="background-color:red;display:inline-block;">aaaaaaa</div>
    具有块级与内联标签的双重属性     内联：默认自己有多少占多少      块级标签：设置高度，宽度，边距
    display:none；让标签消失

　　

cursor（光标）

 

float（浮点）　　　　让块级标签浮动起来，

    <div style="width:20%;background:red;">aaaaaa</div>
    <div style="width:80%;background:green;">bbbbbbb</div>
    <div style="width:20%;background:red;float:left">aaaaaa</div>
    <div style="width:80%;background:yellow;float:left">bbbbbbb</div>

当左对齐占满时，自动换到下一行

    <div style="width:300px;border:1px solid black;float:left">
        <div style="width:96px;height:30px;border:1px solid red;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid red;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid red;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid red;float:left"></div>
        <div style="clear:both;"></div>
        <!--避免大表格边框被小表格覆盖-->
    </div>

　　

 

position（位置）

position：fixed　　固定在页面的某一位置

 　　　上下翻动滚轮，“返回顶部”位置不变

　　在div中添加（onclick="document.body.scrollTop=0"），实现返回顶部

    <div style="width:70px;height:50px;background-color:yellow;
    position:fixed;bottom:15px;right:15px;">返回顶部</div>
    <div style="height:500px;background-color:#dddddd;"></div>

　　　　上下翻动滚轮，“头部位置”不变

        .c1{
            height:48px;
            background-color:black;
            color:#dddddd;
            position:fixed;
            top:0;
            right:0;
            left:0;
        }
        .c2{
            height:5000px;
            background-color:#dddddd
        }
    </style>


    <div class="c1">头部</div>
    <div class="c2" style="margin-top:48px;">内容</div>

position：absolute　　　  　固定在页面的某一位置 ；一般与 relative 一起使用

　　 上下翻动滚轮，“黄色阴影” 位置跟着改变

    <div style="width:50px;height:50px;background-color:yellow;position:absolute;right:0;bottom:0"></div>
    <div style="height:5000px;background-color:#dddddd;"></div>

position　：absolute +　relative　　

 在页面中包含黄色矩形，黑色方块相对于矩形定位

    <div style="position:relative;width:400px;height:150px;border:1px solid red;margin:0 auto;">
        <div style="position:absolute;left:0;bottom:0;width:50px;height:50px;background-color:black;"></div>
    </div>

　　

透明度

 

overflow（改造默认样式）

<div style="height:200px;width:300px;overflow:hidden;">　　　　照片超过范围，隐藏超出的部分
        <img src="照片">
</div>

<div style="height:200px;width:300px;overflow:auto;">　　　　　照片超出范围，出现滑轮
    　　<img src="照片">
</div>

　　

 hover　　　　当鼠标放在当前标签上时，所设置属性生效（颜色，大小。。。）

    <style>
        .c1:hover{
        background-color:green;
        }
        c2{
        background-color:green;
        }
    </style>


    <div class="c1">asdasdasd</div>
    <div class="c2">asdasdasd</div>

　　

 

更多