CSS学习篇（一）

原创已于 2023-01-02 11:55:39 修改 · 175 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #css3

于 2023-01-02 11:44:12 首次发布

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS在网页样式设计中的作用，包括id和class选择器的用法，以及外部、内部和内联样式的区别。此外，还详细讲解了背景属性，如背景颜色、图片、重复、附件和位置的设置，帮助理解CSS如何控制网页视觉效果。

CSS一

首先先简单谈谈CSS吧
CSS主要是网页的样式设计，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS注释以 /* 开始, 以 */ 结束

/* hello  */

一、id 和 class 选择器

id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css练习</title> 
<style>
#stt
{
	text-align:center;
	color:blue;
} 
</style>
</head>

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

示例如下：
示例如图
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示。
下面展示一下class选择器的使用方法
1.如果仅使用 .xxx 那么将对所有的语句起作用

<style>
.center
{
	text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>

在这里插入图片描述
2.如果加以限制 eg. p.xxx

<style>
p.center
{
	text-align:center;
}
</style>
</head>
<body>
<h1 class="center">不受影响</h1>
<p class="center">居中对齐。</p> 
</body>

在这里插入图片描述

二、样式表

样式表分为外部样式表、内部样式表和内联样式
1.外部样式表

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

2.内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用

<head>
<style>
hr {color:blue;}
p {margin-left:20px;}
body {background-image:url("xxx");}
</style>
</head>

3.内联样式
当样式仅需要在一个元素上应用一次时要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性
eg.

<p style="color:sienna;margin-left:20px">hello！</p>

还可应用多重样式
但是应注意多重样式的优先级关系，一般情况下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="xxx/style.css"/>
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
</head>
<body>
<h3>显示绿色，是内部样式</h3>
</body>

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，eg.：

<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="xxx/style.css"/>
</head>
<body>
<h3>显示蓝色，是外部样式</h3>
</body>

两个例子结果如下：
在这里插入图片描述

三、background

属性
background-color 背景颜色
background-image 背景图片
background-repeat 重复背景
background-attachment 背景固定
background-position 背景位置

颜色即用十六进制数来表示 eg.#ff0000

背景图片

<style>
body
{
	background-image:url('2023.jpg');
}
</style>

对于平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，不够美观

<style>
body
{
	background-image:url('2023.jpg');
	background-repeat:repeat-x;
}
</style>

这样可以使得图片平铺效果更自然，不会产生水平或垂直堆叠

而对于鲜艳的背景而言，不免会影响文字的阅读效果。因而，使用background-position来定义背景的位置可很好地解决这个问题。

<style>
body
{
	background-image:url('2023.jpg');
	background-repeat:no-repeat;
	background-position:right top;  /*背景在右边就不会遮挡左边的文字（根据自己需要调整位置）*/
	margin-right:200px;
}
</style>

background-attachment 可实现背景固定

<style>
body 
{
background-image:url('2023.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>

eg.
左右可对比背景图片固定没有移动
背景置右便不会影响阅读
在这里插入图片描述
今天就先说这么多吧
2023了祝大家新年快乐
新年伊始
昨天就当是个开始吧大胆追求喜欢的吧
2023请对我好一点吧❤️

以上仅是个人感慨，与网页的格式无关
css学习篇会一直更下去
希望喜欢的朋友们点赞收藏加关注