CSS语法基础--简单入门

最新推荐文章于 2024-06-13 18:31:56 发布

没有不酸的柠檬

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量66

点赞数

分类专栏： Css3语法基础文章标签： css html

本文链接：https://blog.csdn.net/I_am_fine_/article/details/118740267

版权

Css3语法基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS语法基础–简单入门

1 简介

概述： CSS也称为层叠级联样式表（Cascading Style Sheet），主要负责对网页的美化，如：字体颜色，背景图片，边框，高度，宽度等等。

发展史： CSS发展到至今，发展到了CSS3.0版本，每一个版本都继承了上一个版本的特点并有自己的特点，如：CSS2.0主要是DIV（块）+HTML，在2.0版本中，主要是把CSS和HTML的结构分离开来，使开发变得更加方便简洁，而在2.1版本中又新增了网页浮动和网页定位的功能，在最新版本3.0中，新增了圆角，阴影，动画等许多因素，也更加注重浏览器兼容的问题。

优势:
①使网页的内容跟表现相分离开来
②网页结构统一，CSS样式可以复用
③CSS样式很丰富，更加利于网页的优化

2 简单入门

2.1 语法结构

选择器{
	声明1;
	声明2;
	声明3;
	......
}

2.2 导入方式

概述: CSS的导入方式有三种，分别是行内样式，内部样式和外部样式，一种是在HTML文件中用来写，另一种则是创建一个CSS文件，在里面写样式代码，然后在HTML中导入使用

2.2.1 行内样式

概述: 行内样式主要是在标签元素中写入样式，也是最简单的一种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
</head>
<body>
<h1 style="color: aqua">CSS样式</h1>
</body>
</html>

运行结果：
在这里插入图片描述

2.2.2 内部样式

概述: 内部样式是在HTML文件中用来写样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <!--在HTML文件中，<style></style>中可以编写css代码-->
    <style>
        h1{
            color: aqua;
        }
    </style>
   
</head>
<body>
<h1>CSS样式</h1>
</body>
</html>

运行结果：
在这里插入图片描述

2.2.3 外部样式

概述: 外部样式是创建一个CSS文件，在里面写样式代码，然后在HTML中导入使用，其中外部样式也分为连接式和导入式（2.1版本特点）

①链接式：使用link标签导入样式

②导入式：使用@import来导入，导入式中的@import必须写在中

css文件：

h1{
    color: aqua;
}

HTML文件：链接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<h1>CSS样式</h1>
</body>
</html>

运行结果：
在这里插入图片描述

HTML文件：导入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        @import "CSS/style.css";
    </style>
</head>
<body>
<h1>CSS样式</h1>
</body>
</html>

运行结果：
在这里插入图片描述
总结： 在三种导入方法中，方法的优先级遵循就近原则，推荐使用外部样式的链接方法。

没有不酸的柠檬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS语法基础--简单入门

CSS语法基础–简单入门1 简介概述： CSS也称为层叠级联样式表（Cascading Style Sheet），主要负责对网页的美化，如：字体颜色，背景图片，边框，高度，宽度等等。发展史： CSS发展到至今，发展到了CSS3.0版本，每一个版本都继承了上一个版本的特点并有自己的特点，如：CSS2.0主要是DIV（块）+HTML，在2.0版本中，主要是把CSS和HTML的结构分离开来，使开发变得更加方便简洁，而在2.1版本中又新增了网页浮动和网页定位的功能，在最新版本3.0中，新增了圆角，阴影
复制链接

扫一扫