CSS3基础知识

最新推荐文章于 2024-10-31 14:03:24 发布

Biu biu biu ??

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量232

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_47697162/article/details/116739952

版权

1.什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

2.CSS的优势

（1）内容和表现分离

（2）网页结构表现统一，可以实现复用

（3）样式十分丰富

（4）建议使用独立于html的css文件

（5）礼仪SEO，容易被搜索引擎收录

3.CSS导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
            color: cyan;
        }
    </style>
    
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

<!--优先级：就近原则-->

<!--行内样式，在标签的元素中，编写一个style属性，编写样式即可-->
<h1 style="color: coral">我是标题</h1>

</body>
</html>

拓展：外部样式的两种写法

链接式：

<link rel="stylesheet" href="css/style.css">

导入式：

@import url是css2.1特有的

<style>
@import url("css/style.css")
</style>

4.选择器

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

4.1基本选择器

标签选择器：选择一类标签标签{}
类选择器 class ：选择所有class属性一致的标签，可以跨标签 .类名{}
id选择器：全局唯一 #id名{}

标签选择器

<style>
        h1{
            background: #1f66ad;
            border-radius: 19px;
        }
        p{
            font-size: 70px;
        }
    </style>

<h1>学CSS</h1>
<h1>学html</h1>
<p>听狂神说</p>

类选择器

<style>
        /*类选择器的格式   .class的名称{}
           好处，可以多个标签归类，是同一个class，可以复用
        */
        .c1{
            color: #082c4e;
        }
        .c2{
            color: #898989;
        }
</style>

<h1 class="c1">标签1</h1>
<h1 class="c2">标签2</h1>
<h1 class="c2">标签3</h1>

<P class="c1">标签4</P>

id选择器

<style>
        /*id选择器 ：id必须保证全局唯一！
          #id名称{}
          优先级：
          不遵循就近原则，优先级为
          id选择器 > class选择器 > 标签选择器
        */
        #sq{
            color: coral;
        }
        .s1{
            color: chartreuse;
        }
        h1{
            color: aquamarine;
        }
    </style>
<h1 id="sq">标题1</h1>
<h1 class="s1">标题2</h1>
<h1>标题3</h1>

4.2层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸你

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

子选择器

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

相邻兄弟选择器弟弟

/*相邻弟选择器*/
 .active + p{
    background: coral;
}

通用选择器

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

4.3伪类选择器

 <!--  避免使用 class id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #1f66ad;
        }
        ul li:last-child{
            background: burlywood;
        }
        /*选中p1 ：定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素中类元素的第几个，并且是p元素才生效
        */
        p:nth-child(2){
            background: crimson;
        }
        /*选中父类元素下的P元素的第二个，按类型选*/
        p:nth-of-type(3){
            background: yellow;
        }
    </style>

<body>

<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>

效果如下图：

4.4属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: yellow;
            text-align: center;
            color: azure;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*存在id属性的元素*/
        a[id]{
            background: chartreuse;
        }

        /*id=first的元素*/
        a[id=first]{
            background: chartreuse;
        }

        /*class中有links的元素*/
        a[class*="links"]{
            background: chartreuse;
        }

        /*选中href中以http开头的元素*/
        a[href^=http]{
            background: chartreuse;
        }

        /*选中以doc结尾的元素*/
        a[href$=doc]{
            background: chartreuse;
        }
    </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 first" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links itme">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="abc" class="links item">5</a>
    <a href="/a.pdf" class="links item">6</a>
    <a href="/abc.pdf" class="links item">7</a>
    <a href="abc.doc" class="links item">8</a>
    <a href="abcd.doc" class="links item last">9</a>


</p>

</body>

5.美化网页

5.1 span标签

重点突出的字，使用span标签套起来

<style>
        .t1{
            font-size: 90px;
        }
    </style>

欢迎学习<span class="t1">Java</span>

5.2字体样式

font-family:字体

font-size：字体大小

font-weight：字体粗细

color：字体颜色

5.3文本样式

颜色

（1）单词表示颜色：color:red

（2）RGB：color:#000000

（3）RGBA：color:rgba(0,255,255,0.9) 第四个参数为透明度

文本对齐方式

（1）文本居中：text-align:center

（2）首行缩进：text-indent:2em

（3）行高和块的高度一致就可以实现居中

height：30px

line-height:30px

装饰

（1）下划线：text-decoration：underline

（2）中划线：text-decoration：line-through

（3）上划线：text-decora：overline

（4）文本图片水平对齐：vertical-align:middle

5.4超链接伪类

<style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: yellow;
            font-size: 50px;
        }
        /*鼠标点击的颜色*/
        a:active{
            color: chartreuse;
        }
    </style>

<a href="#">
    <img src="./images/2024411.jpg" alt="图片" height="100px" width="100px">
</a>

<p>
    <a href="#">码出高效：Java开发手册</a>
</p>

<p>
    <a href="">作者：孤尽老师</a>
</p>

5.5阴影

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

5.6列表样式

<div id="nav">
    <h2 class="title">全部商品分类</h2>

    <ul >
        <li >
            <a href="#" >女装</a>
            <a href="#" >内衣</a>
            <a href="#" >家居</a>
        </li>

        <li >
            <a href="#" >女装</a>
            <a href="#" >内衣</a>
            <a href="#" >家居</a>
        </li>

        <li >
            <a href="#" >女装</a>
            <a href="#" >内衣</a>
            <a href="#" >家居</a>
        </li>
    </ul>
</div>

#nav{
    background: #a3a3ac;
    width: 275px;
}
.title{
    font-size: 30px;
    font-weight: bold;
    height: 40px;
    text-indent: 2rem;
    background: red url("../images/u=3498624733,2452711700&fm=26&gp=0.jpg") no-repeat 250px 15px;
}


ul li{
    font-size: 25px;
    height: 40px;
    text-indent: 2rem;
    list-style: none;
    /* list-style
    列表无样式：none
    空心圆：circle
    正方形：spare
    数字：decimal
    */
    background-image: url("../images/u=3498624733,2452711700&fm=26&gp=0.jpg");
    background-repeat: no-repeat;
    background-position: 210px 15px;
}

a{
    text-decoration: none;
    font-size: 20px;
    color: #000000;
}
a:hover{
    color: #ea8326;
    text-decoration: underline;
}

5.7背景图

<style>
        div{
            width: 700px;
            height: 400px;
            border: 1px solid red;
            background-image: url("images/2019423.jpg");
            /*默认全部是平铺*/
        }
        #div1{
            background-repeat: repeat-x;
        }

        #div2{
            background-repeat: repeat-y;
        }

        #div3{
            background-repeat: no-repeat;
        }
    </style>

5.8渐变

<style>
        /*渐变色网址：https://www.grabient.com*/
        body{
            /*background-color: #4158D0;*/ 
            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        }
    </style>

6.盒子模型

6.1什么是盒子模型

margin：外边距

padding：内边距

border：边框

6.2边框

边框的粗细
边框的样式
边框的颜色

<style>
        /*body总有一个默认的外边距margin*/
        h1,ul,li,a,body{
            margin:0;
            padding: 0;
            text-decoration: none;
        }
        /*border:粗细，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            background-color: chartreuse;
            font-size: 25px;
            line-height: 30px;
            color: white;
        }
        form{
            background-color: chartreuse;
        }

        div:nth-of-type(1)>input{
            border: 3px solid black;
        }

        div:nth-of-type(2)>input{
            border: 3px dashed #ea8326;
        }

    </style>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

6.3边距

<style>
        /*border:粗细，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
            /*外边距的妙用：居中元素 (前提是块元素，并且有固定的宽高)
            margin: 0 auto;
            上下边距为0，左右边距自动
            */
        }
        h2{
            background-color: chartreuse;
            font-size: 25px;
            line-height: 30px;
            color: white;
            margin: 0 1px 2px 3px;
            /*margin:0 上下左右为0
              marging:0 1px 上下为0，左右为1px
              margin:0 1px 2px 3px 顺时针方向赋值（上右下左）
            padding同理
              */
        }
        form{
            background-color: chartreuse;
        }
        input{
            border: 1px solid black;
        }

        div:nth-of-type(1){
            padding: 10px 2px;
        }

    </style>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

6.4盒子的计算方式

大小=margin+border+padding+内容的宽高

6.5圆角边框

   <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px;
            /*border-radius: 50px 20px; 主副对角线
              border-radius: 10px 20px 30px 40px; 左上 右上 右下 左下
              圆角 = 半径
              */
        }
    </style>

6.5盒子阴影

<style>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid red;
            box-shadow: #ea8326 10px 10px 100px;
            /*盒子阴影
              box-shadow: #ea8326 10px 10px 100px;
                           颜色 水平偏移 竖直偏移 模糊半径
            */
        }

</style>

图片居中

<style>
        img{
            border-radius: 50px;
            box-shadow: #FFCC70 10px 10px 100px;
        }
    </style>

<div style="width: 300px;display: block;text-align: center">
    <img src="./images/2019423.jpg" alt="">
</div>

7.浮动

7.1标准文档流

默认的布局情况，自上而下

块级元素：独占一行

h1-h6 p div li…

行内元素：不独占一行

span a img strong…

行内元素可以被包含在块级元素中，反之不行

7.2display

<style>
        /*display:block 块元素
          display:inline 行内元素
          display:inline-block 是块元素，但是可以内联，在同一行
          display:none 不显示
          */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px dashed red;
            display:inline-block;
        }
    </style>

7.3浮动float

float：right 左浮
float：left  右浮

7.4父级边框塌陷的问题

clear

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

解决方法

（1）增加父级元素的高度

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

（2）增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
	clear:both;
	margin:0;
	padding:0;
}

（3）overflow

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

（4）父类添加一个伪类：after

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

小结：

浮动元素后增加空div

简单，但代码中尽量避免空div
设置父元素的高度

简单，但父元素的固定高度会产生限制
overflow

简单，下拉的一些场景避免使用
父类增加一个伪类：after（推荐使用）

写法是在CSS中的父类后写一个伪类，没有副作用

7.5对比

display

其方向不可控制，但会按标注文档流进行排列，不会出现塌陷问题
float

浮动起来会脱离标准文档流，需要解决父级元素塌陷问题

8.定位

8.1相对定位

相对定位：position:relative;

相对四个方向的位置，进行指定偏移

top:-20px;

left:20px;

bottom:-10px;

right:20px;

<style>
        body{
            padding: 20px;
        }
        #father{
            border: 1px solid #000000;
            padding: 0;
        }
        #first{
            background-color: #FFCC70;
            border: 1px solid #000000;
            position: relative;/*相对定位*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: aquamarine;
            border: 1px dashed #000000;
        }
        #third{
            background-color: chocolate;
            border: 1px dashed #000000;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

8.2练习

<style>
        #father{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background-color: blue;
        }
        #a2,#a4{
            position: relative;
            top: -100px;
            left: 200px;
        }
        #a5{
            position: relative;
            top: -300px;
            left: 100px;
        }
    </style>

<div id="father">
    <a href="#" id="a1">链接1</a>
    <a href="#" id="a2">链接2</a>
    <a href="#" id="a3">链接3</a>
    <a href="#" id="a4">链接4</a>
    <a href="#" id="a5">链接5</a>
</div>

8.3绝对定位

定位：基于xxx定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
父级元素存在定位，通常会相对于父级元素进行偏移
在父级元素范围内移动

相对于父级元素或者浏览器的位置，进行指定的偏移，绝对定位不在标准文档流中，原来的位置不会被保留

<style>
        body{
            padding: 20px;
        }
        #father{
            border: 1px solid #000000;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #FFCC70;
            border: 1px solid #000000;
        }
        #second{
            background-color: aquamarine;
            border: 1px dashed #000000;
            position: absolute;
            right: 30px;
            top: -20px;
        }
        #third{
            background-color: chocolate;
            border: 1px dashed #000000;
        }
    </style>

8.4固定定位

<style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位，没有父级元素定位就相对浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        div:nth-of-type(2){ /*固定定位*/
            width: 30px;
            height: 30px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

8.5 Z-index

z-index:默认是0，最大为无限（图层大小）

<div class="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""></li>
        <li class="tipText">学习css</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>

.content{
    margin: 0;
    padding: 0;
    width: 500px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
.content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 500px;
    height: 25px;
    top:300px;

}
.tipText{
    color: white;
    /*z-index:0;*/
}
.tipBg{
    background: #000000;
    opacity: 0.5;/*背景透明度*/
}

8.4动画

Biu biu biu ??

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫