HTML CSS 选择器

最新推荐文章于 2023-12-12 09:35:39 发布

一只技术白

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量119

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_42073620/article/details/94009568

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML CSS 选择器

文章目录

HTML CSS 选择器

CSS 概述

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

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

内部样式表(本文所讲)

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head>
	<style type="text/css">
		body {background-color: red}
		p {margin-left: 20px}
	</style>
</head>

内联样式（不推荐）

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<body>
	<p style="color: red; margin-left: 20px">
		This is a paragraph
	</p>
</body>

CSS 语法

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

 selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。

color值的不同写法

英文单词描述颜色

p { color: red; }

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：（按RGB顺序各2位）

p { color: #ff0000; }

为了节约字节，我们可以使用 CSS 的缩写形式：（不推荐）

p { color: #f00; }

我们还可以通过两种方法使用 RGB 值：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

选择器

优先级: id > class > 标签

1.标签选择器

标签选择器定义

	<head>
		<meta charset="UTF-8">
		<title>CCS样式练习</title>
		<style>
			/*标签选择器*/
			h1{
				color: greenyellow;
				font-size: 19px;
			}
			p{
				text-align: center;
  				color: green;
  				font-family: arial;
			}
			body{
				margin: 0;
				padding: 0;
			}			
		</style>
	</head>

标签

	<body>
		<img src="img/IMG_6975.JPG" width="540" height="611"/>
		<h1 class="myClass">你好年轻人</h1>
		<p class="myClass">
			床前明月光 疑是地上霜 举头望明月 低头思故乡			
		</p>
		<p id="myp">
			床前明月光 疑是地上霜 举头望明月 低头思故乡
		</p>
	</body>

2.类选择器

类选择器以一个点号显示
Class选择器定义

	<head>
		<meta charset="UTF-8">
		<title>CCS样式练习</title>
		<style>
			/*类选择器*/
			.myClass{
				font-size: 20px;
			}
		</style>
	</head>

指定类

	<body>
		<h1 class="myClass">你好年轻人</h1>
		<p class="myClass">
			床前明月光 疑是地上霜 举头望明月 低头思故乡			
		</p>		
	</body>

3.ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
id选择器定义

	<head>
		<meta charset="UTF-8">
		<title>CCS样式练习</title>
		<style>
			/*id选择器*/
			#myp{
				color: yellow;
			}			
		</style>
	</head>

指定id

	<body>
		<p id="myp">
			床前明月光 疑是地上霜 举头望明月 低头思故乡
		</p>	
	</body>

最后效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CCS样式练习</title>
		<style>
			/*优先级:id>class>标签*/
			/*标签选择器*/
			h1{
				color: greenyellow;
				font-size: 19px;
			}
			p{
				text-align: center;
  				color: green;
  				font-family: arial;
			}
			body{
				margin: 0;
				padding: 0;
			}
			/*类选择器*/
			.myClass{
				font-size: 20px;
			}
			/*id选择器*/
			#myp{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<img src="img/IMG_6975.JPG" width="540" height="611"/>
		<h1 class="myClass">你好年轻人</h1>
		<p class="myClass">
			床前明月光 疑是地上霜 举头望明月 低头思故乡			
		</p>
		<p id="myp">
			床前明月光 疑是地上霜 举头望明月 低头思故乡
		</p>
	</body>
</html>

在这里插入图片描述