CSS3 Study

最新推荐文章于 2024-07-25 08:14:42 发布

gk_boke

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量217

点赞数

分类专栏：前端三件套文章标签： css html 定位

本文链接：https://blog.csdn.net/gk_boke/article/details/108062936

版权

前端三件套专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS3 Study

1、CSS入门

1.0什么是CSS

html css js

结构+表现+交互

CSS Cascading Style Sheet 层叠级联样式表

CSS：表现（美化页面）

1.1发展史：

CSS1.0

CSS2.0 DIV块+CSS，HTML与CSS结构分离的思想，网页变得简单

CSS2.1浮动，定位

CSS3 圆角，阴影，动画…浏览器兼容性

1.2 快速入门

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujALTNQY-1597664910936)(C:\Users\NongGuangKan\AppData\Roaming\Typora\typora-user-images\image-20200813113042587.png)]

css优势：

1、内容和变现分离

2、网页结构统一，可以实现复用

3、样式十分丰富

4、建议独立使用html的css文件

5、利用SEO，容易被搜索引擎收录

1.3 css三种导入方式

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

<head>
<!--style 内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1>我是标题</h1>

<link rel="stylesheet" href="css/style.css">
   
    
/*style.css 外部样式*/
h1{
    color: aqua;
}

1.4 常见的操作：

/* body总有一个默认的外边距margin：0 常见操作*/
h1,ul,li,a,body{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

2、选择器

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

2.1 基本选择器

1、标签选择器标签名{}

    <style>
        /*标签选择器，会选择页面上所有这个标签的元素*/
        h1{
            color: #8eaa81;
            background: #242e88;
            border-radius: 20px;
        }
        p{
            font-size: 50px;
        }
    </style>
</head>
<body>

<h1>学Java</h1>
<h1>ngk</h1>
<p>学Linux</p>

2、类选择器 class class.{}

    <style>
       /*
        类选择器 .class的名称
        好处，可以多个标签归类,同个class可以复用
       */
        .study{
            color: #171;
        }
        .study2{
            color: deepskyblue;
        }
    </style>
</head>
<body>
<h1 class="study">学Java</h1>
<h1 class="study2">学Linux</h1>
<p class="study">学Linux</p>
</body>

3、id选择器 #id{}

    <style>
        /*id选择器，id必须保证全局唯一
            #id名称{};
            不遵循就近原则，固定的
            id选择器>class选择器>标签选择器

        */
        #i1{
            color: coral;
        }
        #i2{
            color: #242e88;
        }
        .c1{
            color: blueviolet;
        }
        h1{
            color: chartreuse;
        }
    </style>
</head>
<body>

<h1 id="i1">学Java</h1>
<h1 id="i2">学Java</h1>
<h1 class="c1">学Java</h1>
<h1 class="c1">学Java</h1>
<h1>学Java</h1>

**优先级：**id选择器>class选择器>标签选择器

2.2层次选择器

后代选择器

<!--后代选择器-->
body p{
    background: #668883;
}

子代选择器

/*子代选择器*/
body>p{
    background: #8eaa81;
}

相邻选择器

/*相邻选择器 当前元素向下的元素*/
.active + p{
    background: #8eaa81;
}

2.3 结构伪类选择器

<style>
	ul li:first-child{
    	background: #8eaa81;
	}
	ul li:last-child{
   	 background: salmon;
	}

</style>


<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>l4</li>
</ul>

2.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: #93e0ff;
            text-align: center;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性名=属性值（正则表达）*/
        /*存在id的元素 a[]{} */
        /*a[id=first]{*/
            /*background: yellow;*/
        /*}*/
        /*a[id]{*/
        /*a[id]*=
            /*background: yellow;*/
        /*}*/
        /*class中有link
            = 要绝对等于
            *=包含
            $=以什么结尾
        */
        /**/
    </style>
</head>
<body>
<p class="demo">
    <a href="123" class="links item first" id="first">1</a>
    <a href="456" class="links item" title="test">2</a>
    <a href="asd" class="links item">3</a>
    <a href="123" class="links item">4</a>
    <a href="132" class="links item">5</a>
    <a href="3423" class="links item">6</a>
    <a href="234" >7</a>
</p>
</body>
</html>

=  绝对等于
*= 包含
^= 以什么开头
&= 以什么结尾

3、美化网页元素

3.1 为什么要美化

1.有效传递页面信息

2.美化页面，页面漂亮，才能吸引用户

3.凸显页面主题

4.提高用户的体验

3.2 span

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title{
            font-size: 20px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title">java</span>
</body>
</html>

3.3 字体样式

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

          /*font-family: 字体：
          font-size:字体大小
           font-weight:字体粗细
            color：字体的颜色
            em:缩进
          */
        body{
            font-family: 幼圆;
        }
        h1{
            font-size: 40px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>个人技能</h1>
<p>熟悉JavaSE、JavaWeb基础</p>
<p class="p1">熟悉Mybatis，Spring、SpringMVC框架
    了解SpringBoot和SpringCloud
    熟练常用的MySQL基本语句
    了解Vue、Json和Ajax
    熟悉IDEA开发工具，有良好的编码风格</p>
</body>
</html>

3.4 文本样式

颜色、文本对齐方式、首行缩进、行高、下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        颜色：
            单词：
            RGB：0~F
            RGBA A: 0-1
        text-align: 排版
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        /* text-indent: 2em;缩进两个像素
        line-height: 50px; 行高*/
        .p1{
            text-indent: 2em;
            line-height: 50px;
        }
        /*text-decoration: underline; 下划线
            text-decoration: overline;上划线
            text-decoration: line-through;中划线
        */
        .p2{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<h1>个人技能</h1>
<p class="p2">熟悉JavaSE、JavaWeb基础</p>
<p class="p1">熟悉Mybatis，Spring、SpringMVC框架
    了解SpringBoot和SpringCloud
    熟练常用的MySQL基本语句
    了解Vue、Json和Ajax
    熟悉IDEA开发工具，有良好的编码风格</p>
</body>
</body>
</html>

3.5 超链接伪类和文本阴影

超链接伪类：

<!--默认的颜色-->
a{
    text-decoration: none;
    color: #000;
}
/*a:hover鼠标悬停*/
a:hover{
    color: orange;
    font-size: 30px;
}
/*a:active鼠标按住*/
a:active{
    color: green;
}

阴影：

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

3.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>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <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>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>

#nav{
    width: 300px;
    background: darkgray;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #8eaa81;
}
h2{
    text-align: center;
}
/*list-style:
 none; 去掉原点
circle空心圆
decimal 数字
square 正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.7 背景

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("image/a.JPG");
            /*默认平铺*/
        }
        .div1{
            /*水平平铺*/
            background-repeat: repeat-x;
        }
        /*垂直平铺*/
        .div2{
            background-repeat: repeat-y;
        }
        /*不平铺*/
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

3.8 颜色渐变网址：

https://www.grabient.com/

background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);

4、盒子模型

margin：外边距

padding：内边距

border：边框

4.1 边框

<!-- border: 1px solid red; 粗细，样式，颜色-->
    <style>
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: #8eaa81;
            line-height: 30px;
            color: white;
        }
        form{
            background: #8eaa81;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed #8EC5FC;
        }
        div:nth-of-type(3)input{
            border: 2px dashed #E0C3FC;
        }
    </style>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>username：</span>
            <input type="text">
        </div>
        <div>
            <span>password：</span>
            <input type="password">
        </div>
        <div>
            <span>email：</span>
            <input type="password">
        </div>
    </form>
</div>

4.2 内外边距 margin

padding：0px 2px 3px 4px; 上0 右2 下3 左4 顺时针
margin：0px 2px 3px 4px; 上0 右2 下3 左4 顺时针

padding: 2px 10px 上下2px，左右10px

4.4 圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--左上 右上 右下 左下 顺时针
        两个值 左上右下 右上左下-->
    <style>
        .b1{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px;
        }
        .box{
            width: 150px;
            height: 150px;
            background-color: #FFDEE9;
            background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
            border-radius: 150px 0 0 0;
        }
    </style>
</head>
<body>
<div class="b1"></div>
<div class="box"></div>
</body>
</html>

5、浮动（float）

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong

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

5.1 display

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

这也是一种实现行内元素排列的方式，但是很多情况都是使用float

5.2 float

5.3 父级边框塌陷问题

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

解决方案：

1.增加父级元素的高度

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

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

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

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

3.overflow

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

4.在父类添加一个伪类：after（现在认可的方式）

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

小结：

1.浮动元素后面增加div

简单，代码中避免空div

2.设置父类元素的高度

简单，父元素没有了固定高度，就会被限制

3.overflow

简单，下拉的一些场景避免使用

4.父类增加一个伪类：after（推荐）

写法稍微复杂，但是没有副作用

5.5 display和float对比

display

方向不可以控制
float

浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题

6、定位

6.1 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        相对定位：相对于自己原来的位置进行偏移
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
        }
        #first{
            background-color: #8EC5FC;
            border: 1px dashed #666;
            position: relative; /*相对定位 上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #E0C3FC;
            border: 1px dashed #666;
        }
        #third{
            background-color: #FFDEE9;
            border: 1px dashed #666;
            position: relative; /*相对定位 上下左右*/
            bottom: 20px;
            right: -20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位：position: relative;

相对于原来的位置进行指定的偏移，相对定位的话，它仍然在标准文档当中，原来的位置会被保留

6.2 方块定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
            margin: 0 ;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #E0C3FC;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #FFDEE9;
        }
        .a2{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a3{
            position: relative;
            left: 100px;
            top: -100px;
        }
        .a4{
            position: relative;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 200px;
            bottom: 200px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6QJ3aBUq-1597664910937)(C:\Users\NongGuangKan\AppData\Roaming\Typora\typora-user-images\image-20200816102244825.png)]

6.2 绝对定位

绝对定位（position: absolute）：基于xxx定位，上下左右

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级存在元素定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内移动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #8EC5FC;
            border: 1px dashed #666;
        }
        #second{
            background-color: #E0C3FC;
            border: 1px dashed #666;
            position: absolute;
            left: 100px;
            bottom: 50px;
        }
        #third{
            background-color: #FFDEE9;
            border: 1px dashed #666;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3 固定定位

position: absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 z-index

z-index: 999: 层级

opacity: 0.4 透明度

position: absolute 绝对定位

<!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="image/渐变.png" alt=""></li>
        <li class="tipText">学习Linux</li>
        <li class="tipBg"></li>
        <li>时间：2020-08-16</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: #000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 370px;
    height: 25px;
    top: 0px;
}
.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: #000;
    opacity: 0.4;
    filter: alpha(opacity=50);
}

div1

div2

~~~

6.4 z-index

z-index: 999: 层级

opacity: 0.4 透明度

position: absolute 绝对定位

<!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="image/渐变.png" alt=""></li>
        <li class="tipText">学习Linux</li>
        <li class="tipBg"></li>
        <li>时间：2020-08-16</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: #000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 370px;
    height: 25px;
    top: 0px;
}
.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: #000;
    opacity: 0.4;
    filter: alpha(opacity=50);
}

gk_boke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 Study

CSS3 Study1、CSS入门1.0什么是CSShtml css js结构+表现+交互CSS Cascading Style Sheet 层叠级联样式表CSS：表现（美化页面）1.1发展史：CSS1.0CSS2.0 DIV块+CSS，HTML与CSS结构分离的思想，网页变得简单CSS2.1浮动，定位CSS3 圆角，阴影，动画…浏览器兼容性1.2 快速入门[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujALTNQY-15976649109
复制链接

扫一扫