文章目录

• 1 认识CSS
• • 1.1 什么是CSS
  • 1.2 为什么使用CSS
  • 1.3 CSS的作用
  • 2 CSS书写规则
  • • 2.1 行内样式
    • 2.2 内部(联)样式
    • 2.3 外部(联)样式
    • 2.4 样式的优先级
    • 2.5 选择器
    • • 2.5.1 元素选择器
      • 2.5.2 类选择器
      • 2.5.3 id选择器
      • 3 CSS盒子模型
      • • 3.1 盒子模型的组成
        • 3.2 盒子模型演示
        • 3.3 盒子成分的分析
        • 3.4 背景
        • 4 flex布局
        • • 4.1 如何使用flex
          • • 4.1.1 步骤一 创建flex容器
            • 4.1.2 步骤二 定义flex项目
            • 4.2 flex布局容器的一些属性
            • 5 案例：制定qq邮箱视图框架

              1 认识CSS

              1.1 什么是CSS

              css是一种样式设置的规则，用于控制页面的外观样式；css全称翻译是层叠样式表。

              如果说HTML是网页的结构，那么css就是网页化妆师，它用于控制网页的布局、颜色、字体、间距等视觉表现，使网页内容与样式分离，从而提升开发效率和维护性。

              css的主要功能：

              1. 控制网页的样式；
              2. 设置文本的字体，大小，颜色，对齐方式等；
              3. 控制元素的背景调色，背景照片，边框对齐；
              4. 调整元素的大小，内边距和外边距。

              1.2 为什么使用CSS

              1. 实现界面的精确控制，让页面更精美；
              2. 实现内容与样式的分离，便于团队的开发；
              3. 实现样式复用，便于网站的后期维护。

              1.3 CSS的作用

              页面外观的美化，实现特定的布局和定位。

              常见的css属性

              字体属性	作用	说明
              font-family	指定文本的字体系列	font-family: Arial,宋体;
              font-size	指定文本的字体大小	font-size: 16px
              font-weight	指定文本的字体粗细	normal：默认值，表示普通字体粗细。bold：表示粗体字体。bolder / lighter：相对于父元素更 粗 / 细 的字体。数值100-900，400普通字体，700粗体。
              text-decoration	指定文本的装饰效果，如下划线、删除线等。可以使用关键字如：none、underline、line-through来设置装饰效果。	text-decoration: line-through;

              文本属性	含义	说明	代码
              color	颜色	可以使用颜色名称、十六进制值或RGB值来指定颜色	color: red;
              line-height	行高	行之间的高度（当其值与div高度一致时，实现垂直对齐；可以结合text-align进行居中）	line-height: 1.5;
              text-align	水平对齐	取值：left、right、center、justify	text-align: center;

              2 CSS书写规则

              css的三种书写位置

              • 行内样式（写在style标签内）
              • 内部样式（直接写在head标签内）
              • 外部样式（使用外部.css文件）

                2.1 行内样式

                也称为嵌入样式，写在标签中，使用HTML标签的style属性定义；

                只对设置style属性的标签起作用。

                2.2 内部(联)样式

                在标签下面建一个style标签 写css代码，将页面内容与表现形式进行分离 ，方便对样式进行统一管理。

                 
                    
                    
                    css书写规则
                    
                     
                        /*css特有的注释*/
                        /*元素选择器，是为所有对应的标签进行设置，范围太广泛*/
                        h2{
                            color: rgb(255, 0, 0);
                            font-family: kaiti;
                            font-weight: 700;
                        }
                        /*class选择器（类选择器），可以为指定class名字的标签进行设置，范围会相对精准*/
                        .name{
                            color: aquamarine;
                        }
                        /*id选择器（唯一）,可以为指定id名称的标签进行样式设置，范围最精确*/
                        /*他跟class的区别是id选择器是唯一的只能指定一个标签，class可以指定多个标签*/
                        #id1{
                            background-color: aquamarine;
                        }
                     
                 
                 
                		
                测试样例
                		
                测试样例
                		
                测试样例
                		
                测试样例
                 
                

                2.3 外部(联)样式

                对内联样式进行一步的抽离，方便多个html页面公用一个样式；

                **用法：**使用单独的.css文件定义，然后在页面中使用link标签引入。

                 
                 
                 css书写规则
                 
                 
                 
                  
                		
                测试样例
                		
                测试样例
                		
                测试样例
                		
                测试样例
                 
                

                此时还存在调取的外部连接样式.css文件如下：

                 		/*css特有的注释*/
                        /*元素选择器，是为所有对应的标签进行设置，范围太广泛*/
                        h2{
                            color: rgb(255, 0, 0);
                            font-family: kaiti;
                            font-weight: 700;
                        }
                        /*class选择器（类选择器），可以为指定class名字的标签进行设置，范围会相对精准*/
                        .name{
                            color: aquamarine;
                        }
                        /*id选择器（唯一）,可以为指定id名称的标签进行样式设置，范围最精确*/
                        /*他跟class的区别是id选择器是唯一的只能指定一个标签，class可以指定多个标签*/
                        #id1{
                            background-color: aquamarine;
                        }
                

                2.4 样式的优先级

                就近原则：行内样式 color: rgb(255, 0, 0);font-family: kaiti;font-weight: 700; } color: aquamarine; /*调节样式的代码*/ } background-color: aquamarine; /*调节样式代码*/ } /*盒子模型属性的设置*/ /*盒子模型是一个概念,我们可以把网页中的所有标签看作是一个个的小盒子 既然是盒子的话我们就可以为他去设置一些特点,这些特点我们就叫盒子属性*/ background-color: aqua; /*字体颜色的设置*/ width: 500px; /*设置宽度*/ height: 500px; /*设置高度*/ padding: 80px 100px; /*设置内边距 , 就是内容和边框之间的空白区域*/ margin-top: 50px; /*设置外边距 就是元素周围空白的区域,也可以指定上下左右的值*/ margin-left: 100px; /*top上 left左*/ border-radius: 10%; /*边框圆角*/ } #box2{ background-color: aquamarine; width: 200px; /*设置密码框宽度*/ height: 50px; /*设置密码框高度*/ border-radius: 20%; /*设置密码框圆角*/ } /*使用简写属性，同时设置四条边界，四条边界的宽度，样式和颜色*/ border: 2px solid green; /*下面的样式与上面的样式等价*/ border-top: 2px solid green; border-bottom: 2px solid green; border-left: 2px solid green; border-right: 2px solid green; } widht: 500px height:300px background-image:url(./图片.jpg) backgroud-size:500px 300px； /*图片不重复*/ background-posittion：center； } display:flex; } padding: 0px; margin: 0px; } #a1{ width: 100%; height: 100vh; background-color: aqua; display: flex; flex-direction: column; } #b1{ flex: 5; background-color: brown; display: flex; } #c1{ flex: 85; background-color: blanchedalmond; justify-content: center; align-items: center; display: flex; } #d1{ flex: 10; background-color: blue; display: flex; } #b01{ flex: 10; background-color: aqua; } #b02{ flex: 50; background-color: white; } #b03{ flex: 2; background-color: aqua; } #b04{ flex: 2; background-color: rgb(10, 146, 26); } #b05{ flex: 2; background-color: rgb(150, 4, 111); } #b06{ flex: 2; background-color: rgb(223, 216, 17); } #c2{ background-color: black; width: 800px; height: 500px; display: flex; } #c01{ flex: 2; background-color: aquamarine; } #c02{ flex: 1; background-color: white; display: flex; justify-content: center; align-items: center; } #c002{ background-color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; } #d01{ flex: 2; background-color: white; } #d02{ flex: 6; background-color: aqua; } #d03{ flex: 2; background-color: white; } #c003{ flex: 1; padding-bottom: 80px; } #c004{ flex: 1; }