CSS 学习记录（上）

最新推荐文章于 2024-04-07 22:39:40 发布

jigsaw_zyx

最新推荐文章于 2024-04-07 22:39:40 发布

阅读量379

点赞数 1

分类专栏： web前端文章标签： web

本文链接：https://blog.csdn.net/jigsaw_zyx/article/details/124582198

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如何学习CSS：

CSS是什么
CSS怎么用
CSS选择器
美化网页
盒子模型
浮动
定位
网页动画（特效效果）

文章目录

什么是CSS
CSS怎么用
四种导入方式
三种基本选择器

什么是CSS

层叠级联样式表

CSS怎么用

在这里插入图片描述

四种导入方式

在这里插入图片描述
html:

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

    <!--  规范<style> 可以编写CSS代码  ，每一个声明最好用;结尾
    语法：
    选择器{
        声明1；
        声明2；
        声明3；
    }

    -->
    <!--  内部样式  -->
    <style>
        h2{
            color: green;
        }
    </style>

    <!--  导入式  -->
    <style>
        @import url("我的第一个CSS/style.css");
    </style>

    <!--  链接式  -->
    <link rel="stylesheet" href="我的第一个CSS//style.css">
</head>

<body>
    <!--  优先级：行内样式>内部样式>外部样式  就近原则 -->
    <h1>昨夜雨疏风骤</h1>
    <!--  行内样式  -->
    <h2 style="color: red">浓睡不消残酒</h2>
</body>
</html>

css:

/*外部样式*/
h1{
    color: red;
}

三种基本选择器

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

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


    <style>
    <!--    标签选择器，会选择到页面上所有这个标签的元素    -->
        h2{
            color: green;
        }
    </style>

    <style>
<!--   类选择器的格式 .class的名称{}
    好处：可以多个标签归类，是同一个class，可以复用
-->
    .qinjiang{
        color: blueviolet;
    }
    .kuangshen{
        color: cornflowerblue;
    }
    </style>

    <style>
<!--   id选择器： id必须保证全局唯一
    #id名称{

}
-->
        #zhifeng{
            color: aquamarine;
        }
    </style>

</head>

<body>
<!--优先级：
    id>class>标签选择器
-->
    <h1 class="qinjiang">试问卷帘人</h1>
    <h1 class="kuangshen">却道海棠依旧</h1>
    <h1 id="zhifeng">知否 知否</h1>

    <p class="kuangshen">应是绿肥红瘦</p>
</body>
</html>

/*单个元素选择器*/  
元素 {样式声明}
/*组合元素选择器*/  
元素1，元素2 {样式声明}

示例：

<style type="text/css">  
/* 组合元素选择器 */  
/*将`h1`、`p`元素的颜色同时设置为灰色*/  
h1,p {color:grey;}  
</style>

外边距为20（margin-top: 20px;）
内边距为20（padding: 20px;）
背景颜色白色（background-color: white;）。

jigsaw_zyx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS 学习记录（上）

如何学习CSS：CSS是什么CSS怎么用CSS选择器美化网页盒子模型浮动定位网页动画（特效效果）文章目录什么是CSSCSS怎么用四种导入方式三种基本选择器什么是CSS层叠级联样式表CSS怎么用四种导入方式html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫