CSS的基本语法和第一个css程序

思诚代码块

已于 2022-06-03 15:31:45 修改

阅读量279

点赞数

分类专栏： CSS 系列笔记+源码展示文章标签： css3 前端

于 2022-01-26 00:05:59 首次发布

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122693676

版权

CSS 系列笔记+源码展示专栏收录该内容

19 篇文章 4 订阅

订阅专栏

大家好，我们来分享一下CSS的基本语法和第一个css程序

使用的开发工具：IDEA
在这里插入图片描述

在这里插入图片描述

写一个单独的style.css 文件

/*外部样式*/
h1{
    color: blue;
}

截图

在这里插入图片描述

看源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    规范：<style>可以编写css代码，最好用；结尾
 语法：
 选择器 {
        声明1；
        声明2；
        声明3
        -->

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>

</body>
<!--  css的好处
1.内容与表现分离，
 2.网页结构表现同意，可以实现复用
 3.建议使用独立于HTML的css文件
 4.利用seo,容易被搜索-->
</html>
<!--<style>
</style>      卸载快里面的，叫内部样式表
单独分出去的css文件是外部样式表

-->

看它的效果：

在这里插入图片描述

这就是css效果

分开讲解

index,html 源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

这是一个单纯的HTML源代码

它的效果

在这里插入图片描述
看他的结果，非黑即白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--       规范：<style>可以编写css代码，最好用；结尾-->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

加上css代码

看结果
在这里插入图片描述
这就是css代码的作用

在这里插入图片描述

打开这个网页的源码，就可以看见我们自己写的

red : 红色

除了这样集中的写，我们还可以将HTML和css的代码分离（分开写）

新建文件
在这里插入图片描述

在style.css 文件当中写

h1{
    color: red;
}

在HTML 文件当中将css文件进行连接

看现在的HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--       规范：<style>可以编写css代码，最好用；结尾-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

我们这样就在HTML文件当中连接css文件

看结果
在这里插入图片描述

在这里插入图片描述

截图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    规范：<style>可以编写css代码，最好用；结尾
 语法：
 选择器 {
        声明1；
        声明2；
        声明3
        -->

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>

</body>
<!--  css的好处
1.内容与表现分离，
 2.网页结构表现同意，可以实现复用
 3.建议使用独立于HTML的css文件
 4.利用seo,容易被搜索-->
</html>
<!--<style>
</style>      卸载快里面的，叫内部样式表
单独分出去的css文件是外部样式表

-->

上面是源码和注意点，也是本节的总结

好了，关于CSS的基本语法和第一个css程序就到这里了，谢谢大家

思诚代码块

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS的基本语法和第一个css程序

大家好，我们来分享一下CSS的基本语法和第一个css程序使用的开发工具：IDEA写一个单独的style.css 文件截图看源码：看它的效果：这就是css效果分开讲解index,html 源文件这是一个单纯的HTML源代码它的效果看他的结果，非黑即白加上css代码看结果这就是css代码的作用打开这个网页的源码，就可以看见我们自己写的red : 红色除了这样集中的写，我们还可以将HTML和css的代码分离（分开写）新建文件在style.css 文件当中写在HTML
复制链接

扫一扫