css入门

最新推荐文章于 2024-05-24 01:00:03 发布
最新推荐文章于 2024-05-24 01:00:03 发布
阅读量98 收藏
点赞数
分类专栏： JavaWeb 文章标签： css html python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46815330/article/details/119005085
版权

文章目录

001css简介和基础C：cascading 层叠

S：style 样式
S:sheet列表
作用

  1. 结构和样式分离，便于改版维护
  2. 套用多种样式，使得网页有有任意样式切换效果
  3. 使页面载入的更快，降低服务器成本

学习目标

  1. css语法
  2. 基础样式
  3. 列表样式
  4. 伪类
    样式表分类：外部 内部 行内样式

css样式文件结构在这里插入图片描述
在这里插入图片描述

p{
background-color:red
font-size:20px
}

内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            background-color: blue;
            font-size: 40px ;
        }
    </style>
</head>
<body>
    <p>http://www.imooc.com</p>
    <p>慕课网</p>
慕课网是垂直的互联网IT技能学习网站，自2013年上线始终专注于IT在线教育领域，以培养互联网企业实用型人才为己任，邀请一线大厂技术达人打造前沿的IT技术精品课程，帮助每一位有志向的开发者实现职业梦想。 [1]
慕课网用户数超2000万，合作讲师1500+，自制课程超过3000门。 [2]  用户群体中，有高校大学生、初入职场的程序员、资深技术大咖，不同技术水平的开发者纷纷汇集。 [3]  慕课网既为用户提供免费课程，还有成体系重实战的商业课程 [4]  ，覆盖前端 \JAVA \Python \Go \人工智能\大数据\移动端等60类主流技术语言，充分满足了面试就业、职业成长、自我提升等实际需求，帮助用户实现从技能提升到岗位提升的能力闭环。 [1]
慕课网App是国内首个IT技能学习类应用 [5]  ，2021年3月已更新至8.0.3版本。 [6]

</body>
</html>

在这里插入图片描述

002css基本使用

在这里插入图片描述
在这里插入图片描述

标签选择器和类选择器。完成字体设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            background-color:red;
            font-size: 40px;
        }
        .p1{
            font-family: 隶书;
        }
    </style>
</head>
<body>
    <p>MOOC</p>
    <p class="p1">慕课网</p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
</body>
</html>

在这里插入图片描述

背景设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            background-color:slategray;
            font-size: 40px;
        }
        .p1{
            font-family: 隶书;
        }
        body{
            background-color: rebeccapurple;
            background-image: url("IMG_6901(20200902-144349).JPG");
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: 50px 50px;
        }
    </style>
</head>
<body>
    <p>MOOC</p>
    <p class="p1">慕课网</p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
    <p class="p1">
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。慕课网是。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    </p>
</body>
</html>

在这里插入图片描述

使用外部样式表

在这里插入图片描述
在这里插入图片描述
此时就有了两个文件
index.css
index.html

p{
    background-color: lightgreen;
            font-size: 40px ;
}
.p1{
    font-family: 隶书;
}
body{
background-color: rebeccapurple;
    background-image:url("IMG_6901(20200902-144349).JPG");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p>http://www.imooc.com</p>
    <p class="p1">慕课网</p>
<p class="p1">
    慕课网是垂直的互联网IT技能学习网站，自2013年上线始终专注于IT在线教育领域，以培养互联网企业实用型人才为己任，邀请一线大厂技术达人打造前沿的IT技术精品课程，帮助每一位有志向的开发者实现职业梦想。 [1]
慕课网用户数超2000万，合作讲师1500+，自制课程超过3000门。 [2]  用户群体中，有高校大学生、初入职场的程序员、资深技术大咖，不同技术水平的开发者纷纷汇集。 [3]  慕课网既为用户提供免费课程，还有成体系重实战的商业课程 [4]  ，覆盖前端 \JAVA \Python \Go \人工智能\大数据\移动端等60类主流技术语言，充分满足了面试就业、职业成长、自我提升等实际需求，帮助用户实现从技能提升到岗位提升的能力闭环。 [1]
慕课网App是国内首个IT技能学习类应用 [5]  ，2021年3月已更新至8.0.3版本。 [6]

</p>
<p class="p1">
    慕课网是垂直的互联网IT技能学习网站，自2013年上线始终专注于IT在线教育领域，以培养互联网企业实用型人才为己任，邀请一线大厂技术达人打造前沿的IT技术精品课程，帮助每一位有志向的开发者实现职业梦想。 [1]
慕课网用户数超2000万，合作讲师1500+，自制课程超过3000门。 [2]  用户群体中，有高校大学生、初入职场的程序员、资深技术大咖，不同技术水平的开发者纷纷汇集。 [3]  慕课网既为用户提供免费课程，还有成体系重实战的商业课程 [4]  ，覆盖前端 \JAVA \Python \Go \人工智能\大数据\移动端等60类主流技术语言，充分满足了面试就业、职业成长、自我提升等实际需求，帮助用户实现从技能提升到岗位提升的能力闭环。 [1]
慕课网App是国内首个IT技能学习类应用 [5]  ，2021年3月已更新至8.0.3版本。 [6]

</p><p class="p1">
    慕课网是垂直的互联网IT技能学习网站，自2013年上线始终专注于IT在线教育领域，以培养互联网企业实用型人才为己任，邀请一线大厂技术达人打造前沿的IT技术精品课程，帮助每一位有志向的开发者实现职业梦想。 [1]
慕课网用户数超2000万，合作讲师1500+，自制课程超过3000门。 [2]  用户群体中，有高校大学生、初入职场的程序员、资深技术大咖，不同技术水平的开发者纷纷汇集。 [3]  慕课网既为用户提供免费课程，还有成体系重实战的商业课程 [4]  ，覆盖前端 \JAVA \Python \Go \人工智能\大数据\移动端等60类主流技术语言，充分满足了面试就业、职业成长、自我提升等实际需求，帮助用户实现从技能提升到岗位提升的能力闭环。 [1]
慕课网App是国内首个IT技能学习类应用 [5]  ，2021年3月已更新至8.0.3版本。 [6]

</p><p class="p1">
    慕课网是垂直的互联网IT技能学习网站，自2013年上线始终专注于IT在线教育领域，以培养互联网企业实用型人才为己任，邀请一线大厂技术达人打造前沿的IT技术精品课程，帮助每一位有志向的开发者实现职业梦想。 [1]
慕课网用户数超2000万，合作讲师1500+，自制课程超过3000门。 [2]  用户群体中，有高校大学生、初入职场的程序员、资深技术大咖，不同技术水平的开发者纷纷汇集。 [3]  慕课网既为用户提供免费课程，还有成体系重实战的商业课程 [4]  ，覆盖前端 \JAVA \Python \Go \人工智能\大数据\移动端等60类主流技术语言，充分满足了面试就业、职业成长、自我提升等实际需求，帮助用户实现从技能提升到岗位提升的能力闭环。 [1]
慕课网App是国内首个IT技能学习类应用 [5]  ，2021年3月已更新至8.0.3版本。 [6]

</p><p class="p1">
    慕课网是垂直的互联网IT技能学习网站，自2013年上线始终专注于IT在线教育领域，以培养互联网企业实用型人才为己任，邀请一线大厂技术达人打造前沿的IT技术精品课程，帮助每一位有志向的开发者实现职业梦想。 [1]
慕课网用户数超2000万，合作讲师1500+，自制课程超过3000门。 [2]  用户群体中，有高校大学生、初入职场的程序员、资深技术大咖，不同技术水平的开发者纷纷汇集。 [3]  慕课网既为用户提供免费课程，还有成体系重实战的商业课程 [4]  ，覆盖前端 \JAVA \Python \Go \人工智能\大数据\移动端等60类主流技术语言，充分满足了面试就业、职业成长、自我提升等实际需求，帮助用户实现从技能提升到岗位提升的能力闭环。 [1]
慕课网App是国内首个IT技能学习类应用 [5]  ，2021年3月已更新至8.0.3版本。 [6]
</p>
</body>
</html>

效果
在这里插入图片描述

003css常用样式

文本类样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

p {
    color: red;
    direction: ltr;
    letter-spacing: 10px;
    line-height: 50px;
    text-align: justify;
    text-decoration: line-through;
    text-shadow: 5px 5px 1px red;
    text-transform: uppercase;
    text-indent: 2em;
}

.p2{
    direction: rtl;
}
.p3{
    direction: rtl;
}

字体类样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

p {
    color: red;
    direction: ltr;
    letter-spacing: 10px;
    line-height: 50px;
    text-align: justify;
    text-decoration: line-through;
    text-shadow: 5px 5px 1px red;
    text-transform: uppercase;
    text-indent: 2em;
    font-style: oblique;
    font-weight: bold;
    font-size: 30px;
    font-family: 黑体;
}

.p2{
    direction: rtl;
}
.p3{
    direction: rtl;
}

列表样式

ul{
    list-style-type: square;
    list-style-position: outside;
    list-style-image: url("IMG_6901(20200902-144349).JPG");
}
ol{
    list-style-type: lower-latin;
}

<ol>
     <li>aaaaa</li>
    <li>aaaaa</li>
    <li>aaaaa</li>
    <li>aaaaa</li>
    <li>aaaaa</li>
</ol>

在这里插入图片描述
在这里插入图片描述

004伪类和伪元素

伪类样式

在这里插入图片描述
在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p>http://www.imooc.com</p>
    <p class="p1">慕课网</p>
    <a href="#">伪类</a>
    <label>用户名</label>
    <input type="text">
</body>
</html>

index.css

a:link{
    color: red;
}
a:visited{
    color: green;
}
a:hover{
    color: yellow;
    font-size: 30px;
}
a:active{
    color: blue;
}
label:hover{
    color: red;
}

input:hover{
    color: red;
}
input:hover{
    background-color: red;
}
input:active{
    background-color: blue;
}
input:focus{
    background-color: yellow;
}

在这里插入图片描述
在这里插入图片描述

伪类的分类

在这里插入图片描述

h1:first-child{
    background-color: red;
}
td:nth-child(2){
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>慕课网欢迎您</h1>
    <p>http://www.imooc.com</p>
    <p>慕课网</p>
    <p>慕课网</p>
    <table border="1" width="500px">
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
    </table>


</body>
</html>

在这里插入图片描述
在这里插入图片描述

伪元素选择器

在这里插入图片描述

p::before{
    content: "终于找到你！";
}
p::first-line{
    color: red;
}
p::first-letter{
    font-size: 30px;
    color: purple;
}
*::selection{
    background-color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>慕课网欢迎您</h1>
    <p>http://www.imooc.com</p>
    <p>慕课网</p>
    <p>慕课网</p>
    <p>慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕
        课网慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕</p>
    <table border="1" width="500px">
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
    </table>


</body>
</html>

在这里插入图片描述

005其他选择器

在这里插入图片描述

.p1{
    color: red;
}
p{
    color: blue;
}
#name1{
    color: red;
}
#name2{
    color: blue;
}
*{
    font-size: 20px;
}

#name1,#name2,p,#td1{
    color: red;
    background-color: yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>慕课网欢迎您</h1>
    <p>http://www.imooc.com</p>
    <p class="p1" id="name1">慕课网</p>
    <p class="p1" id="name2">慕课网</p>
    <p>慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕
        课网慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕慕课网慕课网慕课网慕课网慕课网
        慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课
        网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕</p>
    <table border="1" width="500px">
        <tr>
        <td id="td1">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
        <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        </tr>
    </table>


</body>
</html>

在这里插入图片描述

范德彪陕西分彪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS入门
wuyxinu的博客
12-17 6万+
目录 一、CSS简介 二、内容 1.css的引入方式 2.元素的id和class 3、CSS选择器 4、文本样式总结 5、文本样式总结 6、边框样式 7、 背景样式概述 8、超链接样式 9、图片样式 10、列表样式 11、表格样式 12、CSS盒子模型 13、浮动布局 14、定位布局 预备知识与后续知识及项目案例 [HTML入门与进阶以及HTML5][CSS][...
CSS入门PPT
01-19
CSS入门，适合初学者，基础的CSS操作 CSS(Cascading Style Sheet)级联样式单（层叠样式表） HTML5建议把页面外观交给CSS控制。 优点： 表达效果丰富 （元素样式、精确定位） 文档体积小（重复定义 提高传输速度 ...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS入门 超详细
weixin_55816781的博客
04-12 7152
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
TailWindCSS入门
cccdf_jjj的博客
06-15 6110
上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度) 2.颜色 一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green： 3.纵横比--aspect 4.容器--container 6.列--co.
css入门学习
山有木兮
06-25 3672
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
头歌-CSS入门
somewon的博客
03-06 7833
四川师范大学 CSS 头歌
CSS入门使用
zz14664656的博客
12-15 1030
引入CSS的三种方式其优先级：行内样式 > 内部样式 > 外部样式。
Tailwind CSS快速入门
最新发布
知识点沉淀包括不限于前端
05-24 1270
Tailwind css 对比传统css css in js 安装流程 书写技巧 速查手册
CSS入门基础详解——笔记、案例
qq_46362763的博客
04-01 1485
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护.........
CSS入门到精通——表格样式
weixin_54327001的博客
12-15 9301
第1关：表格边框 任务描述 本关任务：在本关中，我们将学习如何使用CSS设置表格样式，使表格更好看。本关任务完成之后的效果图(index.html)如下： 相关知识 为了完成本关任务，请大家认真阅读以下内容。 在之前的HTML教程中，我们学习了各类基本表格。 例如，下面网页代码的表格： HTML 页面： <body> <table width="400"> <!-- 表标题 --> <caption>通讯录</capti
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
css入门入门入门入门
05-23
01_CSS快速入门.mp4可能涵盖了CSS的基础知识，包括选择器的使用、盒模型、浮动和定位，这些都是CSS初学者需要掌握的基础技能。盒模型定义了元素的尺寸，包括内容、内边距、边框和外边距。浮动和定位则是布局中的重要...
CSS入门讲解
10-11
WEB项目第二天，HTML和CSS入门讲解，内容还是比较详细的
CSS入门教程篇
10-30
CSS入门教程
CSS入门源代码 CSS入门源代码
05-20
这个压缩包文件“CSS入门源代码”提供了一些关于CSS基础和进阶知识的学习资源，主要包括以下几个方面： 1. **CSS选择器**：CSS选择器是用于选取HTML或XML文档中的元素的关键工具。基本选择器包括标签选择器（如`<p>...
15个必须阅读的CSS入门文章
09-25
以下是一些精选的CSS入门文章，它们将为你提供必要的指导： 1. **CSS Reset**：在开始设计之前，了解如何使用CSS Reset消除浏览器默认样式的差异至关重要。这将确保你的设计在所有平台上看起来一致。 2. **CSS定位...
html + css 入门教程
02-18
html + css 入门教程
tailwindcss 入门
03-29
入门Tailwind CSS需要以下步骤： 1. 安装：使用npm或yarn安装Tailwind CSS。 2. 配置：创建一个配置文件（通常是`tailwind.config.js`），在其中定义你的自定义样式和配置选项。 3. 引入：在你的HTML或CSS文件中引入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值