• CSS简介

    目录

    CSS简介

    选择器 

    常见选择器

    选择器的优先级

    文本样式

    背景样式

    元素类型

    盒子模型

    相关属性

    盒子类型

    布局

    其它：

    弹性盒子  

    响应式布局

    加个小阴影

    圆角 

    CSS简介

            中文名:层叠样式表

             作用:美化HTML标签

    书写位置：

    1.在标签的style属性中书写 这样的方式,编写的样式无法给别的标签使用,如果网页中有多个该样式的标签,此时代 码就会较为冗余(内联样式)

    2.在style标签中书写

    3.在css文件中书写,通过link标签引入到需要使用的html文件中，一般这种方式最标准

    选择器 

    作用：:寻找指定的html标签

    常见选择器

    1.统配选择器

                            作用:给当前网页中所有标签都使用

                    语法: *{

                                     css样式

                               }

    例如：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title></title>
    6. 		<style type="text/css">
    7. 			*{
    8. 				font-size: 50px;
    9. 			}
    10. 		</style>
    11. 	</head>
    12. 	<body>
    13. 		<font>
    14. 			JAVA
    15. 		</font>
    16. 	</body>
    17. </html>

    2.标签选择器

                    作用:给当前网页指定标签设置样式

                    语法:

                            标签名{

                                    css样式 }

    例：给font标签指定属性

    1. font{
    2.     font-size: 50px;
    3. 	color: #0079F5;
    4. }
    1. <font>
    2. 	JAVA
    3. </font>

    3.class选择器

                    作用:给当前网页class属性值为xxx的设置样式

                    语法: .class的属性值{

                                                    css样式 }

    例：

    1. .text{
    2.     font-size: 80px;
    3.     color: red;
    4. }

    1. <font class="text">font01</font>
    2. /**
    3. text为自己命名的
    4. */

    4.id选择器 作用:给当前网页中id属性值为xxx的设置样式.

                    语法: #id的属性值{

                                    css样式 }

    例：

    1. #f{
    2.     font-size: 80px;
    3. }
    <font id="f">Java</font>

    5.伪类选择器

            鼠标悬浮:hover

                    语法: hover{

                                    鼠标悬浮在该标签上,该标签的样式}

    例：

    1. #f{
    2.     font-size: 80px;
    3. }
    4. #f:hover{
    5.     color: red;
    6. }
    <font id="f">Java</font>

    效果为鼠标放在上面，字体就会变红，不放就是正常颜色

    获取焦点:focus

            语法:     选择器:focus{

                                    css样式}

                    border:：点击后框框大小

                    color：颜色

    1. input:focus{
    2.     border: 10px ;
    3.     color: #0079F5;
    4. }
    <input type="text" />

    选择器的优先级

    优先级:内联>id选择器>class选择器>标签选择器>统配选择器

    如果多个优先级相同的给同一个标签设置样式,谁在后使用谁的

    文本样式

    大小:font-size

    字体:font-family ：例 宋体，楷体...

    颜色:color       

                      rgb(红色,绿色,蓝色);

                      rgba(红色,绿色,蓝色,透明度)

                            透明度取值范围:0~1,0表示全透明,1表示不透明

    1. /*color: #FF9900;*/
    2. /*color: rgb(255,0,0);*/

    格式:font-style

    normal默认值。浏览器显示一个标准的字体样式。
    italic浏览器会显示一个斜体的字体样式。
    oblique浏览器会显示一个倾斜的字体样式。

    笔画粗细:font-weight

    装饰:text-decoration

    none默认。定义标准的文本。
    underline定义文本下的一条线。
    overline定义文本上的一条线。
    line-through定义穿过文本下的一条线。

    文本位于标签的位置:text-align

    一行字所占高度:line-height

    背景样式

    background-color:背景颜色

    background-image: 背景图片

    background-size:背景大小

    background-repeat:是否平铺

    background-position:背景位置

    background:背景

    1. /*background-color: #FF0000;*/
    2. background-image: url("img/qianfeng.png");
    3. background-size:10% 10%;
    4. background-repeat:no-repeat;
    5. background-position:center center;

    元素类型

    1.行内元素:

                    特点:设置宽高无效,标签大小由标签中内容决定,不会独占一行

                     如:font标签

    2.行内块元素:

                    特点:设置宽高有效,不独占一行

                    如:img,input

    3.块级元素

                    特点:设置宽高有效,独占一行

                    如:h1,h2,p,div,li

    修改改标签的元素类型

                    通过display属性进行修改

                                     inline-block:行内块元素

                                     inline:行内元素

                                      block:块元素

                                      none:隐藏

                                      flex:弹性盒子

    盒子模型

    相关属性

    宽/高 width/height

    内边距:标签内,内容距离边框的距离 padding

    边框:边框厚度 border

    border:10px solid #0000CC

    顶部没了为html自带bug 

    边框的大小，solid为实现的意思

    外边距:当前标签距离父容器或兄弟标签的距离 margin

    可以设置距离其它距离的位置

    盒子类型

    标准盒子:

                    计算标签占用大小:左外边距+左边框+左内边距+宽+右内边距+右边框+右外边距 = 真实 的宽 默认的就是该类型的盒子

            上述的就为标准盒子

    IE盒子:

                     计算方式:左外边距 + 宽 + 右外边距 = 真实的宽

                    设置盒子类型为IE盒子:box-sizing: border-box;

    与标准盒子相比

    1. 			#box01{
    2.     			background: red;
    3.     			width: 200px;
    4.    				height: 200px;/*
    5.    				               * 本来盒子的大小
    6.    				               */
    7.     			padding: 30px;
    8.     			/*加了内边距，盒子变大   */
    9.     			
    10.     			border: 20px solid black;
    11.     			/* 加了边框 */
    12.     			
    13.     			margin: 50px;
    14. 			}
    15. 		#box02{
    16.     			background: red;
    17.   			    width: 200px;
    18.     			height: 200px;
    19.     			/* 盒子大小不变*/
    20.     			
    21.   				 padding: 30px;/*内容变小了，边框，内边距被减去了 */
    22.   				 
    23.     			border: 20px solid black;
    24.     			margin: 50px;
    25.     			box-sizing: border-box;/* 设置为ie盒子*/
    26. 			}

    布局

    浮动：

                    float：left从左向右

                               right 从右向左

                                    给所有需要子标签加

    1. #box{
    2. 				width: 300px;
    3. 				height: 200px;
    4. 				background: orange;
    5. 			}
    6. 			.box_item{
    7. 				width: 100px;
    8. 				height: 100px;
    9. 				border: 1px solid black;/* 整一个属性*/
    10. 				/*float: left;*/ /* 悬浮自带补齐，但是因为边框也有大小会折到下一行 */
    11. 			}
    1. <div id="box">
    2. 			<div class="box_item"></div>
    3. 			<div class="box_item"></div>
    4. 			<div class="box_item"></div>
    5. 			<div class="box_item"></div>
    6. 			<div class="box_item"></div>
    7. 			<div class="box_item"></div>
    8. 			
    9. 		</div>

    效果如图 

     独占一行所以从上到下排列

    float: left;/* 悬浮自带补齐，但是因为边框也有大小会折到下一行 */

     这时候把class属性的width: 100px; height: 100px;都变为98px即可解决

    空间塌陷：不使用浮动时，使box属性为0，填入内容，内容会填满空间。

    1. #box{
    2. 				width: 300px;
    3. 				/*height: 200px;*/
    4. 				background: orange;
    5. 			}

     

     使用浮动后：

           高度不定义也是希望用内容撑起来，让其更加灵活，给定后也可能导致边框与后面的叠加

            但是高度没了，父容器没了，导致空间塌陷，具体原因我也不知道，毕竟我不是专业前端

    解决方案：

    1. .clearAfter:after{
    2.             content: ".";
    3.             overflow: hidden;
    4.             clear: both;
    5.             height: 0;
    6.             display: block;
    7. }
    8. 在其浮动的标签的父容器的class属性值中加入clearAfter即可

    反正是解决了

    定位：属性:position

    1.浏览器窗口定位:fixed

    相对与浏览器窗口的位置,不会保留标签的原位置

    1. #gg{
    2. width: 240px;
    3. height: 160px;
    4. background: red;
    5. position: fixed;
    6. right: 0;//距离右边的距离
    7. bottom: 0;//距离底部的距离
    8.       //  left  左边
    9. 	  //	top   顶部
    10. }
    11.  
    12. <div id="gg">
    13. <font>这是一个广告</font>
    14. </div>

    2.相对定位:relative 相对于标签的原位置,  注意：会保留标签的原位置

    1. 	#box02{
    2. 				background: greenyellow;
    3. 				position: relative;
    4. 				left: 50px;//一般用这两个，
    5. 				top: -50px;
    6.  
    7.  
    8.                    //bottom  reight这两个可能有的浏览器不适配
    9. 			}

    给其加入层级     z-index: -1;//层级可以让其去任意一层，有个定位才能用

    3.绝对定位:absolute，相对与最近一层做过定位的父容器的位置，不会保留原位置

                    父容器定位随便做，每填值都行

    注意：里面的坐标类似于这样

    其它：

           弹性盒子     应用在手机端比较多

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title></title>
    6. 		<style type="text/css">
    7. 			#box{
    8. 				width: 300px;
    9. 				height: 200px;
    10. 				background: brown;
    11. 				display: flex;/*弹性布局,会默认平分*/
    12. 			}
    13. 			.div{
    14. 				width: 100px;
    15. 				height: 100px;
    16. 				border: 1px solid black;
    17. 				box-sizing: border-box;	
    18. 			}
    19. 		</style>
    20. 	</head>
    21. 	<body>
    22. 		<div id="box">
    23. 				
    24. 		<div id="box01" class="div">1</div>
    25. 		<div id="box02" class="div">2</div>
    26. 		<div id="box03" class="div">3</div>
    27. 		<div id="box04" class="div">4</div>
    28. 		<div id="box05" class="div">5</div>
    29. 		<div id="box06" class="div">6</div>
    30. 		<div id="box07" class="div">7</div>
    31. 		
    32. 		</div>
    33. 	</body>
    34. </html>

    1.                 display: flex;/*弹性布局,会默认平分*/
    2. 				flex-wrap: wrap;/*会自动换行，按给的宽度自动排列，此时不设置父容器高度也不会空间塌陷*/

    不设置高度

     

     居中：

    1. 	<style type="text/css">
    2. 			#box{
    3. 				width: 300px;
    4. 				height: 200px;
    5. 				background: orchid;
    6. 				display: flex;/*设置为弹性盒子*/
    7. 			}
    8. 			#div{/*此标签就在父标签中居中，只有一个时有效*/
    9. 				width: 100px;
    10. 				height: 100px;
    11. 				background: palevioletred;
    12. 				margin:auto;/*自动居中*/
    13. 			}
    14. 		</style>

    响应式布局

    检测窗口的大小，不同大小有不同的页面，这样可以适配多种屏幕大小

    1. <style type="text/css">
    2. 			*{
    3. 				margin: 0;
    4. 				padding: 0;
    5. 			}
    6. 			html,body{
    7. 				width: 100%;
    8. 				height: 100%;
    9. 			}
    10. 			#content{
    11. 				width: 100%;
    12. 				width: 100%;
    13. 			}
    14. 			@media only screen and (min-width: 100px) and (max-width: 640px) {
    15. 				#content{
    16. 					background: black;/*例如在这个区间背景为黑*/
    17. 				}/*显示器屏幕100px到640px用这个 */
    18.             }
    19. 				
    20. 			@media only screen and (min-width: 640px) and (max-width: 1400px) {
    21. 				#content{
    22. 					background: red;/*例如在这个区间背景为红*/
    23. 				}/*显示器屏幕640px到1400px用这个 */
    24. 					
    25. 			}
    26.  
    27.                 ....不同尺寸写一套不同的css这样就可以适应不同的屏幕大小
    28. 			
    29. 			
    30. 			
    31. 		</style>

    加个小阴影

    box-shadow

            box-shadow(X轴偏移量 Y轴偏移量  blur阴影模糊半径 spread阴影扩展半径 阴影颜色 position投影方式 )

             x :值为正数时，阴影在右侧；值为负数,阴影在元素左

            y:值为正数时，阴影下方；值为负数，阴影在上方

            blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0

            spread:阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。前提是存在阴影模糊半径。

            position:默认为外投影，可设置为  inset  变为内投影

    圆角 

    border-radius 10%就是这个效果

     


                    transform:rotate(45deg) ;/*例如顺时针旋转45°*/
                    transform:translateX(x轴平移)translateY(y轴平移) scale(0~1缩小,大于1变大);

    设置背景变化

    1. @keyframes anim{
    2. 				0%{
    3. 					background-image: url(img/IMG_20221024_222535.jpg) ;
    4. 					background-size: 100% 700px;
    5. 				}
    6. 				50%{
    7. 					background-image: url(img/QQ图片20220325160444.jpg);
    8. 					background-size: 100% 700px;
    9. 				}
    10. 				100%{
    11. 					background-image: url(img/IMG_20221024_222535.jpg);
    12. 					background-size: 100% 700px;
    13. 				}
    14. 				
    15. 			}
    16. 			body{
    17. 				animation: anim 2s linear infinite;
    18. 			}
    19. //anim 2s表示循环2s，linear infiite表示不停线性循环背景

  • 相关阅读:
    牛客网刷题(四)
    如何理解数字工厂管理系统的本质
    SpringBoot 15 SpringSecurity
    Linux 最近学习总结
    android 动画
    MySQL增删改查（基础）
    统计专业人员职称评价基本标准
    spring_aop_学习笔记
    PLC和工控机的网络特性
    哈希表HashTable
  • 原文地址：https://blog.csdn.net/weixin_44207220/article/details/127754798