首页 > 代码库 > CSS使用

CSS使用

  

CSS介绍

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

语法:style = ‘key1:value1;key2:value2;‘

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

  • 在标签中使用 style=‘xx:xxx;‘,优先级最高
  • 在页面中嵌入 < style type="text/css"> 块
  • 引入外部css文件,优先级最低

css选择器

标签选择器

div{ background-color:red; } 
<div > </div>

class选择器

.bd{ background-color:red; } 
<div class=‘bd‘> </div>

ID选择器

#idselect{ background-color:red; } 
<div id=‘idselect‘ > </div>

关联选择器

空格隔开关联的标签即可

#idselect p{ background-color:red; } 
<div id=‘idselect‘ > <p> </p> </div>

组合选择器

input,div,p{ background-color:red; } 

属性选择器

将属性统一处理

input[type=‘text‘]{ width:100px; height:200px; } 

栗子如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" href="http://www.mamicode.com/common.css" />-->
    <style>
        /*标签选择器,找到所有的标签应用以下样式*/
        div{
            color: green;
        }
        /*id选择器,找到标签id等于i1的标签,应用以下样式*/
        #i1{
            font-size: 56px;
            /* color: green; */
        }
        /*class选择器,找到class=c1的所有标签,应用一下样式*/
        .c1{
            background-color: red;
        }
        /*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/
        /*.c2 div p a{*/
            /**/
        /*}*/
        .c2 div p .c3{
            background-color: red;
        }
        /*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/
        .c4,.c5,.c6{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="c4">1</div>
    <div class="c5">1</div>
    <div class="c6">1</div>

    <div class="c2">
        <div></div>
        <div>
            <p>
                <span>oo</span>
                <a class="c3">uu</a>
            </p>
        </div>
    </div>
    <div class="c3">sdfsdf</div>

    <span class="c1">1</span>
    <div class="c1">2</div>
    <a class="c1">3</a>


    <a id="i1">baidu</a>
    <div>99</div>
    <div>99</div>
    <div>99</div>
    <div>
        <div>asdf</div>
    </div>
</body>
</html>

常用属性

background

background-color

hello,world!

code:

<div style="background-color: chartreuse"> hello,world!</div>

background-image

这里需要注意下:url中为单引号

<div style="background-image: url(‘4.gif‘);height: 80px;"></div>

background-position

直接看全部代码吧:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PIC_test</title>
    <style>
        .img{
            background: url(1.png);
            height: 20px;
            width: 20px;
            background-position: 0px -141px;
            background-repeat: no-repeat;
        }
        .img1{
            background: url("4.gif");
            height: 500px;
            width: 500px;
            background-repeat: no-repeat;
        }
    </style>
</head>
    <body>
        <div class="img"></div>
        <div>登录</div>
        <div class="img1"></div>
        <div style=" padding: 0px;">>hello,world!</div>
        <div style="background-image: url(‘4.gif‘);height: 80px;"></div>
    </body>
</html>

 

background-repeat

设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像

repeat | no-repeat | repeat-x | repeat-y

  • repeat :  背景图像在纵向和横向上平铺
  • no-repeat :  背景图像不平铺
  • repeat-x :  背景图像在横向上平铺
  • repeat-y :  背景图像在纵向平铺

border

边框:分为三类

  • solid 实线
  • dotted 点虚线
  • dashed 断点虚线

代码:

<div style="height: 100px;border: 1px solid red;">
        <div style="margin-top: 30px;margin-left: 100px;">
            <input />
            <input />
            <input />
        </div>
</div>

margin padding区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

一、padding
 
1、语法结构
(1)padding-left:10px; 左内边距
(2)padding-right:10px; 右内边距
(3)padding-top:10px; 上内边距
(4)padding-bottom:10px; 下内边距
(5)padding:10px; 四边统一内边距
(6)padding:10px 20px; 上下、左右内边距
(7)padding:10px 20px 30px; 上、左右、下内边距
(8)padding:10px 20px 30px 40px; 上、右、下、左内边距
 
2、可能取的值
(1)length  规定具体单位记的内边距长度
(2)%       基于父元素的宽度的内边距的长度
(3)auto    浏览器计算内边距
(4)inherit 规定应该从父元素继承内边距
 
3、浏览器兼容问题
(1)所有浏览器都支持padding属性
(2)任何版本IE都不支持属性值“inherit”
 
 
二、margin
 
1、语法结构
(1)margin-left:10px; 左外边距
(2)margin-right:10px; 右外边距
(3)margin-top:10px; 上外边距
(4)margin-bottom:10px; 下外边距
(5)margin:10px; 四边统一外边距
(6)margin:10px 20px; 上下、左右外边距
(7)margin:10px 20px 30px; 上、左右、下外边距
(8)margin:10px 20px 30px 40px; 上、右、下、左外边距
 
2、可能取的值
(1)length  规定具体单位记的外边距长度
(2)%       基于父元素的宽度的外边距的长度
(3)auto    浏览器计算外边距
(4)inherit 规定应该从父元素继承外边距
 
3、浏览器兼容问题
(1)所有浏览器都支持margin属性
(2)任何版本IE都不支持属性值“inherit”

区别图:

技术分享

display

四种:

  • none 隐藏,元素不会被显示
  • block 占据浏览器的一整行,此元素将显示为块级元素,此元素前后会带有换行符。
  • inline 内联,默认。此元素会被显示为内联元素,元素前后没有换行符
  • inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

none

什么都看不到,但我确实写了,code:

<div style="display:none;">none</div>

block

  1. 总是在新行上开始;
  2. 高度,行高以及顶和底边距都可控制;
  3. 宽度缺省是它的容器的100%,除非设定一个宽度
  4. <div>, <p>,<h1>, <form>, <ul> 和 <li>是块元素的例子。

code:

<span style="">content</span>
<span style="display: block; ">content</span>

可将内联标签转为块级标签显示

inline

  • 和其他元素都在一行上;
  • 高,行高及顶和底边距不可改变;
  • 宽度就是它的文字或图片的宽度,不可改变

code:

<div style="">content</div>
<div style="display:inline;">content</div>

inline-block

准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性

code:

<span style="height: 50px;width: 200px;">asdfasdf</span>

<span style="display: inline-block;height: 50px; ">asdsfsdf</span>

cursor

定义鼠标的动作,有5个值:

pointer |
help |
wait |
move|
crosshair

code:

<span style="cursor:pointer;">pointer</span> |
<span style="cursor:help;">help</span> |
<span style="cursor:wait;">wait</span> |
<span style="cursor:move;">move</span>|
<span style="cursor:crosshair;">crosshair</span>

可以伪造一个链接,点到鼠标坏也打不开:

 

code:

<span style="cursor:pointer;color:blue;">pointer</span>

float

漂浮,可以有left,right,但是,如果多窗口漂浮的话,会出现漂出边界的情况,漂得太淫荡了...

所以,为了防止漂出边界,我们可以用clear:both;把窗口给拽下来!

code:

<div style="width: 500px;height: 50px;border: 1px solid red">
    <div style="width: 20%;float: left">asdf</div>
    <div style="width: 30%;float: right">sdfdsf</div>
    <div style="clear: both;"></div>
</div>

 

code:

<div style="width: 500px;border: 1px solid red;">
    <div style="width: 20%;float: left">f</div>
    <div style="width: 30%;float: right">a</div>
    <div style="width: 30%;float: right">a</div>
    <div style="clear: both;"></div>
</div>

我是分割线------------

left
right
 

下面的多了一行<div style="clear: both;"></div>

position

有4个属性值:

  • relative 相对
  • absolute 绝对
  • fixed 固定
  • static 默认静态

更多的东西请点我

relative

如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】,它是按照原来自己应该所在的位置进行相对移动的

relative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码:

#sub1

{

    position: relative;

    padding: 5px;

    top: 5px;

    left: 5px;

}

我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,relative的“相对的”意思也正体现于此。

对于此,您只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。

随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。

如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。

注意relative的偏移是基于对象的margin的左上侧的。

absolute

当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。

#div-1a { position:absolute; top:0; right:0; width:200px; }

这个属性总是有人给出误导。说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。

当sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:

(1)当sub1的父对象(或曾祖父,只要是父级对象)parent也设置了position属性,且position的属性值为absolute或者relative时,也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。

注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。

接下来的问题是,sub2的位置到哪里去了呢?由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始。

(2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。

relative+ absolute

如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位,就可以把 div-1a 移动到 div-1 的右上方。

#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
    <div style="width: 500px;height: 600px;border: 1px solid red;position: relative">
        <div style="height: 200px">
            <!--固定在某个窗口的固定位置,其实也是相对的-->
            <div style="position: absolute;bottom: 0;right: 0">1111</div>
        </div>
    </div>
    <div style="height: 1000px;"></div>
    <!--固定在浏览器窗口某个固定位置-->
    <div style="position: fixed;right: 200px;bottom: 100px">xxxxx</div>


    </body>
</html>

fixed

fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。

static

position的默认值,一般不设置position属性时,会按照正常的文档流进行排列

透明度

类似于一共三层图片,中间一层是透明层,底层的东西无法点击.
关键词:

  • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。数值越高越在前面
  • opacity 设置透明度的,0-1以内的值
  • padding: 0px 5px !important; line-height: 1.8; vertical-align: middle; display: inline-block; font-family: ‘Courier New‘, sans-serif !important; font-size: 12px !important; border: 1px solid rgb(204, 204, 204) !important; border-radius: 3px !important; background-color: rgb(245, 245, 245) !important;">background-color: black;opacity: 0.4;

思路:先用fixed将图像固定在窗口,再使用position移动图片到,然后margin调整到正中间,然后再调整透明度.

将一张图搞得透明,我直接上代码了:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide {
            display: none;
        }
        .modal{
            width: 400px;
            height: 300px;
            background-color: #dddddd;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*background-color: black;*/
            /*opacity: 0.4;*/
            background-color: rgba(0,0,0,.6);
             z-index: 9;
        }
    </style>
</head>
<body>
    <input type="button" value="添加" />

    <div class="shadow"></div>
    <div class="modal">
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
    </div>
    <div style="height: 2000px;">

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

img标签

注意路径叫src

<img src="2.jpg" style="height: 500px;width: 20px;">

改造默认样式

  • 首页
  • 菜单1
  • 菜单2

我是分割线

code:

<div id="t80">
<!--                    <h2>默认样式改造</h2>
                    <ul>
                        <li>首页</li>
                        <li>菜单1</li>
                        <li>菜单2</li>
                    </ul>-->

                    
    <style type="text/css">
        .changeul{
            margin: 0px;
            padding-top: 0px;
        }
        .changeul li{
            list-style-type: none;
            float: left;
            background-color: #ddd;
        }
        .changeul li a{
            display: block;
            padding: 19px 20px;
        }
        .changeul li a:hover{
            background-color: red;
        }
    </style>
    <ul class="changeul">
        <li><a href="http://www.baidu.com">首页</a></li>
        <li><a href="http://www.baidu.com">菜单1</a></li>
        <li><a href="http://www.baidu.com">菜单2</a></li>
    </ul>
    
</div>

 

CSS使用