大家好,我们来分享一下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程序就到这里了,谢谢大家