CSS基础入门

最新推荐文章于 2024-09-27 22:26:16 发布

一城婳

最新推荐文章于 2024-09-27 22:26:16 发布

阅读量128

点赞数

分类专栏：前端入门知识

本文链接：https://blog.csdn.net/lengxinxuexic/article/details/84652986

版权

前端入门知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS是什么

CSS（cascading sheet style，层叠式样式表）;CSS3;给网页添加样式

前端分为哪几层？功能是什么

①结构层 HTML：负责搭建网页的结构，放置部件，超级链接，图片，音频视频等

②样式层 CSS：书写网页样式，美化页面

③行为层 JavaScript：实现网页的交互效果，网页的页面特效等等

样式表的书写位置有哪些？我们常用哪些？

①内嵌式 ②外链式 ③导入式 ④行内式

常用①内嵌式 ②外链式

CSS的4种导入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-1</title>
    <!--规范：style里面可以编写CSS代码
    语法，声明以分号结尾：
    style{
        声明1；
        声明2；
    }
    -->
    <!--CSS代码可以直接嵌入在html中
    <style>
        h1{
           color: cadetblue;
        }
    </style>
    -->
    <!--方式二，外部引用css代码
    优势：
    1，内容和表现分离；
    2，网页结构表现统一，可以实现复用；
    3，CSS样式十分丰富；
    4，建议使用独立于HTML的CSS文件；
    5，利于SEO，容易被搜索引擎收录。ps：vue及其不容易被搜索引擎收录
    -->
    <!--<link rel="stylesheet" href="CSS/style.css">-->
    <!--导入式-->
    <style>
        @import url("CSS/style.css");
    </style>
</head>
<body>
<!--方式三：行内元素，在标签元素中编写一个style属性，编写样式即可-->
<!--<h1 style="color: blue">目录</h1>-->
<h1>目录</h1>
<a href="https://www.bilibili.com/video/BV1YJ411a7dy">B站CSS</a>
<a href="https://mp.csdn.net/editor/html/84652986">博客CSS</a>
</body>
</html>
<!--三种样式的优先级：就近原则，遵照离元素最近的样式规则-->
<!--
扩展：
外部样式的两种写法，区别待补充：
HTRML中才能使用：
链接式：<link rel="stylesheet" href="CSS/style.css">
CSS2.1 只能在style中使用：
导入式： <style>
        @import url("CSS/style.css");
    </style>
-->

CSS选择器