CSS中的字体背景和盒子模型_css拿字当盒子北京-CSDN博客

本文链接：https://blog.csdn.net/jinhuoxingkong/article/details/51447669

接着上一节的CSS中的基本选择器和语法规则，继续进行记录，这次主要对CSS中的字体、背景和盒子模型进行简单的介绍，做一下记录以后查看方便一点。

【1】字体

【2】背景

【3】块标签

【4】盒子模型

字体

从左到右依次是风格、变换、粗细、大小、字体

<!DOCTYPE html>
<html>
  <head>
    <title>字体练习</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-设定页面使用的字符集->
    
 	<style type="text/css">
 		/* p{
 			 font-family: 黑体;
 			 font-size: 25px;
 			 font-style:oblique;
 			 font-weight:900;
 			 font-variant:small-caps;
 		} */
 		p{
 			font:oblique small-caps 100 55px 黑体;<!小型大写字母>
 		}
 	</style>
  </head>
  
  <body>
 	<p>iT床前明月光,疑是地上霜</p>
  </body>
</html>

背景

本次选择的是使用一个图片background.jpg为背景，主要要将图片和文件放到同一个文件夹之下，否则要加上文件的路径，设置背景为不重复、固定、中心

<!DOCTYPE html>
<html>
  <head>
    <title>背景设置</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
 	<style type="text/css">
 		/* 
 			background : background-color || background-image || background-repeat || background-attachment || background-position 
		body{
 			background-image: url("mn.jpg");
 			background-repeat: no-repeat;
 			background-attachment: fixed;
 		}
 	 	*/
 		body{
 			background: url("background.jpg") no-repeat fixed center;
 			<!-fixed是固定的意思->
 		}
 	</style>
  </head>
  
  <body>
  	<p>
  		背景设置<br>
  		背景设置<br>
  		背景设置<br>
  	</p>
    <p>
  		背景设置<br>
  		背景设置<br>
  		背景设置<br>
  	</p>
  
  </body>
</html>

块标签

块标签div，在这里是占据一行，标签span占据一部分

<!DOCTYPE html>
<html>
  <head>
    <title>块&行标签.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 
    	 块级标签  => 占据的范围是一行
    	     div
    	行内标签 => 占据的是行中的一部分
    		 span
     -->
  </head>
  
  <body>
  	占一行<div>占一行</div>占一行<br>
  	占一部分<span>占一部分</span>占一部分
  </body>
</html>

盒子模型
盒子模型设置边框颜色、边框宽带和边框样式等，还有边距和大小等，这些代码中给的比较明确了

<!DOCTYPE html>
<html>
  <head>
    <title>盒子模型</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    /*
    盒子模型的属性
    	一. 边框系类属性
    	二. 尺寸属性
    	三. 边距
    			*内边距
    			*外边距    
    	border-color:边框颜色
    	border-width:边框宽度
    	border-style:边框样式
    	
    		border-color: red;
    		border-width: 1px;
    		border-style: solid;
    		
    		margin-left:100px;左外边距
    		margin-top:100px;
    		
    		padding-left:100px; 左内边距
    		padding-top:100px; 上内边距
    		
    		注意:内边距会延长所在盒子的长或宽
    */
    	div{
    		border: 1px solid red;
    	}
    	
    	#one{
    		height: 300px;
    		width: 300px;
    	}
    	#two{
    		height: 100px;
    		width: 100px;
    		margin-left:100px;
    		margin-top:100px;
    	}
    </style>
    
  </head>
  
  <body>
    <!--div可以理解为网页布局，起到分块的作用-->
    <!--id=one之中包含了id=two-->
  	<div id="one">
  		<div id="two"></div>
  	</div>
  </body>
</html>

以上就是CSS的另外几个简单属性，其实远不止这些，等java基础好一点了，再来补充。