博客列表 >css常用选择器与背景设置

css常用选择器与背景设置

珍珠宝宝的博客
珍珠宝宝的博客原创
2019年07月11日 13:41:36673浏览

一,写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法

盒子代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style1.css">
    <title>盒子</title>
</head>
<body>
<div class="box1"></div>
</body>
</html>

style.css代码

.box1 {
    width: 300px;
    height:300px;
    hackground-color: lightblue;
    /*内边距全写*/
    /*padding-top: 20px;*/
    /*padding-right: 30px;*/
    /*padding-bottom: 40px;*/
    /*padding-left: 50px;*/
    /*简写*/
    /*padding: 20px 30px 40px 50px;*/
    /*左=右:30*/
    /*padding: 20px 30px 50px;*/
    /*左=右:30;上=下:50*/
    /*padding: 30px 40px;*/
    /*左=右=上=下*/
    padding: 30px;

    /*外边距规则同上*/
    margin: 20px;

    /*边框全写*/
    /*border-top-width: 5px;*/
    /*border-top-color: red;*/
    /*border-top-style: solid;*/
    /*边框简写:color和style可不按顺序*/
    /*border-top: 5px red solid;*/
    
/*按住alt键,选择要修改的对象,可同时修改多个对象*/
    border-ringht-width: 5px;
    border-ringht-color: green;
    border-ringht-style: solid;

    border-right: 5px solid green;

    border-bottom-width: 15px;
    border-bottom-color: blue;
    border-bottom-style: solid;

    border-bottom: 15px solid blue;

    border-left-width: 25px;
    border-left-color: cyan;
    border-left-style: solid;
    border-left: 25px cyan solid;

    /*border: 5px solid black;*/

    /*边框圆角是内外边距,边框和内容的px(像素)总和,也可用百分比代替数值*/
    border-radius: 50%;

}

下图为运行结果

7fb8b7f3d98b23d1e5e45561e81661e.png

二,基本选择器的用法

先写一个盒子,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>基本选择器</title>
</head>
<body>
宝马一共有9系。分别是1,3,5,6,7,8,X,Z,M系
<!--ul>li{$}*9然后按tab键生成-->
<ul>
    <li class="bg-green">1系,小型车,一般为两门四坐,运动车型,操控性极佳,动力较强,配制比较一般,价格在20万到30万之间。</li>
    <li id="bg-blue">3系,中级车,一般为四门四座,运动车型,操控性极佳,动力较强,配制比较一般,价格在30万到50万之间。另有两门四座的Ci版价格在70万左右。</li>
    <li class="bg-green">5系,中级车,均为四门四座,属于商务车型,豪华配置,动力较强,操控性一般。价格在50万到70万之间。</li>
    <li>6系,豪华跑车,两门四座,价格在140万到220万之间。</li>
    <li>7系,豪华轿车,四门四座,属于商务车型,豪华配置,动力较强,操控性一般。价格在90万到200万之间。</li>
    <li>i系,分别是i3,i8,是宝马电动车以及混合动力系列。价格是30万到200万之间。</li>
    <li>X系,分为X3 ,X5和X6,都是宝马的SUV车系。价格在60万到150万之间。</li>
    <li>M系,各轿车及跑车系列的高性能版本,目前有M3,M5,M6,Z4M等,普遍比普通版本贵一倍以上。</li>
    <li>Z系,小型豪华跑车,两门四座,目前主要是Z4。Z3,Z8已停产。价格在60万到80万之间。</li>
</ul>
<div>
    <p>唐僧</p>
    <li>孙悟空</li>
    <p>猪悟能</p>
</div>
<div>
    <p>沙悟净</p>
    <li>白龙马</li>
</div>
</body>
</html>

然后再建一个stylesheeet,在里面编写选择器

1,标签选择器

ul {
    /*margin-top: 0;*/
    /*margin-bottom: 0;*/
    /*padding-left: 0;*/
    /*border: 1px solid red;*/
}

2,后代选择器,选择ul的后代元素

ul li {
    /*清除样式点*/
    list-style: none;
    width: 900px;
    height:40px;
    background-color: wheat;
    border: 1px solid black;
    box-shadow: 2px 2px 2px #888;
    /*右 下 扩散 灰色*/
}

3,id选择器

#bg-blue {
    background-color: lightblue;
}

4类选择器

.bg-green {
    background-color: lightgreen;
}

5属性选择器

li[id] {
    border: 2px solid red;
}

6群组选择器

#bg-blue, .bg-green {
    border: 2px solid blue;
}

7相邻选择器

#bg-blue + .bg-green
    /*+:只选中相邻的同级元素*/
{
    background-color: yellow;
}

8兄弟选择器

#bg-blue ~ * {
    background-color: yellow;
}

9伪类选择器:子选择器

/*选中第一个子元素*/
ul :first-child {
    background-color: coral;
}
/*选中最后一个子元素*/
ul :last-child {
    background-color: coral;
}
/*选中某一个子元素*/
ul :nth-child(5) {
    background-color: coral;
}
/*选中偶数元素:2n或者even*/
ul :nth-child(2n) {
    background-color: coral;
}
/*选中奇数元素:2n+1或者add*/
ul :nth-child(2n+1) {
    background-color: coral;
}
/*选中倒数元素*/
ul :nth-last-child(3) {
    background-color: coral;
}

10伪类选择器:类型选择器

重点: :nth-child(n):只关注位置

            :nth-of-type(m):除了关注位置外,还要关注元素的类型

ul li:first-of-type{
    background-color: coral
}
ul li:last-of-type{
    background-color: coral
}
ul li:nth-of-type(5){
    background-color: coral
}

/*:nth-child(n):关注位置*/
/*:nth-of-type(m):除了关注位置外,还要关注元素的类型*/
div :nth-child(2) {
    background-color: darkviolet;
}
div:first-of-type :nth-child(3) {
    background-color: hotpink;
}
/*等同于上一步*/
p:nth-of-type(2) {
    background-color: hotpink;
}

三,选择器的编写符合叠加原理,同一级别中后写的会覆盖先写的样式


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议