《CSS基础入门篇》_css入门

作者：盐析白兔 | 2024-02-25 13:36:53

踩

css入门

一、CSS概念

CSS：是Cascading Style Sheets的英文缩写，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（如文字的字体、大小、对齐方式等）、图片的外形（如宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

二、CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，大体格式如下：

目前记住样式大概是由选择器，属性和值三部分构成，将在下面第四点选择器根据不同选择器具体展开介绍。

三、文字控制的属性

font-size----------控制文字的字号大小，需要加上px单位；

color---------------控制文字的颜色，只针对文字有效；

font-family-------设置文字的字体，中文需要用引号括着；

text-align---------设置文本水平对方式，值有三个：left center right。

四、选择器

1、选择器概念

在 CSS 中，选择器是选取需设置样式的元素的模式。

2、选择器类别

按照选择器的功能分为不同类别，常用的是元素选择器、类选择器和ID选择器，还有其他类型的选择器，如：集体选择器、属性选择器和后代选择器等，掌握各种选择器的用法，综合使用，创建出更精美的页面。

3、选择器具体介绍

3.1、元素选择器

概念：

元素选择器是最常见的 CSS 选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，注意元素选择器名字只能是html里原来拥有的名字，不能自定义。

设置元素选择器这里介绍两种使用方法：第一种是在具体某个元素内设置，第二种是在<head>标签里建<style>标签添加元素样式，然后在需要使用的元素中调用这个样式，

第一种举例如下：

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color:blue">这是一个一级标题标签所标记的文本内容，因为给文字控制属性中的颜色属性赋值bulr，所以我是蓝色的</h1>
    <h1>这是一个一级标题标签所标记的对比文本内容，无进行样式设置</h1>
    <p style="color:blue">这是一个段落标签所标记的文本内容，因为给文字控制属性中的颜色属性赋值bulr，所以我是蓝色的</p>
    <p>这是一个段落标签所标记的对比文本内容，无进行样式设置</p>
</body>
</html>

运行结果：

代码解析：

上面这段代码除去原来的html格式，只看<body>标签里的内容就行，当我们想对某个具体的元素进行样式设置时，如标题或段落中的文字，只需要在html元素的开始标签添加style="color(属性）:blur（值）"，注意要加双引号。

style 表示这一段的 css 样式内容，表示引入 css 的样式。

再举个例子介绍元素选择器的第二种使用方法。

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    h2{
        color:blue;
        background-color: coral;
    }
</style>
</head>
<body>
    <h2>我是在"<"head">"标签里设置样式的结果1</h2>
    <h2>我是在"<"head">"标签里设置样式的结果2</h2>
    <h3>我是

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/141092