CSS 写法 属性

作用：美化网页
            概念：层叠样式表（级联样式表）Cascading Style Sheets
            层叠：CSS特性
            与HTML之间的关系：
                        ◆CSS以html为基础。

                        ◆CSS代码或者CSS文件不能单独执行。

书写方式：
                   ☞内嵌式写法：将CSS代码放到html页面中
                        ◆在head标签中加上style标签
                               <style type="text/css">

                                        css代码

                               </style>
                        ◆在head标签中可以放置多个style标签

☞外联式写法： link标签
☞行内式写法：

CSS语法格式：
              选择器{属性: 值;  属性:值;.....}
            
               ◆选择器: 选择谁（html标签）
                     ■简单选择器
                           ☞标签选择器
                             ☞类选择器（使用最多）
                             ☞ID选择器
                           ☞通配符选择器
                    ■复合选择器
                         ☞后代选择器（使用最多）
                           ☞并集选择器

                           ☞标签指定式选择器(交集选择器)

               ◆属性

    属性名

作用

 background-color

背景颜色

 color

前景色（文字颜色）

 font-size：  20px

设置文字大小

 width:  20px;

设置宽度

 height：20px；

设置高度

 text-indent: 2em;

设置首行缩进

 text-align: left|center|right

设置内容居中显示（文字，图片）

注意： text-align设置内容居中显示，只能在块级元素中起作用。

 

 

     注意：标签选择器,必须是html标签。

     语法：标签名{属性: 值; ......}


     ☞单位：
              px：像素
              em: 一个文字的大小1em
     ☞颜色表示方式：
               ◆直接设置颜色对应的单词（red,pink。。。。）
               ◆以十六进制的方式设置（最常用）
                
               ◆以RGB的方式设置样式
                     RGB（三原色）
                 R: red     0-255
                   G： green   0-255
                   b:  blue    0-255
              

               ◆RGBA()
                     a: alpha  通道    0-1
                   作用： 实现半透明的效果

   
            
              ◆opacity  实现半透明的效果
                     ☞取值为0 - 1
   

 

１.1  类选择器（重点）

  语法：
         ☞类选择器义
               .自定义类名{属性: 值;  属性: 值;...}
         ☞类选择器调用:
               html标签通过class属性调用类样式
         

     ☞特点：
               ◆一个类样式可以被多个标签同时调用  

        
              ◆一个标签可以同时调用多个类样式（人的名字）

      ☞类的命名规范：
              

               ◆类名不能以数字开头或者纯数字

             ◆不能以特殊字符或者以特殊字符开头定义类名(“_”除外)。
                ◆不推荐使用汉字定义类名
              
                ◆不推荐使用标签名定义类名

１.2  ID选择器（配合Js使用）

   语法：
             ID选择器定义：
               #自定义名称{属性: 值;....}
         ID选择器的调用：

             标签通过ID属性调用

      ID选择器与类选择器之间的区别：
              ◆一个ID样式只能被一个标签调用（身份证）
                ◆一个标签只能调用一个ID样式

 

１.3  通配符选择器

        语法：
                   *{属性： 值;....}
         特点：
                  将页面中所有的标签都选中，设置样式。

１.4  font属性

   作用：设置与文字相关的属性。
       ☞font-size    设置文字大小
         ☞font-weight   设置文字加粗显示
              

         ☞font-style    设置文字斜体  默认字体是宋体
                   ◆normal  默认为正常显示
                   ◆italic    文字斜体
            

         ☞font-family   设置文字字体
                   ◆直接设置字体名称
                      
                   ◆设置字体对应的单词
                      

            
              注意：
                      ◆如果设置多个字体，字体中间使用逗号隔开。
                   ◆设置unicodre编码
                    
              ◆line-height    设置文字的行高
                          注意：
                             ☞该属性只对文字起作用。 

１.5  font属性联写

 语法：
         font:font-style font-weightfont-size/line-height font-family

         注意：
               ◆在font属性联写中，font-size必须在font-family前面。

          ◆font属性联写中，必须有font-size 和font-family的值。
               ◆font属性联写中，如果属性都设置，那么按照 font:font-style font-weight font-size/line-height font-family 顺序写。

首行缩进两个文字

在css中写 text—indent ：2em

复合选择器：

１.1  后代选择器

  语法：（写法）
              选择器 +空格+ 选择器{属性: 值；}

         注意：
                  ◆后代选择器，标签之间必须是嵌套关系
                  ◆后代选择器，选择器与选择器之间必须有空格隔开。
                ◆后代选择器只能改变子元素中的样式。

 

１.2  标签指定式选择器（交集选择器）

   语法：
              标签名.类名{属性: 值;}
      标签之间的关系：
              ◆标签之间属于既.....又...的关系（指的是同一个标签）

并列关系
         

 

１.3  并集选择器

    语法：
              选择器,选择器{属性:值;...} 选择器之间用逗号隔开（中间可以放多个选择器）

     注意：
              ◆并集选择器，标签之间可以是嵌套关系可以是并列关系。