什么是CSS

最新推荐文章于 2024-11-01 12:26:05 发布

siiove

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量107

点赞数

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

本文链接：https://blog.csdn.net/qq_46423017/article/details/126892332

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

01.css的简单介绍

html + css + javascript
结构+ 表现 + 交互

如何学习：

css是什么
css怎么用（快速入门）
css选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变。。。）
盒子模型
浮动
定位
网页动画（特效效果）

02.什么是css和发展史

cascading style sheet(层叠级联样式表)
css：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动等

发展史：

CSS1.0
CSS2.0 DIV（块）+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画。。。浏览器兼容性~

03.css的快速入门及优势

创建一个java项目，创建lesson01包，创建“1.我的第一个css程序”，创建css包，创建index（首页）HTML5（标准格式）

CSS和HTML放在一起

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

    <!--    这个是css和html融为一体-->
    <!--    规范，<style>可以编写css代码，每一个声明，最好使用分号结尾
            语法：
                选择器{
                    声明1;
                    声明2;
                    声明3;
                }

    -->

    <style>
        h1 {
            color: brown;
        }
    </style>

</head>
<body>

<!--标题-->
<h1>我是标题</h1>

</body>
</html>

创建css （建议使用这种规范）

直接引入进来

点击<h1>就能看到旁边style.css：1，点击进行跳转

css的优势：

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

04.四种css导入方式

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

    <!--    内部样式-->
    <style>
        h1 {
            color: green;
        }
    </style>

    <!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级：就近原则
谁离 <h1>我是标题</h1> 近就是谁的颜色，这里面是行内样式最近，然后是外部样式，然后才是内部样式

-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>


</body>
</html>

css

/* 外部样式-->*/
h1 {
    color: black;
}

拓展：外部样式两种写法

链接式

html

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

导入式

@import 是css2.1特有的（很少用）

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

    <!--    导入式-->
    <style>
        @import url("css/style.css");
    </style>

</head>
<body>

<h1>山姆</h1>

</body>
</html>