CSS的简单学习

南岸青栀*

于 2021-04-13 09:52:20 发布

阅读量102

点赞数 5

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_43710889/article/details/115647798

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS的简单学习

基本知识：

CSS：层叠样式表（Cascading Style Sheets）

作用：

给网页进行样式的开发
给网页进行布局

特点：

语言简单
开发样式可以重复使用

使用CSS

CSS的声明
CSS的选择器
CSS的盒子模型
CSS的定位
CSS的布局

CSS的选择器

标签选择器:

标签名{样式名1:样式.1…}
作用:会将当前网页内的所有该标签增加相同的样式

id选择器:

标签的id属性值{样式名1:样式值1; …}
作用:给某个指定的标签添加指定的样式

类选择器:

类选择器名{样式名1:样式值1 …}
作用:给不同的标签添加相同的样式

全部选择选择器

*{样式名1:样式值1…}
作用:选择所有的HTML标签，并添加相同的样式

组合选择器:

选择器1,选择器2…祥式名1:样式值.1…}
作用:解决不同的选择器之间重复样式的问题

子标签选择器

选择器1子标签选择器{样式名1:样式值…}

属性选择器:

标签名[属性名=属性值]{样式名1:样式值…}
作用:选择某标签指定具备某属性并且属性值为某属性值的标签

代码粘贴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
		<!-- CSS选择器 -->
		
		<!-- 声明代码域 -->
		<style type="text/css">
			table{
				width: 200px;
				height: 200px;
				border: solid 1px;
				background-color: red;
			}
			/* b{
				color: #FF0000;
				
			} */
			
			/* id选择器 */
			#t1 {
				background-color: green;
			}
			
			/* 类选择器 */
			.comment{
				color: black;
			}
			
			/* 全部选择器 */
			.*{
				color: black;
			}
			
			/* 组合选择器
			.comment #t1 {
				color: gray;
				
			} */
			
			/* 子标签选择器 */
			ul li a{
				color: aqua;
			}
			/* 属性选择器 */
			input[type=text]{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<h1>CSS选择器</h1>
		<hr >
		<table id="t1" class="comment">
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>3</td>
				<td>3</td>
			</tr>
		</table>
		
		<table>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<b class="comment">CSS标签</b>
		
		<ul>
			<li><a href="">hh</a></li>
			<li><a href="">xx</a></li>
			<li><a href="">ll</a></li>
		</ul>
		<a href="">ss</a><br>
		
		<input type="text" src="" name="user" /><br>
		<input type="tel" name="pwd" /><br>
	</body>
</html>

步骤：

1.使用*选择器来给整个页面添加基础样式
2.使用类选择器给不同的标签添加基础样式
3.使用标签选择器给某类标签添加基础样式
4.使用id、属性选择器、styLe属性声明方式给某个标签添加个性化样式。

CSS样式使用

书写样式单

边框设置

border:solid 1px

字体设置

font-size:10px

font-family:“黑体”

font-weight：blod

字体颜色设置

color：red

背景颜色设置

background-color: green

背景图片设置

background-image: url(图片相对路径);
background-repeat: no-repeat;设置图片不重复
background-size: cover;图片平铺整个页面

高宽设置

浮动设置

float:left|right

行高设置

line-height:10

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式使用</title>
		
		<!-- CSS -->
		<style type="text/css">
			body{
				background-image: url(./img/1.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			table{
				border: solid 1px;
				
				background-size: cover;
				
			}
			tr{
				height: 40px;
			}
			td{
				width: 100px;
				border: solid 1px red;
				/* border-bottom: none; */
				border-radius: 10px ;
				/* background-color: orange; */
				text-align: center;
				font-family: "楷体";
				font-weight: bold;
				letter-spacing: 10px;
			}
			
			/* -------------------------------------------- */
			
			ul {
				background: gray;
				height: 30px;
			}
			
			li{
				list-style-type: none;	/* 去除列表样式 */
				/* display: inline; */	
				float: left;
			}
			li a{
				color: black;
				text-decoration: none ;
				font-size: 20px;
				font-weight: bold;
				margin-left: 20px;
				position: relative;
				top: 2px;
				
			}
		</style>
	</head>
	<body>
		<h1>CSS样式使用</h1>
		<hr >
		
		<table>
			<tr>
				<td>name</td>
				<td>sex</td>
				<td>hobby</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>吃饭</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>女</td>
				<td>睡觉</td>
			</tr>
		</table>
		<hr >
		<ul>
			<li><a href="">首页</a></li>
			<li><a href="">百度</a></li>
			<li><a href=""> 拉</a></li>
			<li><a href="">淘宝</a></li>
		</ul>
	</body>
</html>

在这里插入图片描述

CSS盒子模型

外边距:margin

作用:用来设置元素和元素之间的间隔。
居中设置:margin:0px auto; 上下间隔是0px,水平居中。
可以根据需求单独的设置上下左右的外边距。

边框: border

作用:用来设置元素的边框大小
可以单独设置上下左右

内边距: padding

作用:设置内容和边框之间的距离
注意:内边距不会改变内容区域的大小
可以单独的设置上下左右的内边距

内容区域:

作用:改变内容区域的大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型学习</title>
		<style type="text/css">
			img{
				width: 49%;
			}
			.showdiv{
				border: solid 100px red;
				width: 40%;
				height: 400px;
				margin:100px auto ;
				padding: 20px;
			}
			.div01{
				border: dashed 3px orange;
				width: 40%;
				height: 200px;
			}
		</style>
	</head>
	<body>
	
		<div class="showdiv">
			<img src="./img/1.jpg" alt="">
			<img src="./img/3.jpg" alt="">
			
		</div>
		<div class="div01">
			
		</div>
	</body>
</html>

在这里插入图片描述

CSS定位作用：

position

相对定位：relative
- 作用：相对元素原有的位置移动指定距离（top，right，left，bottom）
- 注意：其他元素位置不变
绝对定位：absolute
- 作用：可以使用元素参照界面或相对父元素来进行移动。
- 注意：如果父元素成为参照元素，必须使用相对定位属性。
固定定位：fixed
- 作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。

z-index属性来声明元素的显示级别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS定位</title>
		<style type="text/css">
			#div1{
				border: solid 2px #000000;
				height: 200px;
				width: 800px;
				margin-bottom: 10px;
				position: relative; /* 给div01添加相对定位成为子元素绝对定位的参照 */
			}
			#showdiv{
				border: solid 2px pink;
				height: 50px;
				width: 50px;
				position: absolute;
				top: 10px;
			}
			#div2{
				border: solid 2px red;
				height: 200px;
				width: 800px;
				margin-bottom: 10px;
				position: relative; /* 相对定位 */
				left: 30px;
				top: 50px;
				background-color: #000000;
			}
			#div3{
				border: solid 2px green;
				height: 200px;
				width: 800px;
				background-color: #FF0000;
				position: relative;
				z-index: 1;
			}
			#div4{
				border: solid 2px blue;
				height: 50px;
				width: 50px;
				position: fixed;
				top: 270px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<h1>CSS定位</h1>
		<hr >
		<div id="div1"><div id="showdiv">
			lll
		</div></div>
		<div id="div2">我是div2</div>
		<div id="div3"></div>
		<div id="div4">
			
		</div>
		
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		
	</body>
</html>

南岸青栀*

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS的简单学习

CSS的简单学习基本知识：CSS：层叠样式表（Cascading Style Sheets）作用：给网页进行样式的开发给网页进行布局特点：语言简单开发样式可以重复使用使用CSSCSS的声明CSS的选择器CSS的盒子模型CSS的定位CSS的布局CSS的选择器标签选择器:标签名{样式名1:样式.1…}作用:会将当前网页内的所有该标签增加相同的样式id选择器:标签的id属性值{样式名1:样式值1; …}作用:给某个指定的标签添加指定的样式类选择器:
复制链接

扫一扫