CSS样式学习

最新推荐文章于 2024-06-27 10:18:30 发布

异时空

最新推荐文章于 2024-06-27 10:18:30 发布

阅读量297

点赞数

分类专栏： HTML 文章标签： css 前端

本文链接：https://blog.csdn.net/wang_hahah/article/details/107032671

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS简介

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS 实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

在这里插入图片描述
选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS 创建

如何插入样式表

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

css的选择器

style选择器学习：

			1、全局标签：
				标签名{}
				作用：给当前网页中所有该标签增加样式
			
			2、id选择器：
				#属性的id属性值{}
				作用：给某个指定的标签添加指定的的样式
			
			3、类选择器：
				.类选择器名{}
				作用：给不同的标签添加相同的样式
			
			4、全部选择选择器：
				*{}
				作用：给所有的HTML标签添加相同的样式
			
			5、组合选择器：
				选择器1，选择器2，....{}
				作用：解决不同的选择器间重复样式的问题
			
			6、子标签选择器：
				父标签 子标签 子标签...{}
				作用：给所有的该标签嵌套标签添加样式
			
			7、属性选择器：
				标签[属性名=属性值]{}
				作用：给特定的标签属性加上样式

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css的选择器学习</title>
		<!-- 
			style选择器学习：
				全局标签：
					标签名{}
					作用：给当前网页中所有该标签增加样式
				id选择器：
					#属性的id属性值{}
					作用：给某个指定的标签添加指定的的样式
				类选择器：
					.类选择器名{}
					作用：给不同的标签添加相同的样式
				全部选择选择器：
					*{}
					作用：给所有的HTML标签添加相同的样式
------------------------以上必须掌握------------------------------------
				组合选择器：
					选择器1，选择器2，....{}
					作用：解决不同的选择器间重复样式的问题
				子标签选择器：
					父标签 子标签 子标签...{}
					作用：给所有的该标签嵌套标签添加样式
				属性选择器：
					标签[属性名=属性值]{}
					作用：给特定的标签属性加上样式
		 -->
		 <style type="text/css">
			 /* 普通标签样式*/
		 	hr{
				height: 5px;
				background-color: red;
			}
			
			table{
				background-color: blue;
				height: 200px;
				width: 200px;
			}
			/* id选择器 */
			#t{
				background-color: red;
			}
			/* 类选择器 */
			.common{
				color: gray;
			}
			/* 组合选择器 */ 
			p a,h5 a{
				color: aqua;
			}
			/* 子标签选择器 */
			ul li{
				color: brown;
			}
			/* 属性选择器 */
			input[type=text]{
				background-color: red;
			}
		 </style>
	</head>
	<body>
		<h3>css的选择器学习</h3>
		<hr>
		<table id="t" class="common">
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
		<table>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
		</table>
		<p>
			<a href="">百度一下</a>
		</p>
		<h5><a href="">搜狗一下</a></h5>
		<b class="common">css标签选择器的学习</b>
		<ul>
			<li>哈哈</li>
			<li>呵呵</li>
			<li>嘻嘻</li>
		</ul>
		<input type="text" name="uname" id="" value="" /><br>
		<input type="password" name="upwd">
	</body>
</html>

结果显示：
在这里插入图片描述
css常用样式
直接上代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css常用样式学习</title>
		<!-- 常用样式学习 -->
		<!-- 表格样式学习 -->
		<style>
			body{
				background-image: url(img/1.jpg);  /* 选择图片路径*/
				background-repeat: no-repeat;/* 不允许图片重复 */
				background-size: cover;/* 图片平铺 */
			}
			/* 设置表格样式 */
			table{
				
			}
			/* 设置行高 */
			tr{
				height: 50px;
			}
			/* 设置单元格样式 */
			td{
				width: 100px;/* 设置行宽 */
				border: solid 1px;/* 设置边框线 */
				border-radius: 10px;/* 设置边框角度 */
				text-align: center;/* 设置字体的位置 */
				background-color: orange;/* 设置背景颜色 */
				font-weight: bold;/* 加粗字体 */
				letter-spacing: 10px;/* 字体与字体之间的间隙 */
			}
/* --------------------------------------------------------------------- */
			/* 列表样式学习 */
			ul{
				background-color: gray;/* 设置列表的背景颜色为灰色 */
				height: 50px;/* 设置列表的高度 */
			}
			li{
				list-style-type: none;/* 设置列表前边的黑点消失 */
				float: left;/* 设置每个列表选项靠左 */
			}
			li a{
				font-weight: bold;/* 设置字体加粗 */
				font-size: 20px;/* 字体大小 */
				color: blue;/* 颜色 */
				margin-left: 20px;/* 设置每对字体间的间隔 */
				position: relative;/* 设置字体相对于列表的位置 */
				top:10px;/* 设置字体距离列表上方的距离 */
			}
		</style>
	</head>
	<body>
		<h3>css常用样式学习</h3>
		<hr>
		<table>
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>爱好</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="">java</a></li>
			<li><a href="">python</a></li>
			<li><a href="">c#</a></li>
		</ul>
	</body>
</html>

实现结果：
在这里插入图片描述
图片案例
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body{
				text-align: center;
				background-color: gray;
			}
			img{
				width: 12%;
				height: 200px;
				border: solid 1px;
				padding: 10px;/* 设置内容和边框之间的距离 */
				background-color: white;
				transform: rotate(-10deg);/* 设置旋转的角度 */
				margin: 20px;
			}
			img:hover{
				transform: rotate(0deg) scale(2);/* 设置照片旋转的角度（正数是顺时针旋转，负数逆时针旋转） scale是放大的倍数 */
				z-index: 1;/* 设置图片显示的优先级 */
				transition: 1.5s;/* 设置旋转的时间 */
			}
		</style>
	</head>
	<body>
		<br><br><br><br><br>
		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
		<img src="img/4.jpg" alt="">
		<br>
		<img src="img/5.jpg" alt="">
		<img src="img/6.jpg" alt="">
		<img src="img/7.jpg" alt="">
		<img src="img/8.jpg" alt="">
	</body>
</html>

实现结果

在这里插入图片描述
光标放在图片上会有不同的效果**（火狐浏览器打开，多尝试几个浏览器）**

盒子模型案例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型案例</title>
		<style type="text/css">
			div{
				 height: 300px;
				 width: 300px;
				 margin-left: 20px;
			}
			#header,#tail{
				width: 700px;
				margin: auto;
				margin-top: 50px;
			}
			#div01{
				border: solid 1px orange;
				float: left;
			}
			#div02{
				border: solid 1px blue;
				float: left;
			}
			#div03{
				border: solid 1px red;
				float: left;
			}
			#div04{
				border: solid 1px purple;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div id="div01">
				我是div01
			</div>
			<div id="div02">
				我是div02
			</div>
		</div>
		<div id="tail">
			<div id="div03">
				我是div03
			</div>
			<div id="div04">
				我是div04
			</div>
		</div>
	</body>
</html>

实现结果：
在这里插入图片描述

异时空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS样式学习

CSS简介什么是 CSS?CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个CSS 实例CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property
复制链接

扫一扫

专栏目录