选择器和背景 css

高阶选择器

后代选择器

• 语法： 选择器1 选择器2{ }
• 选择器之间用**空格**隔开

  <style>
          div p {
              color: red;
          }
  </style>
  找到div中所有的p后代，控制其字体颜色为red
  

子代选择器

• 语法：选择器1>选择器2 { }
• 选择器1 为父级，选择器2为子级，最终选择是选择器2选中的标签，选择器2只能为选择器1的子代

   <style>
          /* 只想选中儿子a */
          /* div的儿子a文字颜色是红色 */
          div>a {
              color: red;
          }
      </style>
  

并集选择器

• 语法：选择器1，选择器2 { }
• 选择的是 选择器1 和 选择器2 选中的标签。

  <style>
          /* 选择器1, 选择器2 {} */
          p,
          div,
          span,
          h1 {
              color: red;
          }
   </style>
   控制p ,div,span,h1 的颜色为red
   并集选择器中的每组选择器通常一行写一个，提高代码的可读性。
  

交集选择器

• 语法：选择器1选择器2 { }
• 既被选择器1选中又被选择器2选中，设置时紧挨着没有空格。

  <style>
          /* 必须是p标签,而且添加了box类 */
          p.box {
              color: red;
          }
      </style>
      一般都是标签+类
  

hover伪类选择器

• 当鼠标悬停时设置样式
• 语法：选择器：hover{ }

  div:hover {
              color: green;
          }
  鼠标悬停时为绿色
  

Emmet语法

.p1 为类名为p1的div标签
#id1 为id名为id1的div标签
p.one 为类名为one的p标签
ul>li 为  <ul>
         <li></li>
         </ul>
         
ul>li*3 为 <ul>
        <li></li>
        <li></li>
        <li></li>
           </ul>
 div+p  为<div></div>
           <p></p>
           
a{$}*2  为<a href="">1</a>
          <a href="">2</a>

背景属性

• 属性名：background-color（bgc），右侧小括号里是emmet语法

• 背景颜色默认值是透明： rgba(0,0,0,0) a：transparent a的取值为0~1

• background-image: url('图片的路径') 可以设置背景是否平铺 background-repeat（bgr）取值为： repeat no-repeat repeat-x repeat-y

  1.背景连写
  background: #ff4c00 url('./images/mi-logo.png'); 
  2.背景不平铺靠左 居中， background 简写
  background: url('./images/tb.gif') no-repeat left center;
  在使用简写属性时，属性值的顺序为：
  
  background-color
  background-image
  background-repeat
  background-attachment
  background-position
  

• 背景图片的位置：background-position 两种取值方式：方位名词和数字+px

方位名词可设置9种位置：水平方向：left center right；垂直方向： top center bottom

数字+px：坐标系原点为盒子的左上角 background-position: 50px 100px;

• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

• 如果只指定了一个值，另一个值省略，则第二个值默认居中对齐

• 背景属性连写 推荐：background：color image repeat position

• ** background-size: cover;**

  背景图片和img标签的区别

  • 方法一：直接写上img标签即可
    • img标签是一个标签，不设置宽高默认会以原尺寸显示
  • 方法二：div标签 + 背景图片
    • 需要设置div的宽高，因为背景图片不能撑开div标签

元素显示模式

块级元素

• 独占一行，一行只显示一个

• 宽度默认父元素的宽度，高度默认由内容撑开

• 可以设置宽高，宽高可以控制

  代表标签：

  • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

行内元素

• 一行可以显示多个

• 宽度和高度默认由内容撑开

• 不可以设置宽高

  代表标签：

  • a、span 、b、u、i、s、strong、ins、em、del……

行内块元素

• 一行可以显示多个
• 可以设置宽高

代表标签：

• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

元素显示模式转换

• display: block
• display:inline-block
• display:inline

HTML嵌套规范

• 块级元素作为大容器，可以嵌套块级，行内块，行内

• 行内元素只能嵌套行内元素

• 特殊情况：

  特殊的块级元素：h系列和p只能潜嵌套行内元素，也可以嵌套图片（标题和文章，主要是显示图片和文本的，所以只能包含一些文本标签和图片标签）

  特殊的行内元素：a标签，可以嵌套任意元素，但不能嵌套自己，可以让任何元素变成超链接

居中方法

• 水平居中：text-align：center （1.文本 2.行内元素 span a 等 3.行内块元素 input img；设置一声元素水平居中时，此时直接设置以上元素的父元素）margin: 0 auto;（1.块级元素 设置时直接给当前元素设置）
• 垂直居中：line-height：单行文本
• 

CSS特性

• 继承性：子承父业

  可以继承的常见属性(文字控制属性都可以继承)

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height
  5. ……

• 常见应用场景：
  1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
  2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
• 通过审查元素查看元素的Styles , 发现有一项为 Inherited from
• 继承失效的情况一般都是被浏览器的默认样式覆盖掉