web开发之CSS入门

前言

CSS (层叠样式表)
是一种用来表现HTML 或XML等文件样式的计算机语言。

CSS具有以下特点：

丰富的样式定义
易于使用和修改
多页面应用
页面压缩

选择器

作用:选择页面上的某一个或者某一类元素

基本选择器

标签选择器
标签{}

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器：会选择到页面上所有的这个标签的元素*/
        h1{
    
    
            color: red;
            background: blue;
            border-radius: 30px;
        }
        p{
    
    
            font-size: 60px;
        }
    </style>
</head>
<body>
<h1>学python</h1>
<h1>兴趣，努力，坚持</h1>
<p>IT果力成</p>
</body>
</html>

类选择器

类选择器格式：.class的名称{}
优点：可以多个标签归类，是同一个class,可以复用

举例：

扫描二维码关注公众号，回复： 14125569 查看本文章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器格式：.class的名称{}
            优点：可以多个标签归类，是同一个class,可以复用
        */
        .金鱼{
    
    
            color: coral;
        }
        .鲫鱼{
    
    
            color: blueviolet;
        }
        .鲤鱼{
    
    
            color: red;
        }
    </style>
</head>
<body>
<h1 class="金鱼">python</h1>
<h1 class="鲫鱼">java</h1>
<h1 class="鲤鱼">c++</h1>

<p class="金鱼">果力成</p>
</body>
</html>

id选择器
id选择器格式：#id的名称{}
```
 id必须保证全局唯一
```

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 优先级：不遵循就近原则，固定的
        id选择器 > class选择器 >  标签选择器
   -->
    <style>
        /*id选择器格式：#id的名称{}
            id必须保证全局唯一
        */
        #蟒蛇{
    
    
            color: brown;
        }
        .xxcc{
    
    
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1 id="蟒蛇">python</h1>
<h1 class="xxcc">java</h1>
<h1 class="xxcc">c++</h1>

</body>
</html>

优先级：不遵循就近原则，固定的

id选择器 > class选择器 >  标签选择器

想要去掉网页中的广告，审查，找到此块元素，element，写入display:none

层次选择器

后代选择器
在元素的后面

/*后代选择器*/
    body p{
    
    
            background: chartreuse;
        }

子选择器
一代

 /*子选择器*/
    body>p{
    
    
            background: #ef4bff;
        }

相邻(兄弟)选择器

/*相邻（兄弟选择器） 只有一个 相邻（向下）*/
        .active+p{
    
    
            background: red;
        }

通用选择器

  /*通用选择器 当前选中元素的向下所有兄弟元素*/
        .active~p{
    
    
            background: coral;
        }

结构伪类选择器

伪类:条件
(所有带有冒号:的都是伪类)

 /*在不使用id和class的情况下*/
        /*ul的第一个子元素*/
        ul li:first-child{
    
    
            background: darkgreen;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
    
    
            background: coral;
        }

鼠标移到内容上会显示效果

 a:hover{
    
    
            background: brown;
        }
        
<a href="">bshsiis</a>

属性选择器(常用)

id + class结合

= 绝对等于
*= 包含这个元素
^=  以这个开头
$= 以这个结尾

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    = 绝对等于
    *= 包含这个元素
    ^=  以这个开头
    $= 以这个结尾
  -->
    <style>
        /*id=first的元素*/
        a[id="first"]{
    
    
            background: red;
        }
        /*class中有links的元素*/
        a[class*="links"]{
    
    
            background: darkgreen;
        }
        /*选中href中以http开头的元素*/
        a[href^="http"]{
    
    
            background: brown;
        }
        /*选中href中以pdf结尾的元素*/
        a[href$="pdf"]{
    
    
            background: blueviolet;
        }
    </style>
</head>
<body>
<p class="demo">

    <a href="http://www.baidu.com/" class="links item first" id="first" >1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="https://www.bilibili.com/" class="links item">3</a>
    <a href="" class="links item">4</a>
    <a href="abc.pdf" class="links item">5</a>
    <a href="xyz.pdf" class="links item">6</a>
    <a href="" class="links item last">7</a>
</p>
</body>
</html>

美化网页元素

字体样式

    font-family: ; 字体
    font-size: ; 字体大小
    font-weight: ;字体粗细
    color  字体颜色
    font: oblique lighter 20px "楷体";

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--   font-family: ; 字体
        font-size: ; 字体大小
        font-weight: ;字体粗细
        color  字体颜色
  -->
    <style>
        body{
    
    
            font-family: 楷体;
            color: cornflowerblue;
        }
        h1{
    
    
            font-size: 50px;
        }
        .p1{
    
    
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>斗之力，三段</h1>

<p>望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一抹自嘲，紧握的手掌，
 因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，带来一阵阵钻心的疼痛
</p>

<p class="p1">“萧炎，斗之力，三段级别：低级”测验魔石碑之旁，一位中年男子，
 看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来
</p>

<p>中年男子话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动武动乾坤。</p>
</body>
</html>

文本样式

颜色

颜色：单词
RGB 0~F
RGBA A:0~1

h1{
color: rgba(0,255,255,0.5);
}

文本对齐方式

text-align: ; 文本对齐方式
center; 文本居中
left;居左
right;居右

h1{
text-align: center;
}

首行缩进

text-indent: 2em; 首行缩进（一个em代表一个字）

.p1{
text-indent: 2em;
}

行高

line-height=height 行高和块的高度一致，就可以上下居中

<style>
.p3{
    
    
            background: coral;
            height: 200px;
            line-height: 200px;/*行高*/
        }
</style>
<body>
<p class="p3">“萧炎，斗之力，三段级别：低级”测验魔石碑之旁，一位中年男子，
    看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来
</p>

</body>

装饰(下划线…)
看代码

<style>
        /*下划线*/
        .m1{
    
    
            text-decoration: underline;
        }
        /*中划线*/
        .m2{
    
    
            text-decoration: line-through;
        }
        /* 上划线 */
        .m3{
    
    
            text-decoration: overline;
        }
        /*  a标签去下划线  */
        a{
    
    
            text-decoration: none;
        }
</style>
        
<body>
<p class="m1">123456</p>
<p class="m2">123456</p>
<p class="m3">123456</p>
</body>

文本图片水平对齐
代码直观理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  水平对齐  -->
    <style>
        img,span{
    
    
            vertical-align: middle;
            font-size: 50px;
        }
    </style>
</head>
<body>
<p>
    <img src="images/boat.jpg" alt="">
    <span>qwertyuiop</span>
</p>
</body>
</html>

阴影和超链接伪类

/* text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
    
    
            text-shadow: #ef4bff 10px 10px 2px;
        }

超链接伪类
伪类重点用 a:hover

        /*默认的颜色*/
        a{
    
    
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
    
    
            color: orange;
        }
        /*鼠标按住未释放的状态*/
        a:active{
    
    
            color: darkgreen;
        }

列表

/*ul li*/
/*list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
*/
ul li{
    
    
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

背景图像应用

背景颜色
背景图片

 /*border： 边框 */
        /*border: 边框粗细 边框样式（solid实线） 边框颜色*/
        div{
    
    
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            background-image: url("images/1.jpg");
        /*  默认是全部平铺的 repeat */
        }
        .div1{
    
    
            background-repeat: repeat-x;
        }
        .div2{
    
    
            background-repeat: repeat-y;
        }

 /*颜色 图片 图片位置 平铺方式*/
    background: red url("../images/down.jpg") 270px 10px no-repeat;

渐变

渐变网址(梯度):

background-color: #4158D0;
background-image: -webkit-linear-gradient(286deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
background-image: -moz-linear-gradient(286deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
background-image: -o-linear-gradient(286deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
background-image: linear-gradient(286deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

盒子模型

margin 外边距
padding 内边距
border 边框

边框

/*border: 粗细 样式 颜色*/
            border: 1px solid red;

外边距

margin: 0; 上下左右都为0
margin: 0 1px;上下为0,左右1px
margin: 0 1px 2px 3px;按顺时针旋转
margin: 0 auto;居中
<!-- margin: 0 auto;居中
    要求:块元素,块元素有固定的宽度
-->

margin-top: ; 上边距
margin-bottom: ; 下边距
margin-left: ; 左边距
margin-right: ; 右边距

内边距

性质与外边性质相同

padding-top: ; 上边距
padding-bottom: ; 下边距
padding-left: ; 左边距
padding-right: ; 右边距

圆角边框

border-radius: ;

<style>
        div{
    
    
            border: 2px solid orange;
            width: 100px;
            height: 100px;
            border-radius:20px;
        /*  border-radius:20px 2px 2px 2px; 左上  右上  右下 左下  */
        /*  border-radius:20px 2px; 左上  右下  */
        /*  border-radius:20px; 上下左右  */
        }
    </style>

阴影

   <style>
        div{
    
    
            width: 50px;
            height: 50px;
            border: 10px solid orange;
            box-shadow: 10px 10px 100px #ac3b2e;
        }
    </style>

display和浮动

display

   <style>
         /*block：块元素*/
         /*inline:行内元素*/
         /*inline-block:是块元素，但可以内联，表现为行内元素*/
         /*none:删除*/

        div{
    
    
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
    
    
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;
        }
    </style>

这是一种行内元素排列方式,但大多数情况下选择使用float

浮动

float

div{
    
    
    margin: 10px;
    padding: 5px;
}
#father{
    
    
    border: 1px #000 solid;
}
.layer01{
    
    
    border: 1px #f00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    
    
    border: 1px #00f dashed;
    display: inline-block;
    float: right;
}
.layer03{
    
    
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04{
    
    
    border: 1px #f666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
}

父级边框塌陷的问题

clear

/*clear:right 右侧不允许有浮动元素*/
/*clear:left  左侧不允许有浮动元素*/
/*clear:both  两侧不允许有浮动元素*/
/*clear:none*/

解决方案:

增加父级元素的高度

#father{
    
    
    border: 1px #000 solid;
    height: 800px;
}

增加一个新的div标签,清除浮动

<html>
 <div class="clear"></div>
 
<css>
 .clear{
    
    
    clear: both;
    margin: 0;
    padding: 0;
}

在父级元素中增加一个overflow:hidden

#father{
    
    
    border: 1px #000 solid;
    overflow: hidden;
}

父类添加一个伪类 after(最常用)

#father:after{
    
    
    content: '';
    display: block;
    clear: both;
}

小结:

增加父级元素的高度
简单,但元素若是有了固定的高度,就会被限制
浮动元素后面增加空的div
简单,但代码中尽量避免空的div
overflow
简单,但下拉的一些场景避免使用
父类添加一个伪类 after(最常用)

content: '';  /*在父元素后增加空内容*/
    display: block;  /*变成block块*/
    clear: both;   /*清除浮动*/

推荐使用!

定位

相对定位

position: relative;
相对定位：相对于自己原来的位置进行偏移

#first{
    
    
            border: 1px solid orange;
            background-color: #c32c2c;
            position: relative;/*相对定位：上下左右*/
            top:-20px; /*表示距离上部分-20px,向上移*/
            left: 20px; /*表示距离左部分20px,向右移*/
            bottom: -20px;/*表示距离下部分-20px,向下移*/
            right: 20px;/*表示距离右部分-20px,向左移*/
        }

相对定位,仍然在标准文档流中,原来的位置会被保留

绝对定位

position: absolute;

1.没有父级元素的前提下,相对于浏览器定位
2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移
3.在父级元素范围内进行移动
4.相对于父级或者浏览器的位置进行偏移,不在标准文档流中,原来位置不会被保留

固定定位fixed

position: fixed;

 div:nth-of-type(2){
    
    
            width: 50px;
            height: 50px;
            background: orange;
            position: fixed;/*固定定位*/
            right: 0;
            bottom: 0;
        }

z-index

默认是0,最高无限~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/bg2.jpg" alt=""></li>
        <li class="tipText">最好的青春！！</li>
        <li class="tipBg"></li>
        <li>时间：2056-04-27</li>
        <li>地点：吉林工商学院</li>
    </ul>
</div>
</body>
</html>

透明度
opacity: 0.5;

#content{
    
    
    width: 750px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 2px solid black;
}
ul,li{
    
    
    padding: 0;
    margin: 0;   /*置顶*/
    list-style: none; /*去点*/
}
/*父级元素相对定位*/
#content ul{
    
    
    position: relative;
}
.tipBg{
    
    
    background-color: cornflowerblue;
    /*  透明度  */
    opacity: 0.5;
}

.tipText{
    
    
    color: #e54538;
    z-index: 999;
/*  z-index: ; 0~999  */
}
.tipText, .tipBg{
    
    
    width: 750px;
    height: 25px;
    position: absolute;
    top: 510px;
}

这里是果力成,欢迎你的到来阅读,关注公众号 IT果力成一起学习!

前言

选择器