CSS

2021-12-08 07:12:47

HTML+CSS+JavaScript

结构+表现+交互

1.什么是CSS

如何学习

1.CSS是什么

2.CSS怎么用（快速入门）

3.CSS选择器（重点+难点）

4.美化网页（文字，阴影，超链接，列表，渐变.....）

5.盒子模型

6.浮动

7.定位

8.网页动画（特效效果）

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现（美化网页）

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

CSS

1.2发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页表的简单

CSS2.1 浮动，定位

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

1.3快速入门

style

基本入门

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

CSS

CSS优势：

1.内容和表现分离

2.网页结构表现统一

3.样式十分的丰富

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

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

Vue:及其不容易被搜索引擎收录！

1.4CSS三种导入方式

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

拓展：外部样式的两种写法

。链接式：

html

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

。导入式：

@import是CSS2.1特有的！

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

2.选择器

作用：选择页面上的某一个或者某一类元素

2.1 基本选择器

1.标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
?
    <style>
        /*标签选择器，会选择到这个页面上所有的这个标签的元素*/
        h1{
            color: #7d3646;
            background: #294cce;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>狂神说Java</p>
</body>
</html>

2类选择器 class：选择所有class 属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class可以复用
        */
        .yu1{
            color: #313cff;
        }
        .yu3{
            color: #ff4536;
        }
    </style>
</head>
<body>
<h1 class="yu1">标题1</h1>
<h1 class="yu2">标题2</h1>
<h1 class="yu3">标题3</h1>
?
<p class="yu3">标题3</p>
</body>
</html>

3.id 选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    /*id选择器  : id必须保证全局唯一
    #id名称{}
    不遵循就近原则，固定的
    id选择器> class选择器 > 标签选择器
    */
    <style>
        #yu{
            color: #ff22de;
        }
        .style1{
            color: #39ff06;
        }
        h1{
            color: #180cff;
        }
    </style>
</head>
<body>
<h1 class="style1" id="yu">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

CSS

码农公寓