CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一)

马肤

温馨提示:这篇文章已超过436天没有更新,请注意相关的内容是否还可用!

摘要:,,本篇文章是关于CSS学习笔记的基础教程第一篇,介绍了CSS的基本概念、语法以及使用方法。文章详细解释了CSS的选择器、样式规则等基础知识,并提供了相关示例。通过学习本文,读者可以掌握CSS的基本操作和应用,为后续的网页设计和布局打下坚实的基础。

1、CSS语法

  • CSS 规则集(rule-set)由选择器和声明块组成:

    CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第1张

  • 选择器指向您需要设置样式的 HTML 元素。

  • 声明块包含一条或多条用分号分隔的声明。

  • 每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。

  • 多条 CSS 声明用分号分隔,声明块用花括号括起来。

    
    
    
    
    
    CSS
    
    body{
    background-color: #EDEDED;
    }
    /* 标题h1样式 */
    h1{
    color: #333333;
    text-align: center;
    font-size: 20px;
    }
    /* 段落样式 */
    p{
    font-size: 15px;
    color: #666666;
    /* 字体 */
    font-family: Verdana;
    }
    
    
    
    

    我的第一个CSS示例

    这是一个段落

    2、CSS选择器

    2.1 什么是CSS选择器

    • CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。

    • 我们可以将 CSS 选择器分为五类:

      (1)简单选择器(根据名称、id、类来选取元素)

      (2)组合器选择器(根据它们之间的特定关系来选取元素)

      (3)伪类选择器(根据特定状态选取元素)

      (4)伪元素选择器(选取元素的一部分并设置其样式)

      (5)属性选择器(根据属性或属性值来选取元素)

      2.2 CSS 元素选择器

      • 元素选择器根据元素名称来选择 HTML 元素。
        h1{
        color: #333333;
        text-align: center;
        font-size: 20px;
        }
        

        2.3 CSS id 选择器

        • id 选择器使用 HTML 元素的 id 属性来选择特定元素。

        • 元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!

        • 要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。

        • id 名称不能以数字开头

          
          
          
          
          
          CSS
          
          body {
          background-color: #EDEDED;
          }
          #para1 {
          text-align: left;
          color: red;
          }
          
          
          
          
          

          这部分受id选择器控制

          2.4 CSS 类选择器

          • 类选择器选择有特定 class 属性的 HTML 元素。

          • 如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。

          • 类名不能以数字开头!

            
            
            
            
            
            CSS
            
            body {
            background-color: #EDEDED;
            }
            p.center{
            text-align:left;
            color: aqua;
            }
            p.size {
            font-size: 20px;
            }
            
            
            
            
            

            这个标题不受影响

            这个段落受类选择器影响

            这个段落受多个类选择器影响

            运行效果:

            CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第2张

            2.5 CSS 通用选择器

            • 通用选择器(*)选择页面上的所有的 HTML 元素。
              
              
              
              
              
              CSS
              
              body {
              background-color: #EDEDED;
              }
              /* 通用选择器 影响页面中的每一个元素 */
              *{
              color: blue;
              text-align: center;
              }
              
              
              
              

              这个段落受通用选择器影响

              2.6 CSS 分组选择器

              • 最好对选择器进行分组,以最大程度地缩减代码。

              • 如需对选择器进行分组,请用逗号来分隔每个选择器。

                
                
                
                
                
                CSS
                
                body {
                background-color: #EDEDED;
                }
                /* 分组选择器 */
                h1,h2,p{
                text-align: left;
                color: brown;
                }
                
                
                
                

                Hello

                你好

                段落

                运行效果:

                CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第3张

                3、CSS的使用

                有三种插入样式表的方法:

                • 外部 CSS
                • 内部 CSS
                • 行内 CSS

                  3.1 外部CSS

                  • 通过使用外部样式表,您只需修改一个文件即可改变整个网站的外观!
                  • 每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。
                  • 外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。
                  • 外部 .css 文件不应包含任何 HTML 标签。
                    
                    
                    
                    
                    
                    Document
                    
                    
                    
                    
                    

                    Hello

                    段落内容

                    baseStyle.css:

                    h1{
                    text-align: center;
                    font-size: 20px;
                    color: #333333;
                    }
                    p{
                    text-align: left;
                    font-size: 15px;
                    color: #666666;
                    }
                    

                    运行效果:

                    CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第4张

                    注意:请勿在属性值和单位之间添加空格(例如 margin-left: 20 px;)。正确的写法是:margin-left: 20px;

                    3.2 内部 CSS

                    
                    
                    
                    body {
                    background-color: linen;
                    }
                    h1 {
                    color: maroon;
                    margin-left: 40px;
                    }
                    
                    
                    
                    

                    This is a heading

                    This is a paragraph.

                    3.3 行内CSS

                    • 行内样式(也称内联样式)可用于为单个元素应用唯一的样式。

                    • 如需使用行内样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

                    • 行内样式失去了样式表的许多优点(通过将内容与呈现混合在一起)。请谨慎使用此方法。

                      
                      
                      
                      
                      
                      Document
                      
                      
                      

                      Hello

                      段落内容

                      3.4 多个样式表

                      • 内部+外部+行内 多种样式一起使用
                      • 最终效果为最后声明的样式
                      • 页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表,其中第一优先级最高:

                        (1)行内样式(在 HTML 元素中)

                        (2)外部和内部样式表(在 head 部分)

                        (3)浏览器默认样式

                        示例一:此时h1的颜色为后声明的orange

                        
                        
                        
                        
                        
                        Document
                        
                        
                        h1{
                        color: orange;
                        }
                        
                        
                        
                        

                        Hello

                        段落内容

                        baseStyle.css:

                        h1{
                        text-align: center;
                        font-size: 20px;
                        color: #333333;
                        }
                        p{
                        text-align: left;
                        font-size: 15px;
                        color: #666666;
                        }
                        

                        运行效果:

                        CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第5张

                        示例二:此时h1的颜色为baseStyle.css中定义的#333333

                        
                        
                        
                        
                        
                        Document
                        
                        h1{
                        color: orange;
                        }
                        
                        
                        
                        
                        

                        Hello

                        段落内容

                        运行效果:

                        CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第6张

                        4、CSS 背景

                        • background-color
                        • background-image
                        • background-repeat
                        • background-attachment
                        • background-position

                          4.1 背景颜色: background-color

                          • 指定元素的背景色
                            
                            
                            
                            
                            
                            Document
                            
                            body{
                            background-color: orange;
                            /* background-color: #EDEDED; */
                            /* background-color: rgb(255,0,0); */
                            }
                            h1{
                            background-color: bisque;
                            }
                            
                            
                            
                            

                            Hello

                            段落内容

                            运行效果:

                            CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第7张

                            4.2 背景图像:background-image

                            • 指定用作元素背景的图像。
                            • 默认情况下,background-image 属性在水平和垂直方向上都重复图像。
                              
                              
                              
                              
                              
                              Document
                              
                              body{
                              background-image: url(imgs/login_bg.png);
                              }
                              
                              
                              
                              

                              Hello

                              段落内容

                              图片资源文件为:

                              CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第8张

                              运行效果:

                              CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第9张

                              4.2.2 背景重复:background-repeat

                              4.2.2.1 仅在水平方向上重复:background-repeat: repeat-x;
                              
                              
                              
                              
                              
                              Document
                              
                              body{
                              background-image: url(imgs/login_bg.png);
                              /* 仅在水平方向上重复 */
                              background-repeat: repeat-x;
                              }
                              
                              
                              
                              

                              Hello

                              段落内容

                              运行效果:

                              CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第10张

                              4.2.2…2 仅在垂直方向上重复:background-repeat: repeat-y;
                              4.2.2.3 不重复background-repeat: no-repeat;
                              
                              
                              
                              
                              
                              Document
                              
                              body{
                              background-image: url(imgs/login_bg.png);
                              background-repeat: no-repeat;
                              }
                              
                              
                              
                              

                              Hello

                              段落内容

                              运行效果:

                              CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第11张

                              4.2.3 背景图像位置:background-position

                              
                              
                              
                              
                              
                              Document
                              
                              body{
                              background-image: url(imgs/login_bg.png);
                              background-repeat: no-repeat;
                              background-position: left top;
                              }
                              
                              
                              
                              

                              Hello

                              段落内容

                              4.2.4 CSS 背景附着:background-attachment

                              • 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)
                                4.2.4.1 背景固定,不随页面滚动 background-attachment: fixed;
                                • 页面内容滚动,图片一直位于设置的左上角
                                  
                                  
                                  
                                  
                                  
                                  Document
                                  
                                  body{
                                  background-image: url(imgs/login_bg.png);
                                  background-repeat: no-repeat;
                                  background-position: left top;
                                  background-attachment: fixed;
                                  }
                                  p{
                                  font-size: 40px;
                                  }
                                  
                                  
                                  
                                  

                                  Hello

                                  段落内容1

                                  段落内容2

                                  段落内容3

                                  段落内容4

                                  段落内容5

                                  段落内容6

                                  段落内容7

                                  段落内容8

                                  段落内容9

                                  段落内容10

                                  段落内容11

                                  段落内容12

                                  段落内容13

                                  段落内容14

                                  段落内容15

                                  段落内容16

                                  段落内容17

                                  段落内容18

                                  段落内容19

                                  段落内容20

                                  CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第12张

                                  4.2.4.2 背景不固定,随页面滚动 background-attachment: scroll;

                                  4.3 CSS background - 简写属性

                                  按照如下顺序进行简化:

                                  • background-color
                                  • background-image
                                  • background-repeat
                                  • background-attachment
                                  • background-position
                                    body {
                                    background-color: orange;
                                    background-image: url(imgs/login_bg.png);
                                    /* 重复样式 */
                                    background-repeat: no-repeat;
                                    /* 是否随页面内容滚动 */
                                    background-attachment: scroll;
                                    /* 位置 */
                                    background-position: left top;
                                    }
                                    

                                    简化为:

                                    body{
                                    background: orange url(imgs/login_bg.png) no-repeat fixed left top;
                                    }
                                    

                                    4.4 所有 CSS 背景属性

                                    CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第13张

                                    5、CSS边框: border

                                    5.1 边框种类

                                    • dotted - 定义点线边框
                                    • dashed - 定义虚线边框
                                    • solid - 定义实线边框
                                    • double - 定义双边框
                                    • groove - 定义 3D 坡口边框。效果取决于 border-color 值
                                    • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
                                    • inset - 定义 3D inset 边框。效果取决于 border-color 值
                                    • outset - 定义 3D outset 边框。效果取决于 border-color 值
                                    • none - 定义无边框
                                    • hidden - 定义隐藏边框
                                      
                                      
                                      
                                      p.dotted {border-style: dotted;}
                                      p.dashed {border-style: dashed;}
                                      p.solid {border-style: solid;}
                                      p.double {border-style: double;}
                                      p.groove {border-style: groove;}
                                      p.ridge {border-style: ridge;}
                                      p.inset {border-style: inset;}
                                      p.outset {border-style: outset;}
                                      p.none {border-style: none;}
                                      p.hidden {border-style: hidden;}
                                      p.mix {border-style: dotted dashed solid double;}
                                      
                                      
                                      
                                      

                                      border-style 属性

                                      此属性规定要显示的边框类型:

                                      点状边框。

                                      虚线边框。

                                      实线边框。

                                      双线边框。

                                      凹槽边框。

                                      垄状边框。

                                      3D inset 边框。

                                      3D outset 边框。

                                      无边框。

                                      混合边框。

                                      运行效果:

                                      CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第14张

                                      5.2 边框宽度: border-width

                                      • border-width 属性指定四个边框的宽度。
                                      • 可以将宽度设置为特定大小(以 px、pt、cm、em 计),也可以使用以下三个预定义值之一:thin、medium 或 thick
                                        
                                        
                                        
                                        
                                        
                                        边框
                                        
                                        p.one {
                                        border-style: dotted;
                                        border-width: 5;
                                        }
                                        /* 上下边框10 左右为20 */
                                        p.two{
                                        border-style: double;
                                        border-width: 10px 20px;
                                        }
                                        /* 上右下左各不一样 */
                                        p.three{
                                        border-style:solid;
                                        border-width: 10px 15px 20px 25px;
                                        }
                                        
                                        
                                        
                                        

                                        这个段落有边框

                                        这个段落边框宽度不一样

                                        这个段落边框宽度都不一样

                                        运行效果:

                                        CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第15张

                                        5.3 边框宽度 :border-color

                                        可以通过以下方式设置颜色:

                                        • name - 指定颜色名,比如 “red”
                                        • HEX - 指定十六进制值,比如 “#ff0000”
                                        • RGB - 指定 RGB 值,比如 “rgb(255,0,0)”
                                        • HSL - 指定 HSL 值,比如 “hsl(0, 100%, 50%)”
                                        • transparent
                                          
                                          
                                          
                                          
                                          
                                          边框
                                          
                                          /* 四个边框相同宽度 */
                                          p.one {
                                          border-style: dotted;
                                          border-width: 5;
                                          border-color: red;
                                          }
                                          /* 上下边框10 左右为20 */
                                          p.two{
                                          border-style: double;
                                          border-width: 10px 20px;
                                          /* 左右为粉色 山下为蓝色 */
                                          border-color: pink blue;
                                          }
                                          /* 上右下左各不一样 */
                                          p.three{
                                          border-style:solid;
                                          border-width: 10px 15px 20px 25px;
                                          border-color: pink red blue black;
                                          }
                                          
                                          
                                          
                                          

                                          这个段落有边框

                                          这个段落边框宽度不一样

                                          这个段落边框宽度都不一样

                                          5.4 CSS 边框各边

                                          • border-top-style
                                          • border-right-style
                                          • border-bottom-style
                                          • border-left-style
                                            p.one {
                                            /* border-style: dotted; */
                                            border-width: 5;
                                            border-color: red;
                                            /* border-color: hsl(0, 100%, 50%); */
                                            /* border-color: rgb(255, 0, 0); */
                                            /* border-color: #ff0000; */
                                            /* 不同边 不同样式 */
                                            border-top-style:dotted ;
                                            border-right-style:double;
                                            border-bottom-style: groove;
                                            border-left-style: inherit;
                                            }
                                            

                                            简化写法:

                                            
                                            
                                            
                                            body {
                                            text-align: center;
                                            }
                                            /* 四个值 */
                                            p.four {
                                            border-style: dotted solid double dashed;
                                            }
                                            /* 三个值 */
                                            p.three {
                                            border-style: dotted solid double;
                                            }
                                            /* 两个值 */
                                            p.two {
                                            border-style: dotted solid;
                                            }
                                            /* 一个值 */
                                            p.one {
                                            border-style: dotted;
                                            }
                                            
                                            
                                            
                                            

                                            单独的边框

                                            四种不同的边框样式。

                                            三种不同的边框样式。

                                            两种不同的边框样式。

                                            一种边框样式。

                                            5.5 CSS 简写边框属性

                                            border 属性是以下各个边框属性的简写属性:

                                            • border-width
                                            • border-style(必需)
                                            • border-color
                                              p {
                                              border: 5px solid red;
                                              }
                                              

                                              或者:

                                              p {
                                              border-left: 6px solid red;
                                              background-color: lightgrey;
                                              }
                                              

                                              5.6 CSS 圆角边框 :border-radius

                                              5.7 所有 CSS 边框属性

                                              CSS学习笔记之基础教程(一),CSS基础教程学习笔记(一) 第16张


0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 【研发日记】Matlab/Simulink自动生成代码(二)——五种选择结构实现方法,Matlab/Simulink自动生成代码的五种选择结构实现方法(二),Matlab/Simulink自动生成代码的五种选择结构实现方法详解(二)
  • 超级好用的C++实用库之跨平台实用方法,跨平台实用方法的C++实用库超好用指南,C++跨平台实用库使用指南,超好用实用方法集合,C++跨平台实用库超好用指南,方法与技巧集合
  • 【动态规划】斐波那契数列模型(C++),斐波那契数列模型(C++实现与动态规划解析),斐波那契数列模型解析与C++实现(动态规划)
  • 【C++】,string类底层的模拟实现,C++中string类的模拟底层实现探究
  • uniapp 小程序实现微信授权登录(前端和后端),Uniapp小程序实现微信授权登录全流程(前端后端全攻略),Uniapp小程序微信授权登录全流程攻略,前端后端全指南
  • Vue脚手架的安装(保姆级教程),Vue脚手架保姆级安装教程,Vue脚手架保姆级安装指南,Vue脚手架保姆级安装指南,从零开始教你如何安装Vue脚手架
  • 如何在树莓派 Raspberry Pi中本地部署一个web站点并实现无公网IP远程访问,树莓派上本地部署Web站点及无公网IP远程访问指南,树莓派部署Web站点及无公网IP远程访问指南,本地部署与远程访问实践,树莓派部署Web站点及无公网IP远程访问实践指南,树莓派部署Web站点及无公网IP远程访问实践指南,本地部署与远程访问详解,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南。
  • vue2技术栈实现AI问答机器人功能(流式与非流式两种接口方法),Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法探究,Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法详解
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,0人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码