css相关内容

最新推荐文章于 2022-11-20 16:11:00 发布

Y_upup

最新推荐文章于 2022-11-20 16:11:00 发布

阅读量107

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_41328735/article/details/120045782

版权

本文详细介绍了CSS，包括其定义、发展历史、快速入门指南，以及选择器、美化网页、盒子模型、浮动、定位等核心概念。通过学习，读者将掌握如何使用CSS来美化网页并实现各种布局效果。

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

1.什么是CSS

Cascading Style Sheet 层叠样式表。
CSS：表现（美化网页）。
- 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动。

2.CSS发展史

CSS 1.0：1994年 10月提出；
CSS 2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO；
CSS 2.1：浮动，定位；
CSS 3.0：圆角、阴影、动画…浏览器兼容性。

3.快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3快速入门</title>
    <!-- 规范:<style>可以编写CSS的代码，每一个声明最好以“;”结尾
            语法:
                选择器{
                    声明1;
                    声明2;
                    声明3;
                }
    -->
    <style>
        h1{
     
            color:red;
        }
    </style>
</head>
<body>
<h1>CSS3测试</h1>
</body>
</html>

建议单独写一个css文件，用link标签引入css文件效果。

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

CSS的优势：

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

CSS的3种常用导入方式:

优先级:就近原则——行内样式 > 内部样式 > 外部样式

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

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

<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aquamarine">CSS3测试</h1>

拓展：外部样式两种方法。

链接式—HTML

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

导入式—@import是CSS2.1特有的！

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

2.CSS选择器

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

1.基本选择器

标签选择器—选择一类标签。

格式：标签名{}

<style>
    p{
     
        font-size: 80px;
    }
</style>

类选择器class—选择所有class一致的标签，跨标签。

格式：.类名{}

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

最低0.47元/天解锁文章

Y_upup

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css相关内容

1.什么是CSS1.什么是CSSCascading Style Sheet 层叠样式表。CSS：表现（美化网页）。字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动。2.CSS发展史CSS 1.0：1994年 10月提出；CSS 2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO；CSS 2.1：浮动，定位；CSS 3.0：圆角、阴影、动画…浏览器兼容性。3.快速入门<!DOCTYPE html><html la
复制链接

扫一扫