2025.1.20 CSS基础

1、语法：
选择器{
属性：值；
属性：值；
...
}
例如：

<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
	color:red;
	text-align:center;
} 
</style>
</head>

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

结果：

2、选择器
（1）id选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
例如：

<html>
<head>
<meta charset="utf-8"> 
<style>
#para1 
{
	text-align:center;
	color:red;
} 
#para2{
	text-align:right;
	color:lightblue;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p id="para2">这个段落不受该样式的影响。</p>
</body>
</html>

结果：
（2）class选择器：
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
例如：

<html>
<head>
<meta charset="utf-8"> 
<style>
.center {
   text-align:center;
}
.color {
   color:#ff0000;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p> 
</body>
</html>

结果：

posted @ 2025-01-20 15:11  呓语-MSHK  阅读(12)  评论(0)    收藏  举报