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="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

总是在新行上开始;
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<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;">

改造默认样式

我是分割线

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>

时间： 2024-12-08 00:24:21

CSS使用

CSS介绍

css选择器

标签选择器

class选择器

ID选择器

关联选择器

组合选择器

属性选择器

常用属性

background

background-color

background-image

background-position

background-repeat

border

margin padding区别

display

none

block

inline

inline-block

cursor

float

position

relative

absolute

relative+ absolute

fixed

static

透明度

img标签

改造默认样式

CSS使用的相关文章