CSS学习之选择器,样式表,背景,文本,字体

最新推荐文章于 2022-09-12 18:23:40 发布

Logbook怪

最新推荐文章于 2022-09-12 18:23:40 发布

阅读量604

点赞数

本文链接：https://blog.csdn.net/aaaaaab_/article/details/88813449

版权

本文详细介绍了CSS的基础知识，包括CSS的作用、语法和注释，重点讲解了id和class选择器、标签选择器、CSS的四种方式优先级以及各种选择器的补充。此外，还涵盖了CSS样式表的三种类型，以及背景颜色、背景图像的设置。同时，文章详细阐述了文本颜色、对齐方式、修饰、转换和缩进等文本格式相关属性，帮助读者全面理解CSS在网页设计中的应用。

摘要由CSDN通过智能技术生成

CSS是什么?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素,样式通常存储在样式表中
外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述
选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS注释

注释是用来解释你的代码，并且可以随意编辑它，添加注释是增加代码的可读性,浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

CSS的id和class选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>id和class</title> 
<style>
.center
{
	text-align:center;
}
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p id="para1">Hello World!</p>
</body>
</html>

在这里插入图片描述

CSS标签选择器

即以 html 标签作为 css 修饰所用的选择器。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS实例</title> 
<style>
p
{color: red; text-align: center;} 
</style>
</head>
<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>

在这里插入图片描述

直接在标签内部加入CSS代码

<h3 style="color:red;">CSS样式</h3>

CSS四种方式优先级

直接在标签内部写代码 > id > class > 标签选择器

CSS样式选择器补充

包含选择器

包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{…}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

包含选择器补充

包含选择器除了有 A B{…} 的形式外（A和B都是标签），还可以有这种形式：.A B{…} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。

<style>
.first span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>
</body>