CSS快速入门

最新推荐文章于 2023-07-22 17:52:33 发布

Timebrand♚

最新推荐文章于 2023-07-22 17:52:33 发布

阅读量72

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45809424/article/details/113352039

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一. CSS概述

1. 概念：

Cascading Style Sheets层叠样式表，用于页面美化和布局控制。
层叠：多个样式可以作用在同一个html的元素上，同时生效。

2. 好处：

功能强大；
将内容展示和样式控制分离。
1. 降低耦合度；
2. 让分工协作更容易；
3. 提高开发效率。

二. CSS与html结合方式

1. 内联样式（不常用）

在标签内使用style属性指定CSS代码。

<div style = "color : red;">Hello CSS</div>

2. 内部样式

在head标签内，定义style标签，style标签的标签体内容就是CSS代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        div{
            color:blue;
        }
    </style>
</head>
<body>
    <div>Hello CSS!</div>
</body>
</html>

3. 外部样式

定义CSS资源文件；
在head标签内，定义link标签，引入外部的资源文件。

div{
    color:green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="Hello CSS.css">
    <!--另一种不常用的写法-->
    <!--
        <style>
            @import "Hello CSS.css";
        </style>
    -->
</head>
<body>
    <div>Hello CSS!</div>
</body>
</html>

三. CSS语法格式

选择器{
属性名1：属性值1；
属性名2：属性值2；
}
注：每一对属性需要使用“;”隔开，最后一对属性可以不加“;”。

四. CSS选择器

1. 作用：

筛选具有相似特征的元素。

2. 分类：

基础选择器

id选择器：选择具体id属性值的元素。语法：#id属性值{}
建议在一个html页面中id值唯一。
元素选择器：选择具有相同标签名称的元素。语法：标签名称{}
id选择器优先级高于元素选择器。
类选择器：选择具有相同的class属性值的元素。语法：.class属性值{}
类选择器优先级高于元素选择器，低于id选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
       
        #div1{
            color:blue;
        }

        div{
            color:sandybrown;
        }

        .cls1{
            color:red;
        }

    </style>
</head>
<body>
    <div id = "div1" class = "cls1">Hello CSS!</div>
    <div id = "div2">Hello HTML!</div>
    <div class = "cls1">一心一意</div>
    <span class = "cls1">易烊千玺</span>
</body>
</html>

运行结果：
在这里插入图片描述

扩展选择器

选择所有元素：
语法：*{}
并集选择器：
语法：选择器1，选择器2{}
子选择器：筛选选择器1元素下的选择器2元素。
语法：选择器1 选择器2{}
父选择器：筛选选择器2的父元素选择器1。
语法：选择器1＞选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素。
语法：元素名称[属性名=“属性值”]{}
伪类选择器：选择一些元素具有的状态。
语法：元素：状态{}
如：< a >状态
      link：初始化的状态
      hover：鼠标悬浮的状态
      active：正在访问的状态
      visited：被访问过的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展选择器</title>
    <style>
        *{
            color:green;
        }
        div p{
            color:red;
        }
        div > p{
            border:1px solid;
        }
        input[type = "text"]{
            border:1px solid;
        }
        a:link{
           color:pink;
        }
        a:hover{
           color:seagreen;
        }
        a:active{
           color:yellow;
        }
        a:visited{
           color:orange;
        }
        div,input{
            color:blue;
        }
    </style>
</head>
<body>
    <div>
        <p>一心一意，易烊千玺</p>
    </div>
    <div>送你一朵小红花</div>
    <p>Jackson Yee</p>
    <input type = "text">
    <a href = "#">TFBOYS</a>
</body>
</html>

运行结果：
在这里插入图片描述

五. CSS属性

六. 案例：注册页面

Timebrand♚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS快速入门

一. CSS概述1. 概念：Cascading Style Sheets层叠样式表，用于页面美化和布局控制。层叠：多个样式可以作用在同一个html的元素上，同时生效。2. 好处：功能强大；将内容展示和样式控制分离。降低耦合度；让分工协作更容易；提高开发效率。二. CSS与html结合方式1. 内联样式（不常用）在标签内使用style属性指定CSS代码。<div style = "color : red;">Hello CSS</div>2. 内
复制链接

扫一扫