css基础入门

最新推荐文章于 2023-02-18 17:12:36 发布

hello_xujj

最新推荐文章于 2023-02-18 17:12:36 发布

阅读量46

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/xjj19999272/article/details/116132784

版权

CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

CSS基础知识

前端三层

前端学习中重要的三个语言HTML、CSS、JavaScript，各自的功能如下表所示：

	语言	功能
结构层	HTML	搭建结构、放置部件、描述语义
样式层	CSS	美化页面、实现布局
行为层	JavaScript	实现交互效果、数据收发、表单验证等

CSS3简介

CSS（cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言。CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等。

CSS使样式和结构分离，样式和结构不用“杂糅着写”，而是彼此分开：HTML就负责结构，CSS负责样式。二者通过选择器结合。

CSS的本质

CSS就是样式的“清单”，要书写合适的选择器，然后把指定元素的样式“一条一条罗列”出来。

CSS没有加减乘除、与或非、循环、选择、判断，CSS不是 “编程”，就是简单直接的罗列样式。因此在CSS学习中背诵CSS属性是非常重要的，属性背诵熟练程度决定了做网页的速度。

CSS3的书写位置

在CSS3中，样式表的书写方法一共有四种。

内嵌式

在学习CSS时，最常使用的是内嵌式，顾名思义内嵌式就是内嵌在.html文件中在<head></head>标签对中，书写<style></style>标签对，里面书写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>CSS3书写位置</title>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>学习内嵌式</h1>
</body>
</html>

外链式

外链式是将CSS单独存为.css文件，然后使用<link>标签引入它。示例代码如下：

CSS示例代码：

h1 {
    color: green;
}

html示例代码：

<!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>外链式</title>
    <link rel="stylesheet" href="CSS/CSS.CSS">
</head>
<body>
    <h1>外链式</h1>
</body>
</html>

实际上可以发现在html文件中只写了这样一行<link rel=“stylesheet” href=“CSS/CSS.CSS”>代码，link是关联的意思，rel是英文relationship（关系）的缩写，stylesheet是样式表的意思。也就是说引用的文件跟原文件的关系是样式表。外链式的优点：多个html网页，可以共用一个css样式表文件。

导入式

导入式是最不常见的样式表导入方法，这是因为使用导入式引入的样式表，不会等待css文件加载完毕，而是

会立即渲染HTML结构，所以页面不会立即被渲染。示例代码如下：

<!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>导入式</title>
    <style>@import url(CSS/CSS.CSS);</style>
</head>
<body>
    <h1>导入式</h1>
</body>
</html>

行内式

样式可以直接通过style属性写在标签身上，缺点是行内式牺牲了样式表的批量设置样式的能力，只能给一个标

签设置样式，所以不常用，优点是可以只给单个标签设置样式，所以后台工程师经常使用行内式。示例代码如下：

<body>
    <h1 style="color: red;">行内式</h1>
    <h2 style="color: yellow;">行内式</h2>
</body>

CSS3的基本语法

看下面示例代码：

<style type="text/css">
    h2 {
        /* 设置文件字号 */
        font-size: 30;
        color: green
    }
    p {font-size: 20px;background-color: orange}
</style>

在上面代码中，h2和p都是选择器，后面跟大括号，在大括号里面是属性名+冒号+空格+属性名+分号，需要注意的是冒号和分号都是英语。

最后一条样式可以不书写分号。

也可以没有换行。

CSS3的注释是/* */，按ctrl+/可以快速输入。

hello_xujj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础入门

CSS基础知识前端三层前端学习中重要的三个语言HTML、CSS、JavaScript，各自的功能如下表所示：语言功能结构层HTML搭建结构、放置部件、描述语义样式层CSS美化页面、实现布局行为层JavaScript实现交互效果、数据收发、表单验证等CSS3简介CSS（cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言。CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等。CSS使样式
复制链接

扫一扫