CSS学习笔记--CSS语法与选择器

最新推荐文章于 2024-11-15 19:51:40 发布

nihui123

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量2.7k

点赞数

分类专栏： Web前端实战文章标签： css html javascript js

本文链接：https://blog.csdn.net/nihui123/article/details/117551921

版权

Web前端实战专栏收录该内容

1 篇文章 0 订阅

订阅专栏

导语
Css用于控制网页的样式和布局，指层叠样式表(Cascading Style Sheets),定义如何显示HTML的元素，这个样式通常存储在样式表中。在工作中通常使用的外部样式表，外部样式表被放到一个外部的CSS文件中，多个样式可以进行叠加。

文章目录

CSS语法

实例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<style>
			body {
				background-color: yellow;
			}
			h1 {
				font-size: 36pt;
			}
			h2 {
				color: blue;
			}
			p {
				margin-left: 50px;
			}
		</style>
	</head>

	<body>

		<h1>这个标题设置的大小为 36 pt</h1>
		<h2>这个标题设置的颜色为蓝色：blue</h2>

		<p>这个段落的左外边距为 50 像素：50px</p>

	</body>
</html>

在这里插入图片描述
实例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<style>
			body {
				background-color: tan;
			}

			h1 {
				color: maroon;
				font-size: 20pt;
			}

			hr {
				color: navy;
			}

			p {
				font-size: 11pt;
				margin-left: 15px;
			}

			a:link {
				color: green;
			}

			a:visited {
				color: yellow;
			}

			a:hover {
				color: black;
			}

			a:active {
				color: blue;
			}
		</style>
	</head>

	<body>

		<h1>这是标题</h1>
		<hr>

		<p>你可以看到这个段落是
			被设定的 CSS 渲染的。</p>

		<p><a href="https://www.runoob.com" target="_blank">这是一个链接</a></p>

	</body>
</html>

在这里插入图片描述

CSS 实例

Css 规则由两个主要的部分构成：选择器，以及一条或者是多条声明，如下图所示
在这里插入图片描述

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

Css的声明式通过大括号的方式进行声明，然后每个属性设置以分号结束

p{
    color:red;
    text-align:center;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p
{
	color:red;
	text-align:center;
} 
</style>
</head>

<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

CSS 选择器

如果要在HTML元素中设置Css样式，需要在元素中设置id和class选器

id选择器

id选择器课可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”定义。如下所示，样式规则应用于元素属性id=“para1”:

#para1
{
    text-align:center;
    color:red;
}

注意：ID属性不要以数字开头，数字的ID在Mozilla/FireFox浏览器中是不起作用的。

class选择器

Class选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class选择器在HTML中以class属性表示，在CSS中，类选择器以一个“.”用来标识；在下面例子中，所有拥有center类的HTML元素均为居中

.center {text-align:center;}

同样可以指定特定的HTML元素使用class

p.center {text-align:center;}

CSS 创建

当加载到样式表的时候，浏览器会根据对应的配置来格式化HTML文档，那么如何插入样式表呢？有如下的三种方式

外部样式表（External style sheet）
内部样式表（Internal style sheet）
内联样式（Inline style）

外部样式表

当样式需要应用到很多页面的时候，外部样式表将是最为理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签连接到样式表。<link>标签在文档的头部。如下

<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");}

注意：不要在属性值与单位之间留有空格

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。如下

<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>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从具体的样式表中被继承过来。如下，外部样式表中拥有对h3选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而在内部样式表中拥有针对会h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表连接，那么h3得到的样式是：

color:red;
text-align:right;
font-size:20pt;

多重样式优先级深入

优先级是浏览器通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定。优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每个选择器类型的数值决定

优先级顺序从低到高

通用选择器（*）
元素（类型）选择器
类选择器
属性选择器
伪类
ID选择器
内联样式

!important规则例外
当!important规则被应用在一个样式声明中时，该样式声明会覆盖Css中任何其他声明，无论它处在声明列表中的什么地方。尽管如此，!important规则还是与优先级毫无关系。使用!important并不是一个好习惯，因为它改变了样式表本来的级联规则，从而难以调试