（CSS入门）css语法+选择器

最新推荐文章于 2024-07-25 08:14:42 发布

mcl19909949541

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量115

点赞数

分类专栏： HTML+CSS 文章标签： css html javascript web html5

本文链接：https://blog.csdn.net/qq_52290436/article/details/119356449

版权

HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS 简介

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

在这里插入图片描述

CSS 语法

CSS 规则集（rule-set）由选择器和声明块组成：
在这里插入图片描述选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
eg：
在此例中，所有

元素都将居中对齐，并带有红色文本颜色：

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

CSS 选择器

CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。
在这里，页面上的所有

元素都将居中对齐，并带有红色文本颜色：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>

</body>
</html>

在这里插入图片描述

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>

</body>
</html>

在这里插入图片描述

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
在此例中，所有带有 class=“center” 的 HTML 元素将为红色且居中对齐：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 

</body>
</html>

在这里插入图片描述

CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

下面的 CSS 规则会影响页面上的每个 HTML 元素：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>

</body>
</html>

在这里插入图片描述

CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p>

</body>
</html>

在这里插入图片描述

mcl19909949541

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（CSS入门）css语法+选择器

CSS 简介CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中body { background-color: lightblue;}h1 { color: white; text-align: center;}p { font-family: verdana; font-size: 20px
复制链接

扫一扫