css

来源：互联网发布：淘宝网为什么打不开了编辑：程序博客网时间：2024/06/10 12:16

笔记7-13

1. css

1. 背景相关的颜色

<style>    body{        background-color: red;        background-image: url("../pic/photo.jpg");        background-repeat:no-repeat;        /*background-position: inherit;*/    }</style>

Background-color：背景色

Background-image：设定背景图片，需要设置图片的url地址

Background-repeat：选择是否复制，repeat-x，水平复制；repeat-y，垂直复制

Background-position：选择位置

也可以直接将这一组属性值封装到一个background中，书写顺序：背景色，背景图，是否复制，图片位置，这样令代码更加简洁

background: red url("../pic/photo.jpg") no-repeat right;

2. 尺寸相关属性

Height：高度

Width：宽度

div{
height: 100px;
width: 100px;

}

Max-height：

Min-height：

Max-width：

Min-width：

3. 隐藏属性的方法

Visibility：后面接hidden，表示仅仅隐藏了内容，却还是存在的

Display：后面接none，把内容都搞没了，且不占位置

Display可以设置元素的显示模式

Inline：可以将块集元素以内联形式显示，且width和height无效，其空间大小取决于元素的内容。

Inline-black：可以将块集元素以内联形式显示，同时兼具块集元素的某些特征，比如使用width和height属性设置大小

i. 块集元素可以转换为内联元素，转换方式是定义display=inline-black;

ii. 内联元素可以转换为块集元素，转换方式是定义display= black;

li{    display: inline-block;    width: 300px;    height: 300px;    background-color: green;}span{    width: 200px;    height: 200px;    display: block;    background-color: blue;}

4.盒子模型

1. Margin：外边距

Margin-top、margin-right、margin-bottom、margin-left

使用方式

1) margin：30px，代表了上下左右外边距都是30px；

2) Margin-left：30px，单独设置上下左右边距

3) Margin：10px 20px 30px 40px；分别设置上右下左四个边距为10px 20px 30px 40px；

2. Padding：内边距

属性与margin一样，它有的，它也有

3. Border：边界边框

Border-width；边框宽度

Border-style：边框线条类型

Border-color：边框颜色

也可以使用优化的书写方式

border: 50px groove blue;

4. Outline 轮廓线，用法同border

3.定位

定位的方式有：static、fixed、relative、absolute

Static：静态定位（默认）

无定位，元素正常出现了流中，不受上下左右属性影响

<style>    div{        width: 200px;        height: 200px;        background-color: yellow;        position: static;    }</style>

Fixed：动态定位

#div1{    width: 200px;    height: 200px;    background-color: blue;    /*left: 50px;*/    /*top: 50px;*/    position: fixed;    /*z-index: 3;*/}#div2{    width: 200px;    height: 200px;    background-color: yellow;    left: 50px;    top: 30px;    position: fixed;    /*z-index: 2;*/}

从结果看出，fix定位可以将div从流中取出来，重新定位取决于left、top。重新定位之后会出现重叠，可以用z-index来实现谁在上面，大的在上。

Relative：相对的

#div1{    width: 200px;    height: 200px;    background-color: blue;    /*left: 50px;*/    /*top: 50px;*/    position: fixed;    /*z-index: 3;*/}#div2{    width: 200px;    height: 200px;    background-color: yellow;    left: 50px;    top: 30px;    position: fixed;    /*z-index: 2;*/}

相对定位可以跳出流，不会影响别的定位

Absolute：绝对的

#div1{
    width: 200px;
    height: 200px;
    background-color: blue;
    /*left: 50px;*/
    /*top: 50px;*/
    position: static;
    /*z-index: 3;*/
}
#div2{
    width: 200px;
    height: 200px;
    background-color: yellow;
    left: 50px;
    top: 30px;
    position: absolute;
    /*z-index: 2;*/
}
#div3{
    width: 200px;
    height: 200px;
    background-color: yellow;
    left: 40px;
    top: 20px;
    position: absolute;
    /*z-index: 2;*/
}

从结果看出，绝对定位的元素可以从流中被拿出来，依靠left属性进行定位。

与fixed类似，但与参照物不同

Fixed参照根元素

Absolute参照父容器

2.选择器

所谓选择器，指的就是施加样式目标的方式

2.1元素选择器

用标签名作为选择器，选中所有的相应的元素

<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css">        div{            font-size: 50px;            color: green;        }        p{            font-size: 50px;            color: red;        }    </style></head><body><div>元素选择器的使用</div><p>元素选择器的使用1</p><p>元素选择器的使用2</p>

</body>

2.2 Id选择器

是根据id来选择元素，其样式定义形式为

#idname{........}<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        #dv0{            width: 200px;            height: 200px;            background-color: red;        }        #dv1{            width: 200px;            height: 200px;            background-color: green;        }

   </style></head><body><div id="dv0">id选择器的使用</div><div id="dv1">id选择器的使用</div></body>

显示结果：

2.3类选择器

根据class属性来选择元素，其样式定义形式为：

className{.........}<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        .old{            width: 200px;            height: 200px;            background-color: red;        }        .even{            width: 200px;            height: 200px;            background-color: green;        }

   </style></head><body><div class="old">id选择器的使用</div><div class="even">id选择器的使用</div><div class="old">id选择器的使用</div></body>

显示结果：

从结果上看，.old{。。。}会施加到所有的class=”old”的元素上，可以使用在p上

2.4属性选择器

1.根据属性名来选择

<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        [title]{            width: 100px;            height: 100px;            background-color: blue;            border:2px solid red;        }    </style></head><body><div title="div1"></div><div title="div2"></div><div>3</div><div title="div a"></div><div title="a div"></div></body>

运行结果：

结果看出，所有具有title属性的div元素都可以适用，别的还不知道

2.根据属性值来选择

<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        [title="div2"]{            width: 100px;            height: 100px;            background-color: blue;            border:2px solid red;        }    </style></head><body><div title="div1">1</div><div title="div2">2</div><div>3</div><div title="div a">4</div><div title="a div">5</div></body>运行结果：

结果看出，只有div2应用了格式，因为是title=div2

Title~=”div”：选中属性值包含指定完整单词的元素

<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        [title~="div"]{            width: 100px;            height: 100px;            background-color: blue;            border:2px solid red;        }    </style></head><body><div title="div1">1</div><div title="div2">2</div><div>3</div><div title="div a">4</div><div title="a div">5</div></body>

运行结果：

Title^=””div：选中以div开头的title

Title$=”div”:选中以div元素结尾的title

Title*=”div”:选中属性值包含“div”的元素

阅读全文

0 0