CSS学习笔记-01-CSS简介

Lary_c

已于 2022-12-03 11:38:43 修改

阅读量203

点赞数

分类专栏： CSS 文章标签： css javascript 前端

于 2022-09-06 17:49:18 首次发布

本文链接：https://blog.csdn.net/weixin_53249168/article/details/126729676

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

笔记来源：
【狂神说Java】CSS3最新教程快速入门通俗易懂

文章目录

01-CSS简介
- 1、什么是CSS

01-CSS简介

1、什么是CSS

HTML+CSS+JavaScript

结构 + 表现 + 交互

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

1.2、发展史

CSS1.0

CSS2.0 DIV(块)+CSS, HTML与CSS结构分离的思想，网页变得简单,SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画…浏览器兼容性~

1.3、快速入门

<!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>
</html>

h1{
    color: aqua;
}

建议使用这种规范

css的优势：

1.内容和表现分离

2.网页结构表现统一，可以实现复用

3.样式十分丰富

4.建议使用独立于html的css文件

5.利用SEO，容易被搜索引擎收录！

1.4CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
<!--    内部样式-->
    <style>
        h1{
            color: aqua;
        }
    </style>
</head>
<body>

<!--优先级：就近原则-->
<!--行内样式：在标签元素中编写一个style属性，编写样式-->
<h1 style="color: aquamarine">我是标题</h1>
</body>
</html>

拓展：外部样式两种写法

链接式

html

<link rel="stylesheet" href="css/style.css">

导入式

css2.1特有

<style>
        @import url("css/style.css");
    </style>

Lary_c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记-01-CSS简介

结构 + 表现 + 交互Cascading Style Sheet 层叠级联样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…
复制链接

扫一扫

专栏目录