02css

Ayui.

已于 2023-08-05 16:22:39 修改

阅读量43

点赞数

分类专栏： 02_javaee 文章标签： css

于 2023-08-05 15:47:31 首次发布

本文链接：https://blog.csdn.net/m0_61569709/article/details/132120675

版权

02_javaee 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1 css概念

cascade style sheets:级联样式表
原理：把属性从标签中分离形成一门单独的语言 实现样式的复用
语法：属性名:属性值,
优点：1 实现样式的复用
     2 提供更丰富，更精准的样式
     3 浏览器对css的兼容性更好
     4 可以轻松实现页面元素的布局和定位

2 css与html结合的方式

<html>
    <head>  <!--整个页面属性的设置-->
        <title>css_01</title>
        <meta charset="gbk"/>
        <!--方式2：內部样式表：通过head的style子标签：style子标签的代码是css代码
缺点：样式只能在对齐页面中复用 无法实现页面之间样式的复用
-->
        <style type="text/css">
            /*css的注释*/
            /*通过选择器 来指定当前样式要作用到那些标签*/

            .cla_p{/*类选择器：当前样式要作用到class=cla_p的所有标签上*/
                border:3px yellow double; /*边框*/
                color:green;              /*文本颜色*/
                background-color:#cccccc; /*背景颜色*/
                text-align:right;        /*文本对齐方式*/
            }
        </style>

        <!--方式3：外部样式表：通过@import/link标签来引入外部css文件-->
        <link type="text/css" rel="stylesheet"  href="2.css"/>
        <!--type="text/css"  :指定要引入的文件的格式-->
        <!--rel="stylesheet" :指定要引入的文件的作用-->
        <!-- href="2.css"    :指定要引入的文件的位置-->
        <style>
            /*引入外部css文件*/
            @import url("1.css");
        </style>
    </head>
    <body> 
        <!--方式1：行内样式表：通过标签的style属性：style属性的值就是css代码
缺点：行内样式表无法实现样式复用
-->
        <p style="color:red;text-align:center;border:3px blue solid;">p1</p>
        <p class="cla_p">p22222</p>
        <p class="cla_p">p34444</p>
        <p class="cla_p">p33333</p>
        <p >p35555</p>
    </body>
</html>

1.css

p{ /*标签选择器：当前样式要作用到所有的p标签上*/
	font-size:28px;   /*字体大小*/
	font-weight:bold;/*字体加粗*/
}

2.css

p{ /*标签选择器：当前样式要作用到所有的p标签上*/
	width:800px; /*宽*/
	margin:10px auto;/*外边距*/
}

3 css的选择器

3.1 基本选择器

<html>
    <head>  
	     <title>css_02选择器</title>
		 <meta charset="gbk"/>
		 <style type="text/css">
		     /*
			   选择器：指定当前样式要作用与那些标签上
			 */
			 /*1：通配符选择器： *{}  ::选中所有的元素*/
			 *{
			     color:red;  /*文字颜色*/
			 }
			 
			 /*2：类选择器： .class值{}  ::选中class=指定class值的所有元素*/
			 .cla1{
			     font-weight:bold; /*文字粗细*/
			 }
			 
			 /*3：标签选择器： 标签名{}  ::选中指定标签名的所有元素*/
			 span{
			     font-size:30px; /*文字大小*/
			 }
			 
			 /*4：id选择器： #id值{}  ::选中id=指定值的唯一元素*/
			 /*规范：一个页面中的id必须唯一*/
			 #div3{
			      border:2px solid  blue; /*边框*/
			 }
			 
			 /*5：组合选择器：选择器1,选择器2{}  :: 样式作用到两个选择器上*/
			 #div5,.cla2{
			     background:#cccccc;
			 }
			 
			 /*6：派生选择器：父标签选择器 子标签选择器{}  :: 先选父亲 再选孩子*/
			 #div0 font{
			     font-weight:bold;
				 color:blue;
				 font-size:30px;
			 }
			 
			 /*
			   7：伪类选择器：css唯一可以显示动态效果的选择器
			   
			 */
			 /*浏览器对伪类选择器的兼容性比较差*/
			 
		 </style>    
		 
	</head>
	<body> 
	     <span class="cla1">span11</span><br/><!--封装行数据-->
		 <span class="cla1">span12</span><br/>
		 <span class="cla2">span13</span><br/>
	     <div class="cla1">div1</div>  <!--封装块数据-->
		 <div class="cla1">div2222</div> 
		 <div id="div3">div3333</div> 
		 <div  class="cla2">div4</div> 
		 <div id="div5">div5555</div>
         <div id="div0">
		      div标签
			  <font>div中的font标签11</font>
			  <font>div中的font标签21</font>
		 </div>
         <div >
		      div标签
			  <font>div中的font标签12</font>
			  <font>div中的font标签22</font>
		 </div>			 
         <font>font标签1</font>	
         <font>font标签1</font>	 		 
		 正常文字
	</body>
</html>

3.2 伪类选择器

<html>
    <head>  
	     <title>css_03伪类选择器</title>
		 <meta charset="gbk"/>
		 <style type="text/css">
		    /*
			   7：伪类选择器：css唯一可以显示动态效果的选择器
			    :link :::a标签未被访问过的样式
				:hover :::鼠标悬停时的样式
				:active :::激活瞬间时的样式
				:visited:::a标签已被访问过的样式
				:focus:::::获取输入焦点时的样式
				:first-letter:::第一个字符的样式
			 */
			 /*浏览器对伪类选择器的兼容性比较差*/
			 a:link{/*未被访问的样式*/
			    text-decoration:none;/*没有化线*/
				font-size:16px;
				background:#cccccc;
				color:red;
			 }
			 a:visited{/*已被访问的样式*/
			    text-decoration:line-through;/*中化线*/
				font-size:36px;
				background:#999966;
				color:blue;
			 }
			 a:hover{/*鼠标悬停的样式*/
			    text-decoration:underline ;/*下化线*/
				font-size:26px;
				background:#99aaaa;
				color:#ff33aa;
			 }
			 a:active{/*激活瞬间的样式*/
			    text-decoration:overline ;/*上化线*/
				font-size:32px;
				background:#999999;
				color:#aaffaa;
			 }
			 /*input获取输入焦点时 更改其样式*/
			 input:focus{
			      border:1px solid blue;
				  background:#999999;
			 }
			 div:hover{
			     color:red;
				 font-weight:bold;
				 background:#999999;
			 }
			 #div1:first-letter{
			     color:red;
				 font-weight:bold;
				 font-size:30px;
			 }
		</style>
	</head>
	<body> 
	     <ul>
		     <li><a href="#">点我试试11</a></li>
			 <li><a href="#">点我试试12</a></li>
			 <li><a href="javascript:void(0);">点我试试13</a></li>
			 <li><a href="javascript:void(0);">点我试试14</a></li>
		 </ul>
		 <input type="text"/><br/>
		 <input type="text"/><br/>
		 <div style="border:1px solid blue;width:200px;height:100px;">div</div>
		 <div id="div1" style="border:1px solid blue;width:200px;height:100px;">你好吗？朋友！</div>
	</body>
</html>

3.3 选择器的优先级

<html>
    <head>  
	     <title>css_03伪类选择器</title>
		 <meta charset="gbk"/>
		 <style type="text/css">
		     /*层叠样式表：一个元素上可以加多个样式：
			     属性不冲突或者不相同  样式叠加
                 属性冲突或者相同  看优先级
			 */
		     /*选择器的优先级： 行内样式表style属性 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器*/
			 #p1{
			    color:blue;
				border:1px solid blue;
			 }
			 .cla1{
			    color:yellow;
				border:3px double red;
				background:#aaaaaa;
			 }
			 p{
			    color:green;
				border:3px double yellow;
				background:#ffaa33;
				font-size:28px;
			 }
			 *{
			    color:green;
				border:3px double yellow;
				background:#ffaa33;
				font-size:40px;
				text-align:center;
			 }
		 </style>
	</head>
	<body> 
		 <p class="cla1" id="p1" style="color:red;">p11111</p>
	</body>
</html>

4 盒子模型

在这里插入图片描述

<html>
    <head>  
	     <title>css_04盒子模型</title>
		 <meta charset="gbk"/>
		 <link type=""/>
		 <style type="text/css">
		       /*
			   盒子模型：把标签想象成现实中的盒子：现实中的盒子的数据 学习标签常用的属性样式
			   
			   */
			   div{
			      /*大小*/
			      width:200px;/*宽*/
				  height:300px;/*高*/
				  /*边框*/
				  border:3px solid blue;/**/
				  border-color:red;/*边框颜色*/
				  border-width:2px;/*边框宽度*/
				  border-style:double;/*边框样式*/
				  border-top:3px solid yellow;/*上边框*/
				  border-bottom-color:blue;
				  /*背景*/
				  background:#aaaaaa url("bg.png") no-repeat; 
				  background-color:#cccccc;/*背景颜色*/
				  background-image:url("bg.png");/*背景图片*/
				  /*文字*/
				  font-size:30px;/*字体大小*/
				  font-weight:bold;/*字体粗细*/
				  font-style:italic;/*字体斜体*/
				  font-family:宋体;/*字体*/
				  color:red;/*文字颜色*/
				  text-decoration:line-through;/*划线的位置*/
				  text-transform:uppercase;/*大小写转换*/
				  letter-spacing:10px;/*字符间隔*/
				  /*文本*/
				  text-indent:40px;/*首行缩进*/
				  text-align:center;/*文本对齐方式*/
				  word-break:break-all;/*边框内自动换行*/
				  /*外边距*/
				  margin:10px;/*上下左右都是10px*/
				  /*内边距*/
				  padding:40px;
				  padding:10px 20px 40px 80px;
			   }
			   #div2{
			      font-family:楷体;
				  margin:10px 40px 70px 100px;/*上 右 下 左*/
				  margin:10px 100px;/*上下  左右*/
			   }
			   
		</style>
	</head>
	<body  style="border:3px solid blue;padding:0px;"> 
	     <div id="div1">div1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa中文你好吗？DDDD</div>
		 <div id="div2">div2bbbbbbbbbbbbbbbbbbb中文你好吗？DDDD</div>
		 <div id="div3">div33中文你好吗？DDDD</div>
	</body>
</html>

5 浮动

float和clear的使用

<html>
    <head>  
	     <title>css_05浮动</title>
		 <meta charset="gbk"/>
		 <style type="text/css">
		     /*
			  浮动：实现css页面布局方式之一：
			  float:  left/right
			  clear:  left/right/both
			  
			  float: left; 元素不再按文档流(每个元素一行 从上往下)的方式排序
			               当前元素放在尽可能的左边 
						   下一个元素尽可能的放在当前元素的右边
						   (总之：从我看起 后面的元素从左往右排)
			  float: right; 元素不再按文档流(每个元素一行 从上往下)的方式排序
			               当前元素放在尽可能的右边 
						   下一个元素尽可能的放在当前元素的左边
						   (总之：从我看起 后面的元素从右往左排)
              clear: left; 取消上一个元素float:left对当前元素的影响
			  clear: right; 取消上一个元素float:right对当前元素的影响
			  clear: both; 取消上一个元素float:left/right对当前元素的影响
						   
			 */
		     div{
			    border:1px solid blue;
				width:300px;
				height:100px;
				padding:10px;
				margin:10px;
				word-break:break-all;
			 }
			 #div1{
			     background-color:#aa33cc;
				 float:left;
			 }
			  #div2{
			     background-color:#ccaa33;
				 float:right;
			 }
			  #div3{
			     background-color:#33ccaa;
				 clear:both;/*前一个元素的float对当前元素无效*/
				 float:left;
			 }
			  #div4{
			     background-color:#cccccc;
				 float:right;
				 margin-right:400px;
			 }
		 </style>
	</head>
	<body> 
	      <div id="div1">div1</div>
		  <div id="div2">div22222</div>
		  <div id="div3">div333333333</div>
		  <div id="div4">div44444444444444444444444</div>
	</body>
</html>

效果

在这里插入图片描述

浮动练习

<html>
    <head>  
	     <title>浮动练习</title>
		 <meta charset="gbk"/>
		 <style type="text/css">
		       div{
			      width:600px;
				  height:400px;
				  margin:50px auto;
				  border:1px solid blue;
				  font-size:21px;
				  color:blue;
			   }
			   img{
			      width:400px;
				  height:200px;
				  float:right;
			   }
		 </style>
	</head>
	<body> 
	       <div>
		        <img src="file://C:\Users\Administrator\Desktop\img\99.jpeg"/>
				1：格式不同：普通方法必须有返回值类型标识 如果没有返回值用void标识
						   构造方法没有返回值 不用void标识
				2：命名不同：构造方法名字必须是类名
						   普通方法名字可以是类名(但如果是类名 不规范)
				3：调用不同：构造方法被关键字new调用 调用一次就创建一个新的对象
						   普通方法被对象调用 一个对象可以调用多次普通方法
				4：意义不同：构造方法功能用于创建对象
						   普通方法表示当前类创建的对象具有的功能
		   </div>
	</body>
</html>

效果

在这里插入图片描述

6 定位

position/left/top

<html>
    <head>  
	     <title>css_06定位</title>
		 <meta charset="gbk"/>
<style type="text/css">
		     /*
			  定位：实现css页面布局方式之一：
			        position: relative /absolute
					top/bottom
					left/right
			     position: absolute 绝对定位：
				 top:100px;   
				 left:200px;
				 1 文档流中不再保留当前元素的位置
                 2 参照：最近的带有position父辈标签	 如果所有的父辈标签都没有position 就相当于body	

                 position: relative 相对定位：
				 top:100px;   
				 left:200px;
				 1 文档流中保留当前元素的位置
                 2 参照：当前元素在文档流中本来的位置					 
			 */
		     div{
			    border:1px solid blue;
				width:300px;
				height:100px;
				padding:10px;
				margin:10px;
				word-break:break-all;
			 }
			 #div1{
			     background-color:#aa33cc;
			 }
			  #div2{
			     background-color:#ccaa33;
				 /*position:absolute;*//*绝对定位*/
				 /**/position:relative;/*相对定位*/
				 top:100px;
				 left:200px;
			 }
			  #div3{
			     background-color:#33ccaa;
			 }
			  #div4{
			     background-color:#cccccc;
			 }
			 #div0{
			    width:1200px;
				height:550px;
				border:1px solid red;
				background-color:#eeeecc;
				position:absolute;  /*绝对定位*/
				/*top:200px;*/
				/*left:200px;*/
				margin-top:300px;
				margin-left:300px;
			 }
		 </style>
	</head>
	<body> 
	      <div  id="div0">
			  <div id="div1">div1</div>
			  <div id="div2">div22222</div>
			  <div id="div3">div333333333</div>
			  <div id="div4">div44444444444444444444444</div>
		  </div>
	</body>
</html>

效果

在这里插入图片描述

练习

<html>
    <head>  
	     <title>定位练习</title>
		 <meta charset="gbk"/>
		 <style type="text/css">
		        div{
				    margin:100px auto;
					width:900px;
				} 
				img{
				   width:800px;
				   height:500px;
				}
				font{
				   font-size:100px;
				   font-weight:bold;
				   color:blue;
				   letter-spacing:80px;
				   position:relative;
				   top:-350px;
				   left:100px;
				}
		 </style>
	</head>
	<body> 
	       <div>
		        <img src="file://C:\Users\Administrator\Desktop\img/99.jpeg"/> 
				<font>沉鱼落雁</font>
		   </div>
	</body>
</html>