前端入门篇 | CSS基础

最新推荐文章于 2024-08-14 20:13:10 发布

鹤茗_515

最新推荐文章于 2024-08-14 20:13:10 发布

阅读量475

点赞数 8

分类专栏： web软件文章标签：前端 css

本文链接：https://blog.csdn.net/m0_55483876/article/details/141019663

版权

下一篇持续更新中… 如有错误欢迎指正！！！

文章目录

前言
- 学习目标
- 学习内容
CSS的相关概念
CSS基础选择器
CSS字体属性
CSS文本属性
CSS的引入方式
- CSS的3种样式表
综合案例
Chrome调试工具

前言

学习目标

在这里插入图片描述

学习内容

在这里插入图片描述

CSS的相关概念

CSS的主要使用场景就是美化网页，布局页面的。

HTML的局限性

HTML只关注内容的语义，比如< h1 >表明这是一个大标题，< p >表明这是一个段落。< img >表明这有一个图片，< a >表明此处有链接。
虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐

CSS简介

CSS是层叠样式表。 Cascading Style Sheets的简称，有时我们也会称之为CSS样式表或级联样式表。
CSS也是一种标记语言。
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）、以及版面的布局和外观显示样式
CSS让网页更加丰富，可以美化HTML，让HTML更漂亮，让页面布局更简单。 HTML主要做结构，显示元素内容；CSS美化HTML，布局网页。
CSS最大价值是：由HTML专注去做结构呈现，样式交给CSS。即结构HTML与样式CSS相分离。

CSS语法规范

使用HTML时需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。 CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器是用于指定CSS样式的HTML标签。花括号内是对该标签该对象设置的具体样式
属性和属性值以“ 键值对 ”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文 “:” 分开。
多个“ 键值对 ”之间用英文 “;” 进行区分

CSS一般情况下，在< head >< /head >标签对中写；最常见的写法是写一个< style >< /style >标签。以后CSS就写在< style >标签中，常见的网页元素标签就写到< body >标签中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        p {
            color: red;
            /* 修改了文字大小为12像素 */
            font-size: 12px;
        }
    </style>
</head>

<body>
    <p>有点意思</p>
</body>

</html>

CSS代码风格
以下代码书写风格不是强制规范，而是符合实际开发书写方式。

CSS基础选择器

CSS选择器的作用

在这里插入图片描述
选择器（选择符）就是根据不同需求，把不同的标签选出来，这就是选择器的作用。简单来说就是选择标签用的。选对人，做对事。

CSS选择器分类

选择器分为基础选择器和复合选择器两个大类。我们这里先说一下基础选择题。

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

标签选择器

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

标签名 {
属性1:属性值;
属性2:属性值;
属性3:属性值;
...
}

在这里插入图片描述

类选择器

如果想要差异化，选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。类选择器在HTML中以class属性表示。在CSS中，类选择器一个点 “.” 号显示
在这里插入图片描述

//结构需要用class属性来调用class类的意思
.类名 {
	属性1:属性1;
	...
}

.object {
	color:red;
}

<div class="object">变红色</div>

综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="red">
    </div>
    <div class="green">
    </div>
    <div class="red">
    </div>
</body>

</html>

在这里插入图片描述

类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签儿。这个标签就可以分别具有这些类名的样式。简单理解就是一个标签有多个名字

多类名使用方式

<div class="red font20">亚瑟</div>

在标签class属性中写多个类名。
多个类名，中间必须用空格分开。
这个标签就可以分别具有这些类名的样式。

多类名开发中使用场景

可以把一些标签元素相同的样式（共同的部分）放到一个类里面。
这些标签都可以调用这个公共的类，然后再调用自己独有的类。
从而节省CSS代码，统一修改也非常方便。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

id选择器

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

id属性只能在每个HTML文档中出现一次

#id名 {
	属性1:属性值1;
	...
}

在这里插入图片描述

通配符选择器

在这里插入图片描述

基础选择器总结&对比

在这里插入图片描述

CSS字体属性

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

字体系列

CSS使用font-family属性定义文本的字体系列。

各种字体之间必须使用英文状态下的 “,” 隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保

最低0.47元/天解锁文章

鹤茗_515

关注

8
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端入门篇 | CSS基础

CSS的主要使用场景就是美化网页，布局页面的。CSS是层叠样式表。Cascading Style Sheets的简称，有时我们也会称之为CSS样式表或级联样式表。CSS也是一种标记语言。CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）、以及版面的布局和外观显示样式CSS让网页更加丰富，可以美化HTML，让HTML更漂亮，让页面布局更简单。HTML主要做结构，显示元素内容；CSS美化HTML，布局网页。
复制链接

扫一扫

专栏目录