css

最新推荐文章于 2023-05-11 16:30:06 发布

原创最新推荐文章于 2023-05-11 16:30:06 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#菜鸟 #html #作业

新手笔记专栏收录该内容

19 篇文章

订阅专栏

笔记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”的元素