大前端笔记03

HTML第一阶段day03-基础CSS及选择器

一、css入门

• 层叠样式表 （cascading style sheets）
• 用来规定页面上标签的样式

1)、 css的引入方式

A、行内式

• 通过标签的style属性定义样式

• 代码冗余，不符合结构表现相分离的原则

• 少用

   <div style="width: 100px;height: 100px;background-color: red;"></div>

B、内嵌式

• 在head标签之间添加 style标签 ，在style标签之间写入css语法

   <style>
       选择器{
           样式声明1;
           样式声明2;
       }
   </style>

C、外链式

• 在head标签之间添加link标签，使用href属性引入一个.css文件

• 多个页面可以共同使用一个样式表文件

     <link rel="stylesheet" href="./style.css">
     rel: 目标文件和当前文件的关系 
     href: 引入样式表文件的相对路径

2)、 css语法

    选择器{
        样式声明1;
        样式声明2;
    }

    div{
        width:100px;
        height:100px;
    }

选择器： 通过不同的方式找到想要修饰的标签

样式声明 ： 由属性名和属性值组成 属性名：值 ,多组声明之间用分号分隔

二、选择器

• A、通配符选择器 * 选择所有标签
  • 通常用来清除所有标签自带的内外边距

      *{
          margin:0;
          padding:0;
      }
  

• B、标签选择器 tagName 选择标签名相同的标签

      h1{
          ...
      }
      div{
          ...
      }
  

• C、类选择器 .className 通过class属性值选择标签

      .red{
          ...
      }
      .yellow{
          ...
      }
  

  • class属性命名规则
  • 可以包含数字、字母、下划线_、连字符-
  • 不能以数字开头
  • 多个标签可以使用相同的class名称
  • 一个标签可以设置多个class名称，以词列表的形式定义在一个class属性里面 , 多个类名用空格分开

   css:     
       .box{
           ...
       }
       .red{
           ...
       }
   html:
       <div class="box red"></div>
  

• D、ID选择器 #id 通过id选择标签

    css:
        #box{
            ...
        }
    html:
        <div id="box"></div>
  

  • id属性的命名和class相同
  • id是具有唯一性的，同一个页面当中标签的id名不能重复
  • 一个标签也只能有一个id

三、复合选择器

• A 、群组选择器（并集） selector1,selector2,selector3...

   h1,.box,#box1{
       ...
   }

• B 、交集选择器 selector1selector2

   div.red{  // 标签名为div并且类名有red的标签
       ...
   }
   .box.red{  // 类名既有box又有red的标签
       ...
   }

• C、后代选择器 selector1 selector2

   .box1 div{  //选择.box1 所有后代中的div标签（包含子代和子代的子代）
       ...
   }

• D、子代选择器 selector1>selector2

   .box1>div{  //选择.box1 子标签里面的div (不能选中子代的子代)
       ...
   }

四、状态伪类选择器

A、:link 链接初始状态

    a:link{
        ...
    }

B、:visited 链接访问过后的状态

   a:visited{
       ...
   }

C、:hover 链接鼠标悬停状态

    a:hover{
        ...
    }

D、:active 链接的激活状态

    a:active{
        ...
    }

五、text系列（文本）

• A 、text-align 文本对齐方式

  • left 左对齐
  • center 居中对齐
  • right 右对齐

• B 、text-indent : 2em 首行缩进 em代表一个字的大小

• C 、text-decoration: 文本修饰

  • none 没有修饰
  • underline 下划线
  • line-through 中划线（删除线）
  • overline 上划线

• D、color 文本颜色

六、font系列（字体）

• A 、font-size 字体大小
  • 默认16px
• B 、font-weight 字体加粗
  • normal 正常
  • bold 加粗
• C 、font-style 字体风格
  • normal 正常
  • italic 斜体
• D 、line-height 行高
  • length 像素值 60px
  • number 数字 代表font-size的倍数
  • 单行文本垂直居中： 将line-height设置为盒子的height值
• E 、font-family 字体族类
  • 设置多个字体：浏览器会选择第一个能够识别的字体进行显示

      font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  

• F 、font 字体的复合属性
  • font: font-style font-weight font-size/line-height font-family;

      font: italic bold 30px/2 "宋体";
  

  • 简写顺序不能调换
  • 不需要设置的属性可以省略，但是至少包含font-size和font-family

      font:30px "微软雅黑"; //正确
      font:30px; //错误