CSS基础篇

爱被打了一巴掌 2022-05-20 07:22 168阅读 0赞

## CSS基础篇 ##

CSS层叠样式表

CSS：内联样式、内部样式、外部样式。优先级依次减小

#####  CSS背景： #####

background-color ：           背景色  
    background-image ：         背景图  
    background-repeat ：         背景排列方式是否平铺及如何平铺  
    background-attachment ： 背景图与内容的方式，默认scroll背景图随着内容的滑动固定不动，

fixed随着内容的滑动跟着滑动  
    background-position ：      背景定位，九宫格布局

简单例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#p{
    				background-color: #5F9EA0;
    			}
    			.box{
    				background-color: aquamarine;
    				background-image: url(../images/smartphone2.png);
    				background-repeat: no-repeat;
    				background-position: center center;
    				background-attachment: fixed;
    				height: 1200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="p">
    			<p>我的世界</p>
    			<p>我的世界</p>
    			<p>我的世界</p>
    			<p>我的世界</p>
    		</div>
    		<div class="box">
    			<p>我的世界</p>
    			<p>我的世界</p>
    			<p>我的世界</p>
    			<p>我的世界</p>
    		</div>
    	</body>
    </html>

#####  CSS文本： #####

text-align：           文本的水平对齐方式，值left、right、center、justify  
    text-decoration ：文本修饰，值none 、 overline（文本上划线）、line-through（文本中间划线）、underline（文本下划线）  
    text-transform ：  文本的转化，值 uppercase （转为大写） 、lowercase （转为小写）、capitalize（首字母大写）  
    text-indent ：       文本第一行缩进  
    letter-spacing ：   字符之间的空间  
    line-height ：        行与行之间的空间  
    deriction：            文本的方向，值rtl（右到左），ltr（左到右）  
    word-spacing ：   单词之间的空间  
    white-space ：      在元素内禁用文字环绕，不换行  
    vertical-align ：     图片与文本内容的垂直对齐方式，值text-top、text-bottom、text-middle等  
    text-shadow ：     文本阴影，  
    color：                  文本颜色

文本字体 :                 font-family  值字体名  
 字体样式 ：              font-style   值noraml（正常显示）、italic（斜体）、oblique（倾斜的文字）  
 字体大小 ：              font-size   单位px、em、rem   em皮面IE无法调整文本的问题。默认 1 em = 16 px  
 字体粗细 ：            font-weight 值normal（正常）、bold（粗）、bolder（更粗）、lighter（更细）、inherit（继承父元素的粗细）、100-900

简单例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			/*CSS样式的优先级:内联样式>id选择器>类选择器>元素选择器*/
    			body{
    				/*文本居中*/
    				text-align: center;
    				background-color: beige;
    			}
    			/*元素选择器*/
    			p{
    				font-family: "微软雅黑";
    				font-size: 24px;
    				/*字符之间的间距*/
    				letter-spacing: 0.4em;
    				/*行高*/
    				line-height: 30px;
    				/*文本颜色*/
    				color: #ADD8E6;
    			}
    			/*id选择器*/
    			#p{
    				/*文本的修饰*/
    				text-decoration: overline;
    				/*文本的转换小写*/
    				text-transform: lowercase;
    				color: blueviolet;
    				/*字体的粗细*/
    				font-weight: 600;
    			}
    			/*类选择器*/
    			.p{
    				text-decoration: line-through;
    				/*文本的缩进*/
    				text-indent: 2em;
    				color: darkorange;
    				/*字体的风格样式 */
    				font-style: oblique;
    			}
    		</style>
    	</head>
    	<body>
    		<p>CSS基础</p>
    		<p id="p">CSS基础</p>
    		<p class="p">CSS基础</p>
    		
    		<p style="text-decoration: underline;color: #5F9EA0; text-shadow: 1px 1px brown;">CSS基础</p>
    	</body>
    </html>

效果图：

![70][]

#####  CSS链接： #####

a:link       ：   正常，未访问的链接  
    a:visited  ：   用户已经访问过的链接  
    a:active    ：  链接被点击的那一刻  
    a:hover    ：  当鼠标放在链接上时

简单例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>超链接</title>
    	</head>
    	<style type="text/css">
    		/*正常下样式*/
    		a:link{
    			/*左填充*/
    			padding-left: 10px;
    			font-size: 24px;
    			display: block;
    			line-height: 50px;
    			color: darkgreen;
    			text-decoration: none;
    		}
    		/*鼠标放上去时的样式*/
    		a:hover{
    			color: #FF8C00;
    			text-decoration: underline;
    		}
    		/*鼠标点击那一刻的样式*/
    		a:active{
    			font-size: 200%;
    		}
    		/*已经访问了的样式*/
    		a:visited{
    			color: blue;
    		}
    	</style>
    	<body>
    		
    		<a href="#" style="background-color: forestgreen; color: white; width: 70px;">首页</a>
    		<a href="#">商城</a>
    		<a href="#">购物车</a>
    		<a href="#">个人中心</a>
    	</body>
    </html>

效果图：

![70 1][]

#####  CSS布局-水平&垂直对齐 #####

水平居中可以使用 margin： auto;  
    文本居中对齐 ： text-align ： center;

#####  CSS有序无序列表标记： #####

list-style-type ： 标记的类型  
    list-style-position ： 标记的定位  
    list-style-image ： 标记引用图片 url("图片的路径")  
    也可设置list-style时按上依次设置其值

简单例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<style type="text/css">
    		*{
    			margin:0;
    		}
    		/*设置无序列表的样式*/
    		ul{
    			/*字体大小*/
    			font-size: 1.5em;
    			/*行高*/
    			line-height: 40px;
    			/*背景色*/
    			background-color: cadetblue;
    			/*去除无序列表标记*/
    			list-style-type: none;
    			/*自定义标记图像*/
    			list-style-image:url(../images/w.png);
    			/*设置定位方式*/
    			list-style-position: inside;
    		}
    		/*无序列表子项样式*/
    		ul li{
    			/*字体颜色*/
    			color: white;
    		}
    		/*有序列表样式*/
    		ol{
    			font-size: 1.5em;
    			line-height: 36px;
    			/*单词间距*/
    			word-spacing: 18px;
    			color: white;
    			background-color: cadetblue;
    			list-style-position: inside;
    		}
    		/*有序列表子项样式*/
    		ol li{
    			display:inline;
    		}
    	</style>
    	<body>
    		<ol>
    			<li>手机</li>
    			<li>电脑</li>
    			<li>平板</li>
    			<li>电视</li>
    		</ol>
    		<hr/>
    		<ul>
    			<li>潮流帽子</li>
    			<li>时尚眼镜</li>
    			<li>潮牌上衣</li>
    			<li>韩版长裤</li>
    		</ul>
    	</body>
    </html>

效果图：

![70 2][]

#####  CSS边框： #####

border：边框

border-style：边框样式  
         值： dotted  -  点线边框  
                 dashed  -  虚线边框  
                 solid      -  实线边框  
                 double  -  双线边框  
                 groove  -  凹槽边框  
                 ridge     -  垄状边框   
                 outset   -  外凸边框  
                 inset     -  嵌入边框  
                 hiddle  -  隐藏边框  
    border-widht：              边框的宽度  
    border-color：               边框的颜色  
    border-bottom：           边框的下边框  
    border-bottom-width：下边框的宽度  
    border-bottom-color： 下边框的颜色  
    border-bottom-style ： 下边框的样式  
    border-left：                  左边框  
    border-left-width：       下边框的宽度  
    border-left-color：        下边框的颜色  
    border-left-style ：        下边框的样式  
    border-right：                右边框  
    border-rigth-width：     下边框的宽度  
    border-right-color：      下边框的颜色  
    border-right-style ：      下边框的样式  
    border-top：                  上边框  
    border-top-width：       下边框的宽度  
    border-top-color：        下边框的颜色  
    border-top-style ：        下边框的样式

#####     CSS轮廓： #####

outline：轮廓  
    outline-color：轮廓颜色  
    outline-width：轮廓宽  
    outline-style：轮廓样式  
           值： dotted  -  点线轮廓  
                   dashed  -  虚线轮廓  
                   solid   -  实线轮廓  
                   double  -  双线轮廓  
                   groove  -  凹槽轮廓  
                   ridge   -  垄状轮廓   
                   outset  -  外凸轮廓

#####  CSS外边距： #####

margin：                外边距  
    margin-top：        上外边距  
    margin-left：        左外边距  
    margin-right：      右外边距  
    margin-bottom： 下外边距  
    其单位值可px像素，百分比%、pt、em；auto自动适应结果依赖浏览器

简单例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			body{
    				background-color: #ADD8E6;
    			}
    			p{
    				/*宽*/
    				width: 280px;
    				/*高*/
    				height: 80px;
    				background-color: #F5F5DC;
    				/*字体大小*/
    				font-size: 18px;
    				line-height: 80px;
    				/*填充 其 上填充 右填充  下填充   左填充     上填充0，左填充20*/
    				padding: 0 20px;
    				/*边框的圆角*/
    				border-radius: 8px;	
    				/*居中的一种方式*/
    				margin:  auto;
    				/*上边距*/
    				margin-top: 30px;
    			}
    			.p{
    				/*边框的三个参数依次是宽,样式，颜色*/
    				border: 2px dashed #8A2BE2;	
    			}
    			#p{
    				border: 2px dotted  #006400;
    				/*右边距*/
    				margin-right: 50px;
    			}
    			.out{
    				/*轮廓宽*/
    				outline-width: 2px;
    				/*轮廓颜色*/
    				outline-color: #FF8C00;
    				/*轮廓样式*/
    				outline-style: groove;
    				/*左边距*/
    				margin-left: 30px;
    			}
    			.he{
    				/*轮廓*/
    				outline-width: 2px;
    				outline-color:  darkblue;
    				outline-style: inset;
    				/*边框 黄色 */
    				border: 2px solid yellow;
    				/*上边距*/
    				margin-top: 30px;
    			}
    		</style>
    	</head>
    	<body>
    		<p class="p">图灵奖</p>
    		<p id="p">乔布斯</p>
    		<p style="border: 2px double #0000FF;">比尔盖茨</p>
    		<hr color="gray"/>
    		<p class="out">轮廓</p>
    		<p class="he">轮廓与边框</p>
    	</body>
    </html>

效果图：

![70 3][]

#####     CSS填充： #####

padding：                填充  
    padding-top:           上填充  
    padding-left：         左填充  
    padding-right：      右填充  
    padding-bottom：  下填充  
    其单位值可为像素px、百分比%、pt、em；auto自动适应结果依赖浏览器

#####  CSS宽高： #####

width：宽  
    max-width： 最大宽  
    min-width： 最小宽  
    height： 高  
    max-height： 最大高  
    min-height： 最小高  
    其值单位可为像素px、百分比%等

#####  CSS显示与可见性： #####

display：显示  
    visibility：可见性  
     
    隐藏元素两种方式：  
      1、设置 display：none;  
      2、设置 visibility：hidden;

display:

块级元素(block)特性：  
          总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;  
          宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;  
   内联元素(inline)特性：  
          和相邻的内联元素在同一行;  
          宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的

#####  CSS定位： #####

position：定位  
        其值：  static   -- 静态， 即没有定位，该为默认值  
                    relative   -- 相对， 相对其正常位置  
                    fixed       -- 固定， 即使窗口滚动也不动  
                    absolute -- 绝对， 相对于最近的一定为的父元素  
                    sticky      -- 粘性， 基于父元素的高与用户的滚动位置来定位，在目标区域相当于relative，

当超出目标区域滚动时相当于fixed

#####  CSS光标（即鼠标放上去的图标）： #####

style的属性cursor（光标）  
    值：  auto  
            crosshair  
            default  
            help  
            move  
            e-resize  
            n-resize  
            ne-resize  
            nw-resize  
            s-resize  
            se-resize  
            sw-resize  
            w-resize  
            text  
            wait  
            pointer  
            progress

简单例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			body{
    				background-color: cadetblue;
    				
    			}
    			img{
    				/*固定定位*/
    				position: fixed;
    				/*距离左侧的宽度*/
    				left: 64%;
    			}
    			.div{
    				height: 1200px;
    				
    			}
    			p{
    				position: relative;
    				width: 280px;
    				height: 60px;
    				line-height: 60px;
    				font-size: 18px;
    				margin: 15px 30px;
    				color: white;
    				background-color: darkseagreen;
    				border-radius: 8px;
    				text-indent: 1.2em;
    				cursor: progress;
    			}
    			.p{
    				/*相对定位*/
    				position: relative;
    				left: 150px;
    			}
    			p:after{
    				position: absolute;
    				top: 50%;
    				left: -20px;
    				display: block;
    				z-index: 1;
    				border-color: transparent darkseagreen;
    				border-width: 25px 25px 15px 0;
    				border-style: solid;
    				margin-top: -15px;
    				content: "";
    			}
    			.p:after{
    				/*绝对定位*/
    				position: absolute;
    				top: 50%;
    				left: 280px;
    				display: block;
    				z-index: 1;
    				border-color: transparent darkseagreen;
    				border-width: 25px 0 15px 25px;
    				border-style: solid;
    				margin-top: -15px;
    				content: "";
    			}
    			.content{
    				width: 488px;
    				height: 400px;
    				border: 2px solid white;
    				margin: auto;
    				margin-top: 50px;
    			}
    			.st{
    				  position: -webkit-sticky;
    				  /*粘性定位*/
    				  position: sticky;
    				  top: 52px; 
    				  width:320px ;
    				  height: 60px;
    				  line-height: 60px;
    				  font-size: 18px;
    				  color: white;
    				  /*文本对齐方式*/
    				  text-align: center;
    				  /*边框圆角*/
    				  border-radius: 8px;
    				  background-color: darkseagreen;
    				  /*边框*/
    				  border: 2px solid darkseagreen;
    				  margin: auto;
    				  /*上边距*/
    				  margin-top: 20px;
    				  /*鼠标光标*/
    				  cursor: pointer;				  
    			}
    		</style>
    	</head>
    	<body>
    		<img src="../images/smartphone2.png"/>
    		<div class="div">
    			<div class="content">
    				<p>我想成为大佬，我想去爱尔兰</p>
    				<p class="p">还是脚踏实地，一步一个脚印</p>
    				<p>一口吃不成胖子，从基础开始</p>
    				<p class="p">既然选择了，那就往前奔跑吧</p>
    				<p>世上无难事只怕有心人</p>
    			</div>
    			<div class="st">只要功夫深铁杵磨成针</div>
    		</div>
    	</body>
    </html>

效果图：

![70 4][]

#####  CSS溢出： #####

overflow： auto（自动根据内容是否采用滚动条）、scroll（采用滚动条，修剪内容）、

hiddle（隐藏，不显示滚动条，修剪内容）、visible（默认值，不修剪内容）、

inherit（继承父元素的overflow值）

overflow-x：指定如何处理右边/左边边缘的内容溢出元素的内容区域  
   
    overflow-y：指定如何处理顶部边/底部边缘的内容溢出元素的内容区域

简单例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			p{
    				width: 400px;
    				height: 250px;
    				overflow: scroll;
    				font-family: "微软雅黑";
    				font-size: 18px;
    				color: white;
    				margin: auto;
    			}
    		</style>
    	</head>
    	<body style="background-color: #8FBC8F;">
    		<p>
    			孩子，生活就是这样。成长就是逼着一个人成长，我多么希望你可以改变。这不是真实的你。
    			你应该去学会同情，去学会关心。毕竟她是你从小就在一起长大的好朋友啊。你该帮你的朋
    			友修改设计，甚至一起辞职。你小学去安慰别人，大学毕业你们一起居住在同一个屋檐下，
    			寒冷冬天吃着同一碗泡面，也不和家里说一说。可你现在怎么就成了这样？孩子，
    			生活就是这样。你该放放手了。生活在催其他人成长，而你却在促使他人成长过程中迷失了
    			自我，没有成长反而走上了一条歧路。孩子，我没有办法纠正你，但我尽我的努力让你自己
    			原路返回。
    		</p>
    	</body>
    </html>

效果图：

![70 5][]

#####  CSS剪裁元素： #####

clip：rect(上，右，下，左);

#####     CSS叠堆顺序： #####

z-index ：auot、numder、inherut（继承父元素的z-index）； 值高的堆叠顺序值低的在前面

#####  CSS浮动： #####

浮动会是元素向左或向右移动，周围的元素也会重新排列  
    float：浮动   值： right（右浮动） left（左浮动）  
    清除浮动： clear   值： right、left、both、none、inherit

#####     CSS组合选择器: #####

后代选择器：div p\{\}  
    子类选择器：div>p\{\}  
    相邻选择器: div+p\{\}  
    后续选择器: div~p\{\}

#####  CSS伪类： #####

伪类的语法： select ： pseudo-class\{\}或select.class ： pseudo-class\{\}  
    如--  a:hover  就是伪类  在CSS中a：hover必须置于a：link与a:visited的之后才有效

伪类  
          checked       选中所有选中的元素  
          disabled      选择所有禁用的元素  
          enabled       选择所有启用的元素              例input：enabled\{\}  
          empty         选择没有子元素的元素  
          first-of-type 选择每个该元素的第一个该子元素  
          in-range      选择元素指定范围的值  
          not(selecet)  选择出该元素外的元素  
          nth-child(n)  选择该元素的第n个子元素  
          only-child    选择仅有一个该子元素的元素  
          read-only     选择有只读属性的元素属性   <p readonly></p>  
          read-write    选择没有只读属性的元素属性  
           optional      选择没有require属性的元素属性  
          require       选择有require的属性的元素属性  
          root          选择文档的根元素  
          target        选择当前活动\#new元素（点击URL包含锚） ：target\{\}     <a href="\#new"></a>     <p id="new"></p>  
          invalid       选择所有的无效元素  
    
   伪元素  
          first-child   选择第一个子元素  
          last-child    选择最后一个字元素  
          first-letter  选择元素的第一个字母  
          first-line    选择该元素的第一行  
          before       在该元素前插入内容  
          long(language)为该元素的lang属性选择一个开始值 p：long(it)\{\}   <p long="it"></>  
          valid         选择所有有效值的属性

after       在该元素后插入内容  
          focus       选择元素输入后具有焦点     input：focus\{\}

#####     CSS一个简单的导航栏    #####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    	ul{
    		list-style-type: none;
    		margin: 0;
    		padding: 0;
    		overflow: hidden;
    		background-color: #8FBC8F;
    	}
    	li{
    		float: left;
    	}
    	li a:link, .box{
    		text-decoration: none;
    		font-size: 20px;
    		color: white;
    		display: inline-block;
    		padding: 20px 25px; 
    	}
    	li a:hover,.sereach:hover{
    		background-color: cadetblue;
    	}
    	.sereach{
    		display: inline-block;
    	}
    	.down{
    		display: none;
    		background-color: #ADD8E6;
    		min-width: 120px;
    		position: absolute;
    		
    	}
    	.down a:link{
    		text-decoration: none;
    		font-size: 20px;
    		color: black;
    		display: block;
    		padding: 5px 25px;
    	}
    	.down a:hover{
    		background-color: #EFEFEF;
    	}
    	.sereach:hover .down{
    		display: block;
    	}
    </style>
    </head>
    <body>
    	<ul>
    		<li><a href="#">首页</a></li>
    		<li><a href="#">书城</a></li>
    		<li><a href="#">学堂</a></li>
    		<div class="sereach">
    			<a class="box" href="#">个人中心</a>
    			<div class="down">
    				<a href="#">我的信息</a>
    				<a href="#">我的钱包</a>
    				<a href="#">退出</a>
    			</div>
    		</div>	
    	</ul>
    </body>
    </html>

效果图：

![70 6][]

CSS透明：opcaty

CSS属性选择器：\[属性名:值\]\{\}

CSS图像拼合技术：将一张长图切成几块

CSS实现提示框：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title>  
    <style type="text/css">
    	.box{
    		background-color: #8FBC8F;
    		padding: 10px 20px;
    		font-size: 20px;
    		border-radius: 8px;
    	}
    	.content{
    		font-size: 18px;
    		margin-top: 20px;
    		margin-left: 20px;
    	  display: none;
    	}
    	.down{
    		color:  white;
    		width: 120px;
    		height: 60px;
    		line-height: 60px;
    		background-color: #FF8C00;
    		border-radius: 10px;
    		position: absolute;
    		text-align: center;
    		
    	}
    	
    	.content .down:after{
    		content: "";
    		position: absolute;
    		left: 45%;
    		bottom: 100%;
    		margin-top: -10px;
    		border-width: 10px;
    		border-style: solid;
    		border-color: transparent transparent  #FF8C00 transparent;
    		z-index: 1;
    	}
    	
    	.div:hover .content{
    		display: block;
    	}
    	
    </style>
    </head>
    <body>
    	 <div class="div">
    	 	  <span class="box">世界杯</span>
    	 	  <div class="content">
    	 	  	<span class="down">Hello World!</span>
    	 	  </div>
    	 </div>
    </body>
    </body>
    </html>

效果图：

![70 7][]

[70]: /images/20220520/4bfbdd02dffa4aef8a6fb097ee24c41d.png
[70 1]: /images/20220520/2bb9c18b1fa643bb83380a465e1e93dd.png
[70 2]: /images/20220520/58f02fc9dade488697fe7ddb8550273a.png
[70 3]: /images/20220520/5e965c681c884a4da76d1b62378fd37c.png
[70 4]: /images/20220520/c2876bff8a164d16b58d543aab4983b5.png
[70 5]: /images/20220520/6df6e3f3e5854eca867db81eeb441f60.png
[70 6]: /images/20220520/0d64f0e7d6bb45ffb8618b2d4661e283.png
[70 7]: /images/20220520/5709af1806ff4c5db1f65961c7d34a60.png