CSS的基本语法和第一个css程序-CFANZ编程社区

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

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

在这里插入图片描述

看源码：

<!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程序就到这里了，谢谢大家