CSS基础

最新推荐文章于 2024-10-06 20:16:20 发布

一念之间_Only

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量400

点赞数

分类专栏： css 文章标签： java 开发语言

本文链接：https://blog.csdn.net/qq_39777561/article/details/121567671

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是CSS

如何学习：

CSS是什么
CSS怎么用
CSS选择器（重点）
美化网页（文字、阴影、超链接、列表、渐变…）
盒子模型
浮动
定位
网页东西（特效-W3C）

1.1什么是CSS

Casading 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: rebeccapurple;
}

建议使用分离规范

css优势

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

1.4 CSS的3种导入方式

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

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

拓展：外部样式两种写法

链接式
html标签

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

导入式
@import 是 css2.1特有的

<style>
    @import "css/style.css";
</style>

2.选择器

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

2.1基本选择器

标签选择器：选择一类标签；标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style>
        /*标签选择器，会选择到页面上所有的这个标签元素*/
        h1{
            color: #1234;
            background: cadetblue;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<h1>学前端</h1>
<p>一起努力</p>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*类选择器的格式：.class的名称{}
        好处：可以多个标签归类，是同一个class，可以复用（支持跨标签）
        */
        .ting{
            color: antiquewhite;
        }
        .shi{
            color: rebeccapurple;
        }
    </style>
</head>
<body>
<h1 class="ting">标题1</h1>
<h1 class="shi">标题2</h1>
<h1 class="ting">标题3</h1>

<p class="shi">p标签</p>
</body>
</html>

id选择器：全局唯一；#{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>

    <style>
        /*
        id选择器 : id必须保证全局唯一
        格式：#id名称{}
        优先级：不遵循就近原则，id选择器>class选择器>标签选择器
         */
        #shi{
            color: aquamarine;
        }
        .ting{
            color: red;
        }
        h1{
            color: azure;
        }
    </style>
</head>
<body>
<h1 id="shi">标题1</h1>
<h1 class="ting">标题2</h1>
<h1 class="ting">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>