CSS简介

最新推荐文章于 2024-05-29 09:20:13 发布
最新推荐文章于 2024-05-29 09:20:13 发布
阅读量1.3k 收藏 26
点赞数 38
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45559559/article/details/137209845
版权

1. CSS简介

  1. CSS(Cascading Style Sheets)层叠样式表，又叫级联样式表，简称样式表，文件后缀名为.css，用于HTML文档中元素样式的定义。
  2. CSS语法：
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: yellowgreen;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>这是一个h1标题</h1>
</body>


</html>

在这里插入图片描述

2. CSS的引入样式

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

3. 选择器

3.1 全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
            margin: 0;
            padding: 0;
       }
    </style>
</head>
<body>
    <h1>这是一个h1标题</h1>
</body>


</html>

在这里插入图片描述

3.2 元素选择器

HTML文档中的元素，p、b、div、a、img、body等所有的标签，选择的使页面上所有这种类型的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       h1{
            font-size: 40px;
       }

       span{
        color:red;
       }
    </style>

</head>
<body>
    <h1>这是一个h1<span>标题</span></h1>
</body>
</html>

在这里插入图片描述

3.3 类选择器

用 . 来定义，针对想要的所有标签使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .title1{
            font-size: 40px;
       }

       .title1{
        color:red;
       }
    </style>

</head>
<body>
    <h1 class="title1">这是一个h1<span>标题</span></h1>
</body>
</html>

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

3.4 ID选择器

以 # 来定义，针对某一个特定的标签来使用，只能使用一次，ID名称不可重复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #mytitle{
            font-size: 35px;
       }

       #mytitle{
        color:blueviolet;
       }
    </style>

</head>
<body>
    <h1 id="mytitle">这是一个h1<span>标题</span></h1>
</body>
</html>

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

3.5 合并选择器

提取共同的样式，减少重复代码

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

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="text">这是一段文本...</div>
</body>
</html>

在这里插入图片描述

3.6 选择器的优先级

在这里插入图片描述

4.背景属性

CSS背景属性：
在这里插入图片描述

  • 设置背景颜色：通过background-color实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
        width: 300px;
        height: 300px;
        background-color: palevioletred;
     }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置背景图片：通过background-image实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
        width: 300px;
        height: 480px;
     
        background-image: url(1.jpg);
     }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置如何平铺背景图像：通过background-repeat实现。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
        width: 2010px;
        height: 1480px;
     
        background-image: url(1.jpg);
        background-repeat: repeat-x;
     }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置背景图像的大小：通过background-size实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
        width: 2010px;
        height: 1480px;
     
        background-image: url(1.jpg);
        background-repeat: repeat-x;
        background-size: cover;
     }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

5. 文本属性

  • 指定元素文本的水平对齐方式：通过text-align实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    h1{
        text-align: center;
    }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置添加到文本的修饰，通过text-decoration实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    h1{
        text-decoration: overline;
    }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 控制文本的大小写：通过text-transform实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    h1{
        text-transform: capitalize;
    }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span>apple,banana</h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置文本块中首行文本的缩进：通过text-indent实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    h1{
        text-indent: 60px;
    }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span>apple,banana</h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

6. 表格属性

  • 设置表格边框：通过border实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格的边框是否被折叠成一个单一的边框或隔开：通过border-collapse实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            border-collapse: collapse;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格的宽度和高度：通过weith和height实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            
        }
        table{
            width: 500px;
            border-collapse: collapse;    
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格文字对齐方式：通过text-align实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            
        }
        table{
            width: 500px;
            border-collapse: collapse;    
        }
        td{
            text-align: center;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格线和文字之间的间隙：通过padding实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            border-collapse: collapse;  
        }
        td{
            text-align: center;
            padding: 20px;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格的颜色：通过background-color来实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            border-collapse: collapse;  
        }
        td{
            text-align: center;
            padding: 20px;
            background-color: aqua;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

7. 关系选择器

  • 后代选择器：
    选择所有被E元素包含的F元素，中间用空格隔开： E F{}。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
           color: aqua;
        }
        
    </style>

</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
</body>
</html>

在这里插入图片描述

  • 子代选择器：
    选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示。
    E>F{}。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li{
           color: aqua;
        }
        
    </style>

</head>
<body>
    <ul>
        <li>水果
            <div>苹果</div>
        </li>
        <div>饮料
            <div>可乐</div>
        </div>
    </ul>
</body>
</html>

在这里插入图片描述

  • 相邻兄弟选择器
    选择紧跟E元素后面的F元素，用加号表示，E+F{}。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2+p{
            color:red;
        }
    </style>

</head>
<body>
    <h2>h2标题</h2>
    <p>段落1</p>
    <p>段落2</p>
</body>
</html>

在这里插入图片描述

  • 通用兄弟选择器
    选择E元素之后的所有兄弟元素F，作用于多个元素
    E~F{}。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2~p{
            color:red;
        }
    </style>

</head>
<body>
    <h2>h2标题</h2>
    <p>段落1</p>
    <p>段落2</p>
</body>
</html>

在这里插入图片描述

8. CSS盒子模型

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding: 50px 10px;
            border: 5px solid chartreuse;
            margin: 30px;
        }
    </style>

</head>
<body>
    <h2>h2标题</h2>
    <p>段落1</p>
    <p>段落2</p>
</body>
</html>

在这里插入图片描述

9. 文档流

标准流有诸多限制：

  • 高矮不齐，底边对齐
  • 空白折叠
    • 无论多少个空格、换行、tab，都会折叠为一个空格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            width: 50px;
            height: 80px;
        
            background-color: palevioletred;
        }
        img{
            width: 100px;
            height: 180px;
            
        }

    </style>

</head>
<body>
    <span>这是一段文本</span>
    <img src="1.jpg" alt="">

    
</body>
</html>

在这里插入图片描述

10. 浮动

在这里插入图片描述

浮动原理：

  • 浮动以后使元素脱离了文档流
  • 浮动只有左、右浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
    </style>

</head>
<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
    </ul>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul li{
        float: left;
        margin: 30px;;
      }
    </style>

</head>
<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
    </ul>
</body>
</html>

在这里插入图片描述

  • 绝对定位
  • 固定定位

11. 清除浮动

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

汪汪miao~
关注
  • 38
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS详细介绍
m0_67238428的博客
05-19 1950
本文介绍了css的各种基础知识，适合初学者进行学习。
CSS 简介
01-19
CSS 简介 你需要具备的知识 在继续学习之前，你需要对下面的知识有基本的了解： HTML / XHTML 如果你希望首先学习这些项目，请在 首页 访问相关教程。 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) ...
CSS学习文档
学生小文
02-27 988
html、CSS入门文档
css基本操作及使用
最新发布
taoxirun的博客
05-29 952
为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。说明：选择符(selector)-----这组样式编码所要针对的对象，可以是标记，如body，也可以是定义了特定id或class的标记，如 #main选择符表示选择<div id=main>.CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。值(value)--------------指属性的取值.如：范围的值；
css 的介绍（定义、作用、基本语法、css注释）
热门推荐
IT之一小佬的博客
04-18 1万+
css 的介绍 1. css 的定义 css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。 没有使用css的效果图 使用css的效果图 2. css 的作用 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。 控制页面布局, 比如: 设置浮动、定位等样式。 3. css 的基本语法 选择器{ 样式规则 } 样式规则： 属性名1：属性值1; 属性名2：属性值2; 属性名3：属性值3; ... 选择器:是用来选择标签的，选
css简介
04-29
css简介 简单的ppt
css简介_动力节点Java学院整理
09-27
常见的CSS Reset有Eric Meyer的Reset CSS 2.0，而Normalize.css是另一种更为现代且广泛应用的选择，它不仅重置样式，还保留了一些语义化的默认样式。 在实际开发中，理解并熟练运用CSS，结合CSS Reset或Normalize....
常用css简介
04-21
7. **CSS预处理器**：Sass、Less和Stylus等预处理器允许编写更高级的CSS，如变量、嵌套规则、函数和混合，编译后生成标准CSS。 8. **Flexbox和Grid兼容性**：虽然这两种布局技术是现代CSS的重要组成部分，但在支持...
CSS简介和使用.xmind
12-15
这个思维导图主要介绍CSS是什么以及它在网页中是如何使用的，在使用中我们又应该注意什么，在这我们对上面的内容做个总结。
css文档
03-01
css2.0手册备忘 博文链接：https://brxonline.iteye.com/blog/153835
CSS 中文开发手册和文档（全套）
03-24
包括五个不同的CSS中文开发文档，是学习和开发CSS文件的绝佳参考资料
CSS简介 | 通俗易懂
A
09-28 6137
CSS简介 什么是CSS？ CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 CSS的发展历程 1994 年，H
CSS学习总结（一）：CSS简介、CSS语法规范、CSS选择器的作用、CSS基础选择器、标签选择器、类选择器、多类名选择器、id选择器、id选择器和类选择器的区别、通配符选择器
weixin_62764364的博客
11-22 79
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CS
css的介绍
qq_42528967的博客
08-07 2692
一.CSS的简介 1.什么是CSS： css称为层叠样式单 它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。 在传统的web网页设计里，使用CSS能让单调的HTML网页更富有表现力。 2.CSS与传统HTML描述数据方式比较有那些优势 表达效果丰富 文档体积...
CSS学习文档（一）：语法规范，选择器，字体属性，文本属性，引入方式
weixin_42044763的博客
10-24 2751
今天开启CSS篇章！冲！！！ 一、CSS语法规范 选择器 {属性名: 属性值; 属性名: 属性值;}。 1.选择器后面带空格，属性名的冒号后面也带空格，这样比较舒服 2.每个属性和属性值最好独占一行，属性值结尾别忘了分号; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值