CSS基础

最新推荐文章于 2024-09-25 10:59:43 发布

路飞Fly了

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量3.1k

点赞数

文章标签： java 算法 1024程序员节

本文链接：https://blog.csdn.net/lufeia/article/details/121674186

版权

本文详细介绍了CSS的基础知识，包括CSS的概念、发展历史、快速入门方法，以及CSS的选择器、美化网页元素的方法、盒子模型、浮动和定位的原理。通过学习，读者可以掌握CSS的基本用法，为网页设计打下坚实基础。

摘要由CSDN通过智能技术生成

CSS基础

1、什么是CSS

如何学习

1：CSS是什么
2：CSS怎么用（快速入门）
3：CSS选择器（重点+难点）
4：美化页面（文字，阴影，超链接，列表，渐变…）
5：盒子模型
6：浮动
7：定位
8：页面动画（特效效果）

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；
            }
-->

<!--    <style>-->
<!--        h1{-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->

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


</head>
<body>

<h1>我是标题</h1>

</body>
</html>

CSS的优势：

1：内容和表现分离

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

3：样式十分的丰富

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

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

1.4、CSS的三种导入方式

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


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

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

</head>
<body>

<!--优先级：就近原则（外部样式的就近是看html页面的行数）-->

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

</body>
</html>

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

链接式：

html

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

导入式：

@import是CSS2.1特有的

<!-- 导入式（CSS2.1特有，不过还是推荐使用链接式link） -->
  <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: #81eeff;
            background: #ffac7c;
            border-radius: 24px;
        }
        p{
     
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>看路飞</p>
</body>
</html>

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

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

    <style>
        /*
        类选择器的格式     .class的名称{}
        好处，可多个标签归类，是同一个class，可以复用
        */

        .style1{
     
            color: #ffac7c;
        }
        .style2{
     
            color: #81eeff;
        }

    </style>

</head>
<body>

<h1 class="style1">标题1</h1>
<h1 class="style2">标题2</h1>
<h1>标题3</h1>
<p class="style1">标题4</p>

</body>
</html>

3、ID选择器：全局唯一 #id名{}

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

  <style>
    /*
        id选择器:id必须保证全局唯一
        #id名称{}
        优先级：不遵循就近原则，固定的
        id选择器 > class选择器 > 标签选择权
    */

    .style1{
     
      color: red;
    }

    #lufei{
     
      color