CSS学习

最新推荐文章于 2022-10-13 11:08:50 发布

Yacht13

最新推荐文章于 2022-10-13 11:08:50 发布

阅读量190

点赞数

分类专栏： HTML、CSS、JavaScript、jQuery 文章标签： css

本文链接：https://blog.csdn.net/Archer__13/article/details/123604248

版权

HTML、CSS、JavaScript、jQuery 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

一. 基本语法

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel = "stylesheet" href = "page1.css">   <!--连接要渲染该页面的CSS文件-->
</head>
<body>
	<h1>标题一 </h1>
	<p id="p1">段落一</p>        <!--一个元素只能对应一个id-->
	<p>段落二</p>
	<p>段落三</p>
       
	<p class="pp">段落四</p>  <!--多个元素可以对应同一个class，每个元素可以对应多个class-->
	<p class="pp">段落五</p>
	
	
	<h1>标题二 </h1>
	<div>               <!--  <div>可以将多个元素划分为一个区域  -->      
		<p>段落六</p>    
		<p>段落七</p>
	</div>
	
	<div>
		段落八<br/>
		段落九<br/>
		段落十<br/>
	</div>

    <div id="div1">
		内容1
	</div>	
	<div id="div2">
		内容2
	</div>
</body>
</html>

/* 将所有段落的
               字体样式设置为sans_serif
			   字体大小设置为3px
			   */
p{
	font-family:sans_serif;       /*字体样式*/
	font-size:15px;               /*字体样式大小：px(像素)、%、em(相对大小)等方式*/
}

/* 将段落一的
			 字体大小设置为20px
			 背景颜色设置为蓝色
			 斜体
			 下划线  */
			   
#p1{                              /*  #id名：表示修改html中对应的id*/
	font-size:20px;                
	background-color:blue;        /*背景颜色*/
	font-style:italic;            /*斜体*/
	text-decoration:underline;     /*text-decoration可以设置underline(下划线)、overline(上划线)、
	                                                        line-through(中间线)、none(去除装饰线)*/
}

/* 将段落四和段落五的
			         字体颜色设置为绿色
			         字体粗细为：bold    */
			          
.pp{                          /*  .class名：表示修改html中对应的class*/
	color:green;             /*字体颜色*/
	font-weight:bold;        /*字体粗细font-weight可以设置为lighter、normal、bold、bolder*/
}


/* 将段落六到段落十的字体颜色设置为红色
    并将段落六和段落七的文字设置为斜体      */
			          
div{                         
	color:red;            
}

div p{
	font-style:italic;     
}


/*设置div包裹区域的样式*/
#div1{
	width:400px;         /*设置div包裹区域的宽度*/
	height:400px;		 /*设置div包裹区域的高度*/
	background-color:greenyellow;
	
	/* border设置边框样式*/        
	border-color:red;     /* 边框颜色*/
	border-width:4px;     /* 边框粗细*/
	border-style:dotted;  /* 边框样式有：solid(实线)、dotted(虚线)、double(双线)等等*/
	
}

#div2{
	width:300px;
	height:300px;
	background-color:yellow;
	
	border: blue 2px solid;   /*可以合在一起写*/    
	
	/*设置某一个边框的样式：border-top（上边框）、border-bottom（下边框）
							border-left（左边框）、border-right（右边框）*/
	border-top: pink 5px groove;
}

二. 盒子模型

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel = "stylesheet" href = "page1.css">   <!--连接要渲染该页面的CSS文件-->
</head>
<body>
	<div id="div1">
		<div id="div2">
			<div id="div3">
				<div id="div4"></div>
			</div>
		</div>
	</div>
</body>
</html>

#div1{
	width:400px;         
	height:400px;		 
	background-color:greenyellow;
	     
	border:red 2px solid;    
}


#div2{
	width:300px;
	height:300px;
	background-color:yellow;
	
	margin-top:50px;     /*设置div2区域的上边框到div1区域的上边框的长度*/
	margin-left:50px;    /*设置div2区域的左边框到div1区域的左边框的长度*/
	
	overflow: hidden;    /*防止父元素随着子元素设置的margin变化，即防止div2会随着div3的margin-top移动*/
}

#div3{
	width:150px;          /*一个div模块的大小 = width + border-width + padding*/
	height:150px;         /*由于设置了padding，所以要减小width*/  
	background-color:pink;
	   
	margin-top:50px;     /*设置div3区域的上边框到div2区域的上边框的长度*/
	margin-left:50px;    /*设置div3区域的左边框到div2区域的左边框的长度*/
	
	overflow: hidden;    
	
	padding-top:50px;     /*设置div3区域的上边框到div4区域的上边框的长度*/
	padding-left:50px;    /*设置div3区域的左边框到div4区域的左边框的长度*/
}                         /*padding表示填充*/

#div4{
	width:100px;
	height:100px;
	background-color:blue;
}

三. CCS表格

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel = "stylesheet" href = "page1.css"> 
</head>
<body>
	<div id="div_container">
		<table id="user_table">
			<tr>
				<th class = "cell_width">名字</th>
				<th class = "cell_width">年龄</th>
				<th class = "cell_width">性别</th>
				<th class = "cell_width">身高</th>
				<th class = "cell_width">体重</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>23</td>
				<td>男</td>
				<td>178</td>
				<td>130</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>21</td>
				<td>男</td>
				<td>182</td>
				<td>135</td>
			</tr>
			<tr>
				<td>王二</td>
				<td>22</td>
				<td>男</td>
				<td>174</td>
				<td>120</td>
			</tr>
			<tr>
				<td>总数</td>
				<td colspan = "4">3</td>
			</tr>
		</table>	
	</div>
</body>
</html>

body{
	margin:0;
	padding:0;
	background-color:MintCream;
}

div{
	position:relative;
	float:left;
}

#div_container{
	width:80%;
	height:600px;
	border:1px solid red;
	margin-top:70px;
	margin-left:10%;
	float:left;
	background-color:Beige;
}

#user_table{
	width:60%; 				 /*表格的宽度*/
	line-height:30px;        /*单元格行高*/
	margin-top:225px;
	margin-left:20%;
}

#user_table, #user_table tr, #user_table th, #user_table td{
	border:1px solid black;              /*设置表格边框*/
	border-collapse:collapse;            /*合并表格边框线*/
	text-align:center;                   /*文字居中*/
	
	font-size:16px;
	font-family:仿宋;
	color:MidnightBlue;
}

.cell_width{
	width:20%;       /*单元格宽度*/
}