前端入门学习笔记六十五

物恰冰可乐

已于 2022-12-09 09:25:08 修改

阅读量345

点赞数

分类专栏：前端文章标签：前端学习 javascript

于 2022-12-09 09:17:54 首次发布

本文链接：https://blog.csdn.net/m0_65384293/article/details/128247192

版权

前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>CSS 分组 和 嵌套 选择器 </title> 
		<style type = "text/css">
		h3,p
		{
			color:plum;
		}
		</style>
	</head>
	<body>
		<h3>分组选择器</h3>
		<h3>HTML</h3>
		<p>CSS</p>
	</body>
</html>

CSS 分组和嵌套选择器
分组选择器
在样式表中有很多具有相同样式的元素

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>菜鸟教程(runoob.com)</title> 
		<style type = "text/css">
		p
		{
			color:skyblue;
			text-align:center;
		}
		.marked
		{
			background-color:plum;
		}
		.marked p
		{
			color:deepskyblue;
		}
		p.marked{
		    text-decoration:peachpuff;
		}
		</style>
	</head>
	<body>
		<p>HTML</p>
		<div class="marked">
		<p>css</p>
		</div>
		<p>盗墓笔记</p>
		<p class="marked">沙海</p>
	</body>
</html>

CSS 分组和嵌套选择器
嵌套选择器
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>输入框（input） 样式</title> 
		<style type = "text/css">
		input {
		  width: 80%;
		}
		</style>
	</head>
	<body>
		<p>输入框（input） 样式</p>
		<form>
		  <label for="fname">前端成绩查询:</label>
		  <input type="text" id="fname" name="fname">
		</form>
	</body>
</html>

CSS 表单
输入框（input）样式

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>输入框（input） 颜色</title> 
		<style  type = "text/css">
		input[type=text] {
		  width: 90%;
		  padding: 20px 23px;
		  margin: 9px 2;
		  box-sizing: content-box;
		  border: pink;
		  background-color: plum;
		  color: deepskyblue;
		}
		</style>
	</head>
	<body>
		<p>设置输入框颜色:</p>
		<form>
		  <label for="fname">盗墓笔记查询:</label>
		  <input type="text" id="盗墓笔记" name="沙海" value="沙海">
		  <label for="lname">终极笔记查询:</label>
		  <input type="text" id="盗墓笔记" name="重启之极海听雷" value="重启之极海听雷">
		</form>
	</body>

输入框（input）颜色
属性用于修改文本颜色：background-colorcolor

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>垂直居中对齐 - 使用 padding</title> 
		<style type = "text/css">
		.center {
		    padding: 300px 2;
		    border: 10px solid blue;
		}
		</style>
	</head>
		<body>
			<h2>HTML</h2>
			<p>CSS</p>
			<div class="center">
			<p>JS</p>
			</div>
		</body>
</html>