CSS3：CSS的快速入门及优势

最新推荐文章于 2023-07-09 19:38:56 发布

工一木子

最新推荐文章于 2023-07-09 19:38:56 发布

阅读量811

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/Prince140678/article/details/119841164

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

3、CSS的快速入门及优势

1.3 快速入门

基本入门
- 练习基本代码格式：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b5qEOkRT-1629534232618)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\3、CSS的快速入门及优势.assets\image-20210821160135255.png)]$

CSS的优势
- 1.内容和表现分离
- 2.网页结构表现统一，可以实现复用
- 3.样式十分的丰富
- 4.建议使用独立于html的css文件
- 5.利于SEO，容易被搜索引擎收录

代码show

1）html中使用css

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--
        规范：
        <style>可以编写css的代码，每一个声明，最好使用分号结尾
        语法：
        选择器 {
            声明1;
            声明2;
            ...
        }
        -->
        <style>
            h1 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>我是标题</h1>
    </body>
</html>

效果展示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tkx9rxA-1629534232625)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\3、CSS的快速入门及优势.assets\image-20210821161021756.png)]$

2）htm引用css文件（建议使用）

index2.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

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

style.css

h1 {
    color: blue;
}

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OsulVZh9-1629534232627)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\3、CSS的快速入门及优势.assets\image-20210821161336878.png)]$

css文件可以点击进去：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hTXlqHfP-1629534232631)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\3、CSS的快速入门及优势.assets\image-20210821161401821.png)]$

彩蛋

1.idea中新建css文件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wC9kcaYB-1629534232633)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\3、CSS的快速入门及优势.assets\image-20210821160011204.png)]$

2.html标签自动补全

输入以部门，按下tab键，自动补全，类似于shell命令自动补全

工一木子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3：CSS的快速入门及优势

3、CSS的快速入门及优势1.3 快速入门基本入门练习基本代码格式：CSS的优势1.内容和表现分离2.网页结构表现统一，可以实现复用3.样式十分的丰富4.建议使用独立于html的css文件5.利于SEO，容易被搜索引擎收录代码show1）html中使用cssindex.html<!DOCTYPE html><html lang="en"> <head> <meta cha
复制链接

扫一扫