Day21 2021.4.7 CSS

最新推荐文章于 2021-09-07 18:10:48 发布

hc1235

最新推荐文章于 2021-09-07 18:10:48 发布

阅读量86

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/hc1235/article/details/115490039

版权

java 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

Day21 2021.4.7

CSS入门

1.什么是CSS

Cascading Style Sheet 层叠样式表

CSS:表现(美化网页)

2.快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范  可以写CSS代码
    语法:
        选择器{
            声明1: ;
        }
    -->
<!--    <style>-->
<!--        h1{-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->
    <link rel="stylesheet" href="../style1.css">
</head>
<body>


<h1>我是标题</h1>



</body>
</html>

h1{
    color: red;
}

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: red;
        }
    </style>
    <link rel="stylesheet" href="../demo11.css">
</head>
<body>
<!--优先级: 行内样式>内部样式>外部样式 (就近原则)-->
<!--行内样式: 在标签元素中,编写一个style属性-->
<h1 style="color: red">标签</h1>

</body>
</html>

/*外部样式*/
h1{
    color: red;
}

拓展:外部样式两种写法

链接式 link

导入式: @import

4.选择器

4.1三种基本选择器

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

4.1.1标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器,会选择到页面上所有的这个标签的元素*/
        h1{
            color:#ff2b1a;
            background: #ffca18;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>学JAVA</h1>
<p>hello</p>

</body>
</html>

4.1.2类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 类选择器的格式  .class的名称{}*/
        .c1{
            color: red;
        }
        .c2{
            color: aquamarine;
        }
        .c3{
            color: azure;
        }
    </style>
</head>
<body>

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

<p class="c1">nihao</p>

</body>
</html>

4.1.3 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器  #id名称{}   id必须保证全局唯一
        不遵循就近原则,固定的
        id选择器>class选择器>标签选择器
        */
        #c1{
            color: red;
        }
    </style>
</head>
<body>

<h1 id="c1">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>


</body>
</html>

4.2.层次选择器

4.2.1 后代选择器：在某个元素的后面

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

4.2.2 子选择器：一代

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

4.2.3 相邻兄弟选择器

/*相邻兄弟选择器:只有一个,相邻(向下)*/
.avtive + p {
    background: blue;
}

4.2.4 通用选择器

/*通用兄弟选择器*/
.avtive~p{
    background: red;
}

4.3.结构伪类选择器

伪类:hover(鼠标移动到才显示)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: red;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: aqua;
        }
        /*选中p1 : 定位到父元素,选择当前的第一个元素
        选中当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效
        */
        p:nth-child(1){
            background: antiquewhite;
        }
        /*选中父元素,下的p元素的第二个*/
        p:nth-of-type(2){
            background: #ffca18;
        }
        /*伪类*/
        a:hover{
            background: red;
        }
    </style>
</head>
<body>
    <a href="">321123</a>
    <!--<h1>h1</h1>-->
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>
    </ul>

</body>
</html>

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: red;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }
        /*存在id属性的元素
        a[]{}
        =  绝对等于
        *= 包含这个元素
        ^= 以这个元素开头
        ￥= 以这个元素结尾
        */
        /*a[id]{*/
        /*    background: black;*/
        /*}*/
        /*id=first的元素*/
        a[id=first]{
            background: green;
        }
        /*class中含有links的元素*/
        /* = 是绝对等于  *= 是包含*/
        a[class*=links]{
            background: black;
        }
        /*选择href中以http开头的属性*/
        a[href^=http]{
            background: red;
        }
    </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="text">2</a>
    <a href="../123.html" class="links item">3</a>
    <a href="../123.png" class="links item">4</a>
    <a href="../123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
    </p>


</body>
</html>

5.美化网页元素

1.有效传递页面信息

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

3.凸显页面的主题

4.提高用户的体验

5.1 span标签：重点要突出的字,使用span套起来

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

    <style>
        #title{
            font-size: 50px;
        }
    </style>
</head>
<body>

欢迎学习<span id="title">java</span>

</body>
</html>

5.2字体样式

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

    <style>
        /*font-family  字体
        font-size 字体大小
        font-weight 字体的粗细
        color 字体颜色
        oblique 斜体
        */
        /*body{*/
        /*    font-family: 微软雅黑;*/
        /*    color: aqua;*/
        /*}*/
        /*h1{*/
        /*    font-size: 50px;*/
        /*}*/
        /*.p1{*/
        /*    font-weight: bold;*/
        /*}*/
        p{
            font: oblique bolder 16px "楷体";
        }
    </style>
</head>
<body>

<h1>主题介绍</h1>
<p class="p1">
《魁拔》是由王川执导，由北京青青树动漫科技有限公司于2011年开始推出的国产奇幻动画系列大电影。
</p>

<p>
作品围绕主人公蛮吉等人，讲述了在架空的世界——元泱界中，天地两界共同合力对抗每隔333年诞生的可怕异常生命——魁拔的故事。[1]
</p>
</body>
</html>

5.3文本样式

1.颜色 color

2.文本对齐的方式 text-align

3.首行缩进 text-indent

4.行高 height line-height

5.装饰 text-decoration

6.文本图片水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--颜色
        单词表示
        RGB表示(#....)0~F
        RGBA  A:0~1
    -->
    <!--
    1.text-align: center  文本居中
    2.text-indent: 2em    段落首行缩进2个字母
    3.height line-height 行高和块的高度一致,就可以上下居中
    4.text-decoration: underline 下划线
    5.text-decoration: line-through 中划线
    6.text-decoration: overline; 上划线
    7.参照物1,参照物2{vertical-align:middle} 相对水平对齐
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 300px;
            line-height: 300px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }
    </style>
</head>
<body>
<h1>主题介绍</h1>
<p class="l1">123546</p>
<p class="l2">123546</p>
<p class="l3">123546</p>
<p class="p1">
    《魁拔》是由王川执导，由北京青青树动漫科技有限公司于2011年开始推出的国产奇幻动画系列大电影。
</p>

<p class="p3">
    作品围绕主人公蛮吉等人，讲述了在架空的世界——元泱界中，天地两界共同合力对抗每隔333年诞生的可怕异常生命——魁拔的故事。[1]
</p>
</body>
</html>

5.4 文本阴影和超链接伪类

5.4.1超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none ;
            color: black;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: orange;
        }
        /*鼠标按住未释放*/
        a:active{
            color: green;
            font-size: 50px;
        }
        /*以访问的链接*/
        a:visited{
            color: aqua;
        }
    </style>
</head>
<body>

    <a href="#">
        <img src="images/a.jpg" alt="">
    </a>

    <p>
        <a href="#">码出高效</a>
    </p>
    <p>
        <a href="">作者:孤尽老师</a>
    </p>
    <p>
        $99
    </p>
</body>
</html>

5.4.2 文本阴影

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

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

5.5 列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css1.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

#nav{
    width: 300px;
    background: #a0a0a0;
}
.title{
    font: bold 18px "微软雅黑";/*字体*/
    text-indent: 1em;/*缩进*/
    line-height: 35px;/*行高*/
    background: red;
}
/*ul li*/
/*
list-style:
none   没有前面的点
circle 空心圆
decimal 有序数字
square  正方形
*/
ul{
    background: burlywood;
}
ul li{
    height: 30px;
    list-style: none;/*没有前面的点*/
    text-indent: 1em;/*缩进*/
}
a{
    text-decoration: black;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

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

5.6 背景图像应用及渐变

背景颜色 (background:)

/*颜色 图片 图片位置 平铺方式*/
/*图片定位 background-position: */

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("../../../Day011_Day020/Day020/Demo01/KK.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>

6.盒子模型及边框运用

6.1 盒子

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

margin：外边距

border：边框

padding：内边距

6.2 边框(border)

1.边框的粗细 border-width

2.边框的样式 border-style

3.边框的颜色 border-color

6.3外边距(margin)

外边距的妙用,可以居中元素

margin:0 auto;

6.4 圆角边框(border-radius)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*border-radius 圆角边框
        顺时针方向设置角度
        圆圈: 大小等于width和height
        */
        div{
            width: 100px;
            height: 50px;
            margin: 30px;
            background: red;
            border-radius: 50px 50px 0px 0px;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

6.5 阴影(box-shadow)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 1px yellow;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

7.浮动(float)

标准文档流

行内元素可以被包含在块级元素内

7.1display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*display
        block 块元素
        inline 行内元素
        inline-block 是块元素,但是可以内联,在一行
        none 消失
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

7.2 浮动(float)

float: right;/*右侧浮动*/
float: left;/*左侧浮动*/

7.3 父级边框塌陷的问题

clear

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

解决方案：

增加父级元素的高度

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

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

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

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

overflow

overflow: hidden;/*多出的内容隐藏*/
overflow: scroll;/*多出的内容滚动*/

父类

添加一个伪类: after

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

8.定位

8.1相对定位 relative

相对于自己原来的位置进行偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        /*相对定位 position: relative
        相对于自己原来的位置进行偏移
        */
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0px;
        }
        #first{
            background: #08ff00;
            border: 1px dashed #08ff00;
            position: relative;/*相对定位*/
            top: -20px;
        }
        #second{
            background: #0066ff;
            border: 1px dashed #0066ff;
        }
        #third{
            background: #ffc800;
            border: 1px dashed #ffc800;
        }
    </style>
</head>
<body>

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

</body>
</html>

8.1.1方块定位

<!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;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #3361ff;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: black;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </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-iUSB83p4-1617785881876)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210407161014526.png)]

8.2绝对定位 absolute

基于xxx定位

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0px;
            position: relative;
        }
        #first{
            background: #08ff00;
            border: 1px dashed #08ff00;
        }
        #second{
            background: #0066ff;
            border: 1px dashed #0066ff;
            position: absolute;
            right: 30px;
            top: -10px;
        }
        #third{
            background: #ffc800;
            border: 1px dashed #ffc800;
        }
    </style>
</head>
<body>

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

</body>
</html>

8.3 固定定位 fixed

position: fixed;

8.4 z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="../../../Day011_Day020/Day020/Demo01/KK.jpg" alt=""></li>
        <li class="tipText">学习微服务</li>
        <li class="tipBg"></li>
        <li>时间: 2099-01-01</li>
        <li>地点: 月球一号基地</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 700px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 500px;
    color: white;
}
.tipText{
    z-index: 999;
}
.tipBg{
    background: black;
    opacity: 0.5;/*透明度*/
}
"third">第三个盒子</div>
</div>

</body>
</html>

8.3 固定定位 fixed

position: fixed;

8.4 z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="../../../Day011_Day020/Day020/Demo01/KK.jpg" alt=""></li>
        <li class="tipText">学习微服务</li>
        <li class="tipBg"></li>
        <li>时间: 2099-01-01</li>
        <li>地点: 月球一号基地</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 700px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 500px;
    color: white;
}
.tipText{
    z-index: 999;
}
.tipBg{
    background: black;
    opacity: 0.5;/*透明度*/
}

hc1235

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day21 2021.4.7 CSS

Day21 2021.4.7CSS入门1.什么是CSSCascading Style Sheet 层叠样式表CSS:表现(美化网页)2.快速入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--规范可以写CSS代码语法: 选择器{
复制链接

扫一扫