CSS简单用法与讲解

最新推荐文章于 2024-06-12 12:52:53 发布

行动代号Run

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量116

点赞数

分类专栏： JavaEE 文章标签： css

本文链接：https://blog.csdn.net/weixin_49715711/article/details/108063256

版权

JavaEE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS简单用法与讲解

CSS简单用法与讲解

CSS简单用法与讲解

层叠样式表，美化网页

引入CSS的三种方式

在这里插入图片描述

标签上添加style属性

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<title>标签上添加style属性</title>
	</head>
	<body>
<!--div样式: 
	添加2px红色边框 border: 1px solid #999;  字体大小为30px  font-size: 30px; 字体为微软雅黑 font-family: 微软雅黑; 设置字体加粗 font-weight: bold; 设置字体斜体 font-style: italic; -->
		<div style="border: 1px solid #999;" font-size: 30px; font-family: 微软雅黑; font-weight: bold; font-style: italic;>
			标签上添加style属性
		</div>
	</body>
</html>

通过CSS标签引入CSS

<!DOCTYPE HTML>
<html>
	<head>
		<title>通过CSS标签引入CSS</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

		<style>
			td{
                <!--表格文字居中-->
				text-align: center;
                 <!--字体颜色-->
				color:#00f0f0;
			} 
		</style>

	</head>
	<body>
		<h2>使单元格内文字居中显示</h2>
		<br/>
		<br/>
		<table>
			<caption>我是表格1</caption>
			<tr>
				<th>单元格1</th>
				<th>单元格2</th>
				<th>单元格3</th>
				<th>单元格4</th>
			</tr>
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
			</tr>
		</table>

	</body>
</html>

引入外部CSS文件

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="1.css" />
	</head>
	<body>
		<!-- 通过link标签引入外部的css文件
			给标签p样式如下： 
					边框: 1px blue solid;
					字体大小: 30px; -->
		<div>
			这是一个div
		</div>
		
		<span>这是span1</span>
		<span>这是span2</span>
		<span>这是span3</span>

		<p>这是p1</p>
		<p>这是p2</p>
		<p>这是p3</p>
		
	</body>
</html>

/*
	1.css中代码
*/
p{
    border: 1px solid blue;
	font-size:30px;
}

CSS选择器

基本选择器

1.标签名选择器

格式：标签{

}

span{
		background-color:#DDA0DD;
		font-size:20px;
	}

2.类选择器

格式：. 类名{

}

.c1{
		background-color: #8FBC8F;
		color:green;
	}

3.id选择器

格式：# id名{

}

#d1{
		font-weight: bold;
		text-indent: 20px;
	}

扩展选择器

1.后代选择器(包括孙子辈)

格式：父选择器后代选择器{

}

代码演示结果为：

标签中所有标签都被选中

<div id="d1">
			这是一个div。
			<span>div下的span内容。</span>
			<font>
				这是一个font。
				<span>font下的span内容。</span>
			</font>
		</div>

#d1 span{
			font-size:22px;
			background-color: #DDA0DD;
		}

2.子元素选择器（只包括子辈，不包括孙子辈）

格式：父选择器子元素选择器{

}

或

父选择器 >子元素选择器{

}

标签子代标签被选中
标签中标签没有被选中

<div id="d1">
			这是一个div。
			<span>div下的span内容。</span>
			<font>
				这是一个font。
				<span>font下的span内容。</span>
			</font>
		</div>

#d1>span{
			background-color: #DEB887;
			font-size:30px;
		}

3.分组选择器(可同时选中多个标签)

格式：第一个标签，第二个标签，… ，第N个标签{

}

.c1, .c2{
			background-color: #F4A460;
		}

4.属性选择器

格式：*[class]{
表示所有带有class类标签的内容
}

input[type=“text”]{
表示所有文本类型的input
}

*[class]{
			border: 2px solid gray;		
		}

input[type="text"]{
					background-color: red;
					text-indent: 10px;
				}

5.相邻兄弟选择器

格式：#p1+p{
表示与p1标签相邻的p标签
}

<p id="p1">
	ppp111<span>p1-span1</span>xxxxxx
</p>
<p>
	ppp222
</p>

#p1+p{
		background-color: #DB7093;
	}

6.伪元素选择器

格式：标签：状态{

}

状态表示：

link : 未点击时状态
hover : 鼠标悬停时状态
active : 表示元素被点击时状态
visited : 表示元素被点击后状态

a:active{
			color:#8FBC8F;
			font-size:50px;
			text-decoration: none;/* 无下划线 */
		}

```

#p1+p{
		background-color: #DB7093;
	}

6.伪元素选择器

格式：标签：状态{

}

状态表示：

link : 未点击时状态
hover : 鼠标悬停时状态
active : 表示元素被点击时状态
visited : 表示元素被点击后状态

a:active{
			color:#8FBC8F;
			font-size:50px;
			text-decoration: none;/* 无下划线 */
		}

行动代号Run

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简单用法与讲解

CSS简单用法与讲解层叠样式表，美化网页引入CSS的三种方式标签上添加style属性<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>标签上添加style属性</title> </head> <body><!--div样
复制链接

扫一扫