首页 前端知识 【CSS3】css开篇基础(1)

【CSS3】css开篇基础(1)

2024-10-15 23:10:51 前端知识 前端哥 399 291 我要收藏

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣,记得关注我👀👀以便不错过每一篇精彩。

当然,如果在阅读中发现任何问题或疑问,我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力,一起进步!

加油,一起CHIN UP!💪💪

🔗个人主页:E绵绵的博客
📚所属专栏:

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练,巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我,提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点,提升数据库管理能力

6.html5知识点专栏

        学习前端知识,更好的运用它

7. css3知识点专栏

        在学习html5的基础上更加熟练运用前端

📘 持续更新中,敬请期待❤️❤️

2. CSS语法

<head>
	<style>
		选择器{
			属性名:属性值;
			属性名:属性值;
		}
	</style>
</head>
  • 选择器:要修饰的对象(东西)
  • 属性名:修饰对象的哪一个属性(样式)
  • 属性值:样式的取值

在前端开发中,单引号(')和 双引号(")在大多数情况下是没有功能上的区别的,它们都可以用来表示字符串, 无论是在 HTML 属性、CSS 样式或 JavaScript 中,使用单引号和双引号的效果基本相同

css和html不分大小写,JavaScript 区分大小写。

3.选择器 

选择器分为 基础选择器复合选择器 两个大类,我们这里先讲解一下基础选择器
 

基础选择器是由单个选择器组成的,基础选择器包括 标签选择器、类选择器、id选择器和通配符选择器

标签选择器 

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。


作用:
标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签


优点
能快速为页面中同类型的标签统一设置样式


缺点
不能设计差异化样式,只能选择全部的当前标签

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 使用标签选择器对 p 标签应用样式 */
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

<body>

    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>

</body>

</html>

类选择器 

CSS 中的类选择器用于选取具有特定类名的 HTML 元素。类选择器在 CSS 中使用一个点号(.)后跟类名来定义。

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 定义一个类选择器,选取 class 为 .highlight 的元素 */
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <p class="highlight">这个段落有一个高亮的背景。</p>
    <p>这个段落没有高亮。</p>
    <p class="highlight">这个段落也有高亮。</p>

</body>

</html>

 一个标签元素可以同时拥有多个类,但必须使用空格分隔:

​
<!DOCTYPE html>
<html>

<head>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }

        .important {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p class="highlight important">这是一个既高亮又重要的段落。</p>


</body>

</html>

​

 

id 选择器 

CSS 中的 ID 选择器用于选取具有特定 id 属性的元素,ID 选择器在 CSS 中使用井号(#)后跟 ID 名称来定义。每个 id 在页面中是唯一的,因此 ID 选择器通常只能应用于单个元素。

在 HTML 中,每个 id 属性值只能在页面中使用一次,但页面中可以有多个不同的 id 值。换句话说,每个元素的 id 必须是独一无二的,但你可以为页面中的不同元素赋予各自不同的 id。 

<!DOCTYPE html>
<html>

<head>
    <style>
        #header {
            background-color: lightblue;
        }

        #main {
            font-size: 18px;
        }

        #footer {
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="header">这是头部。</div>
    <div id="main">这是主要内容。</div>
    <div id="footer">这是底部。</div>

</body>

</html>

在这个例子中,headermainfooter 是不同的 id,它们各自对应一个唯一的元素。你可以在页面中定义任意数量的不同 id,但每个 id 只能用于一个元素。

通配符选择器 

通配符选择器(*)是 CSS 中的一种选择器,能够选取页面中的所有元素。它常用于应用一些全局的样式,比如重置页面的默认样式或设置所有元素的通用属性。

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 通配符选择器将应用于页面中的所有元素 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>

  <h1>标题</h1>
  <p>这是一个段落。</p>
  
</body>
</html>

 

在这个例子中,* 选择器会将所有元素标签中的 marginpadding 设置为 0box-sizing 设置为 border-box,从而影响页面中的所有元素。这通常用于重置浏览器的默认样式或进行全局样式调整。 

虽然通配符选择器很强大,但它可能会影响性能,尤其是在大型页面上,因为它会选取所有元素。使用时应谨慎,确保只在确实需要的地方使用。所以通常我们对它进行使用的很少

4.CSS 字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。

font-family

font-family 用于设置字体系列。可以为文本指定一种或多种字体,如果浏览器不支持首选字体,会使用后备字体。如果都不支持,则使用通用字体 sans-serif


1.各种字体之间必须使用英文状态下的逗号隔开


2.一般情况下,如果有空格隔开的多个单词组成的字体,加引号“ ”.


3.尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示


4.最常见的几个字体

​
body{
font-family:"Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';
 }

​

注意可以使用把英文转换为中文如微软雅黑,但必须对中文加引号“”。

font-size 

 CSS 使用 font-size 属性定义字体大小。

h1 {
  font-size: 24px;
}
p {
  font-size: 14px;
}

px(像素)大小是我们网页的最常用的单位


谷歌浏览器默认的文字大小为16px


不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小

我们可以给 body指定整个页面文字的大小,当然这对标题的字体大小是没影响的,它优先级高于body的字体大小优先级,必须指定对 h标签 进行修改才会有所改变。(同样这在文本字体的粗细中同样适用)

font-weight

CSS 使用 font-weight属性设置文本字体的粗细,

常用值:

  • normal: 默认字体粗细
  • bold: 粗体
  • 数值 (100 - 900):例如 font-weight: 700; 是粗体,400 通常是正常字体。
h1 {
  font-weight: bold;
}
p {
  font-weight: 300;
}

实际开发时,我们更喜欢用数字表示粗缩。

font-style 

font-style 用于设置字体的样式,如斜体或正常字体。

常用值:

  • normal: 正常字体
  • italic: 斜体
p {
  font-style: italic;
}

注意:平时我们很少给文字加斜体,反而要将斜体标签改为不倾斜字体。

字体复合属性 

字体属性可以把以上文字样式综合来写,这样可以更节约代码:

body {
font: font-style  font-weiqht font-size/line-height font-family;
}

使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开

不需要设置的属性可以省略(取默认值),但必须保留font-size和 font-family属性,否则font 属性将不起作用

body {
      font: italic 500  16px/1.5  "Arial", sans-serif; /* 使用字体复合属性 */
    }

5.CSS 文本属性 

CSS 文本属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距

 color

 color用于设置文本的颜色。


 其表示有如下三种形式:


当然我们不用管用哪种形式,在vscode中我们能自己选颜色,比较便捷,如下图,所以无需太在意。

 常见的颜色设置代码:

h1 {
  color: red; /* 使用颜色关键字 */
}

 text-align 

text-align 属性用于设置元素内文本内容的水平对齐方式。

常用值:

  • left: 左对齐
  • right: 右对齐
  • center: 居中对齐
  • justify: 两端对齐
h3 {
  text-align: center; /* 设置三级标题文本居中 */
}

text-decoration 

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、制除线、上划线等

div {
text-decoration: underline:
}

注意删除线和上划线几乎不用,而下划线和默认很常用。

此外链接都是自带下划线,如果我们想要去掉下划线,就要将链接的decoration修饰为none。

a{
text-decoration: none;
}

 text-indent

text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。

div {
text-indent:10px;
}

通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值(负值情况是有但不能用)。

p {
text-indent:2em;
}

em 是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照默认的1个文字大小

以下就是发生缩进的现象: 


 line-height

line-height属性用于设置行间的距离(行高)。可以控制文字 行与行之间的距离。

p{
line-height:26px;
}

 当我们设置行间距为26px时,字体大小为16px,行间距代表如下:

那么怎么精准测量好行间距呢?

这是一段文字,我们只要算好上面一行文字的底部到下面一行文字的底部的距离,那就是行间距。

 一般情况下,我们都是设置行间距为1.5em,这样比较舒服。

6.css引入方式 

在 CSS 中,有三种主要的方式可以将样式引入到 HTML 文档中:行内样式表内部样式表外部样式表。下面详细介绍每种引入方式:

内部样式表 

内部样式表使用 <style> 标签将 CSS 样式嵌入到 HTML 文档的 <head> 部分。这种方式适合单个页面的样式控制,样式集中在一个地方。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内部样式表示例</title>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      font-size: 24px;
    }
    p {
      color: darkgreen;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>
</html>

 

优点:

  • 所有样式集中在 HTML 文档中,容易控制和修改单个页面的样式。
  • 可以定义整个页面的样式,不需要每个元素都写内联样式。

缺点:

  • 样式只对当前页面有效,不易复用。
  • 当页面内容变多时,内联样式表可能使 HTML 文件体积过大。

 行内样式表

内联样式直接在 HTML 标签的 style 属性中定义,用于为特定的 HTML 元素设置样式。这种方式优先级最高,但通常不建议大量使用,因为它会导致样式分散,维护困难。

<p style="color: red; font-size: 20px;">这是一个红色的大号段落。</p>

优点:

  • 适合快速修改单个元素的样式。
  • 直接在元素内定义样式,优先级高。

缺点:

  • 不利于维护,样式和内容耦合。
  • 不适合大规模的样式控制。

外部样式表 

外部样式表将 CSS 写在一个独立的 .css 文件中,通过 <link> 标签将其引入 HTML 文档。这种方式是最常用的,适合多页面网站的样式管理。

<link rel="stylesheet" href="css文件路径">

 注意该文件路径应是相对路径。

下面是个例子: 

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部样式表示例</title>
  <link rel="stylesheet" href="styles.css"> <!-- 引入外部样式表 -->
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>
</html>

 外部 CSS 文件(styles.css):

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  font-size: 24px;
}

p {
  color: darkgreen;
  font-size: 18px;
}

我们发现外部css文件中不用style标签。

优点:

  • 样式与 HTML 内容分离,便于维护和复用。
  • 适合多页面网站,多个页面可以共享同一个样式文件。
  • 能减少 HTML 文件的体积,页面加载时会缓存 CSS 文件,提高性能。

缺点:

  • 需要发出额外的 HTTP 请求获取外部 CSS 文件(可以通过浏览器缓存减小影响)。
  • 对于单页应用,可能不如内部样式方便。

三种引入方式比较 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18967.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!