6.狂神说java_css笔记

最新推荐文章于 2024-06-29 23:22:36 发布

吾的手中抓住了未来

最新推荐文章于 2024-06-29 23:22:36 发布

阅读量443

点赞数

分类专栏：后端文章标签： css java css3

本文链接：https://blog.csdn.net/weixin_43070148/article/details/127294623

版权

后端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

狂神说java_css笔记

Cascading Style Sheet 层叠级联样式表

HTML + CSS + JavaScript
结构 + 表现 + 交互

如何学习

CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
网页动画（特效）

2.1 什么是CSS

CSS：表现（美化网页）

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

F12 / 检查元素：开发者工具

2.2.1 发展史

CSS1.0

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

CSS2.1：浮动，定位

CSS3.0：圆角，阴影，动画… 浏览器兼容性~

2.2.2 快速入门

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

    <!--规范，style可以编写css的代码，每一个声明最好使用分号结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>

<body>

<h1>我是标题</h1>

</body>
</html>

建议使用外部链接，分开管理

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

    <!--规范，style可以编写css的代码，每一个声明最好使用分号结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

<h1>我是标题</h1>

</body>
</html>

h1{
    color: red;
}

css的优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录！

2.2.3 CSS的3种导入方式

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

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

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

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

</body>
</html>

拓展：外部样式两种写法

链接式：是html

<!--外部样式-->
<link rel="stylesheet" href="css/style.css">

导入式：是CSS2.1特有的

<!--导入式-->
<style>
    @import url("css/style.css");
</style>

首页link和import语法结构不同，前者是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要

2.2 选择器

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

2.2.1 基本选择器

标签选择器：选择一类标签标签{}

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

<h1>学Java</h1>
<h1>学Java</h1>
<p>狂神说</p>

</body>
</html>

2.类选择器 class：选中所有的class属性一致的标签，可以跨标签 .类名{}

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

    <style>
        /*
        类选择器的格式 .class的名称{}
        好处：可以多个标签归类，是同一个class，可以复用，可以跨标签使用
        */
        .qinjiang{
            color: red;
        }
        .kuangshen{
            color: green;
        }
    </style>
</head>

<body>
<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1>标题3</h1>

<p class="qinjiang">p标签</p>

</body>
</html>

3.id选择器：全局唯一 #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        id选择器：id必须保证全局唯一！
        #id名称{}
        不遵循就近原则，固定的
         */
        #qinjiang{
            color: red;
        }
        .style1{
            color: green;
        }
        h1{
            color: yellow;
        }
    </style>
</head>
<body>

<h1 id="qinjiang" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

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

2.2.2 层次选择器

后代选择器：在某个元素后面的所有(子孙)

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

2.子选择器：一代

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

3.相邻兄弟选择器：同辈

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

4.通用选择器

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

2.2.3 结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{
    background: red;
}

/*ul的最后一个子元素*/
ul li:last-child{
    background: green;
}

/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，再选中第二个子类p元素，若不为p元素则不生效*/
p:nth-child(2){
    background: yellow;
}

/*选择当前p元素的父级元素，再选中第二个类型为p的子类元素*/
p:nth-of-type(2){
    background: blue;
}

/*鼠标悬停显示*/
a:hover{
	background: aqua;
}

2.2.4 属性选择器（常用）

id + class结合

<!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: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*选中存在id属性的元素 a[]{} 属性名=属性值（正则）id唯一不需要引号*/
        a[id=first]{
            background: red;
        }

        /*class中有links的元素，=为绝对等于，*=为包含这个元素*/
        a[class*="links item"]{
            background: blue;
        }

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

        /*选中href中以pdf结尾的元素*/
        a[href$=pdf]{
            background: yellow;
        }
    </style>
</head>

<body>

<p class="demo">
    <a href="http://www.baicu.com" class="links item first" id="first">1</a>
    <a href="http://www.kuangstydy.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item" >3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/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>

2.3 美化网页元素

2.3.1 为什么要美化网页

有效的传递页面信息
美化网页，吸引用户
凸显页面的主题
提高用户的体验

span标签：重点要突出的字，用span标签圈起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #title1{
        font-size: 50px;
    }
</style>

<body>

欢迎学习 <span id="title1">Java</span>

</body>
</html>

2.3.2 字体样式

<style>
    body{
        font-family: 楷体, "Arial Black";
        color: #a13d30;
    }
    h1{
        font-size: 50px;
    }
    .p1{
        font-weight: bold;
    }
</style>

<!--字体风格-->
<style>
	p{
		font: oblique bolder 18px "楷体";
	}
</style>

2.3.3 文本样式

颜色 color、rgb、rgba
文本对齐方式 text-align = center
首行缩进 text-indent：2em
行高 line-height：单行文字上下居中 line-height = height
装饰 text-decoration;
文本图片水平对齐 vertical-align：middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--颜色：
    RGB：0~F
    a：0~1透明度
    text-align：排版，居中
    text-indent：2em; 首行缩进
    height、line-height：行高和块的高度一致，就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0, 255, 255, 1);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blueviolet;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
        /*水平对齐~参照物，a，b*/
        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>

<a href="">a标签去除自带的划线</a>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！ 魁拔的每一次出现，都会给元泱境界带来巨大的灾难！</p>
<p class="l1">即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。</p>
<p class="l2">魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。</p>
<p class="l3">很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
<p class="p3">Wreck-It Ralph </p>
<p>
    <img src="images/huo.jpg" alt="">
    <span>火影</span>
</p>

</body>
</html>

2.3.4 阴影偏移

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

2.3.5 超链接伪类

正常情况下 a: hover

/*鼠标悬浮的状态（只需要记住hover）*/
a:hover{
    color: orange;
    font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
    color: green;
}
a:visited{
    color: red;
}

2.3.6 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/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><a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a><a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a><a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

#nav{
    width: 300px;
    background: #c1c0c0;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*颜色，图片，图片位置，平铺方式*/
    background: red url("../images/index.jpg") 200px 10px no-repeat;
}

/*ul li
list-style: none;去掉圆点 circle;空心圆 decimal;数字 square;正方形*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/index.jpg");
    background-repeat: no-repeat;
    background-position: 200px 2px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

2.3.7 背景

背景颜色

背景图片

div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    /*默认是全部平铺的*/
    background-image: url("images/huo.jpg");
}
.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}

2.3.8 渐变

background-color: #4158D0;
background-image: linear-gradient(220deg, #4158D0 0%, #C850C0 22%, #FFCC70 49%, #ffffff 75%, #ffffff 100%);

4、盒子模型

4.1什么是盒子模型

margin：外边距
padding：内边距
border：边框

4.2、边框

border：粗细样式颜色

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

4.3、外边距----妙用：居中

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

盒子的计算方式：
margin+border+padding+内容的大小

总结：
body总有一个默认的外边距 margin:0
常见操作：初始化

4.4、圆角边框----border-radius

4.5、盒子阴影

box-shadow: 10px 10px 1px black;

5、浮动

5.1标准文档流

块级元素：独占一行 h1~h6 、p、div、列表…
行内元素：不独占一行 span、a、img、strong

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

5.2、display（重要）

block：块元素
inline：行内元素
inline-block：是块元素，但是可以内联，在一行

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

none：消失

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

5.3、float：left/right左右浮动

clear：both

5.4、overflow及父级边框塌陷问题

clear：

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

解决塌陷问题方案：
方案一：增加父级元素的高度；
方案二：增加一个空的div标签，清除浮动

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

方案三：在父级元素中增加一个overflow属性

overflow:hidden/*隐藏超出部分*/
overflow：scoll/*滚动*/

方案四：父类添加一个伪类:after

这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。

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

小结：

浮动元素增加空div----> 简单、代码尽量避免空div
设置父元素的高度-----> 简单，但是元素假设有了固定的高度，可能就会超出范围
overflow----> 简单，下拉的一些场景避免使用
父类添加一个伪类:after（推荐）----> 写法稍微复杂，但是没有副作用，推荐使用

display与float对比

display：方向不可以控制
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

6、定位

6.1、相对定位

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

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

6.2、绝对定位-absolute和固定定位-fixed

定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;/*absolute 绝对定位*/
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background-color: #b3ff38;
            position: fixed;/*fixed 固定定位*/
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>