CSSlesson1

最新推荐文章于 2024-09-17 22:59:44 发布

汤三石

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量463

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_45437848/article/details/121784477

版权

什么是CSS

如何学习

css是什么
css怎么用
css选择器（重点+难点）
美化页面（文字，阴影等）
盒子模型
浮动
定位
网页动画

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，网页浮动等
在这里插入图片描述

1.2 发展史

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

练习格式：
在这里插入图片描述

1.3 快速入门

style
基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    规范，<style>可以编写CSS代码,每个语句最好以分号结尾
    语法：
        选择器{
            声明1；
            声明2；
            }
-->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>this is headline</h1>
</body>
</html>

建议使用这种规范
在这里插入图片描述
css优势

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

1.4 CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部样式-->
    <style>
        h1 {
            color: aqua;
        }
    </style>
<!--    外部样式-->
    <link rel="stylesheet" href="../1.我的第一个css程序/css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: red">THis is lesson2</h1>
</body>
</html>

优先级：就近原则