Day04

CSS的选择器与属性

属性

文字属性

规定文字样式的属性

font-style(fs)
font-weight(fw)
font-size(fz)注意:"px"
font-family(ff)注意:汉字要带引号------补充:设置备选字体(包括中英文分别设置字体)
补充:文字属性缩写(注意省略及顺序:size和family不能省略且要置于尾部)

文本属性

文本装饰属性

text-decoration:

line-through(tdl)
underline(tdu)
overline(tdo)
none(td)(常用于去掉a标签下划线)

文本水平对齐属性

text-align:

文本缩进属性

text-indent:2em;(ti2e)

颜色属性

color:值;

取值:

• 英文
• rgb
• rgba
• #FF0000(十六进制)
  +#F00(十六进制缩写)

选择器

标签选择器

• 格式 :
  标签名称{
  属性:值;
  }

id选择器

先设id,再设属性

• 格式:
  #id名称{
  属性:值;
  }
  tips:在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的

类选择器

先设类(class),再设属性

• 格式:
  .类名{
  属性:值;
  }
  tips:类名就是专门用来给CSS设置样式的
  在HTML中每个标签可以同时绑定多个类名

格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">

后代选择器

• 格式:
  标签名称1 标签名称2{
  属性:值;
  }
  tips:
• 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
• 后代选择器可以通过空格一直延续下去

子元素选择器

• 格式:
  标签名称1>标签名称2{
  属性:值;
  }
  tips:
• 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
• 子元素选择器可以通过>符号一直延续下去

交集选择器

• 格式:
  选择器1选择器2{
  属性:值;
  }
  注意:
• 无空格

并集选择器

• 格式:
  选择器1,选择器2{
  属性:值;
  }

兄弟选择器(同级关系)

相邻兄弟选择器(css2)

• 格式:
  选择器1+选择器2{
  属性:值;
  }

通用兄弟选择器(css3)

• 格式:
  选择器1~选择器2{
  属性:值;
  }

序选择器(个数选择器)--为css3新增的选择器中最具代表性

• :first-child
• :first-of-type

• :last-child
• :last-of-type

• :nth-child(n)
• :nth-of-type(n)

• :nth-last-child
• :nth-last-of-type

• :only-child
• :only-of-type

• :nth-child(odd/even)
• :nth-of-type(odd/even)

• :nth-child(xn+y)
• :nth-of-type(xn+y)

属性选择器

• [attribute]
• [attribute=value]
  -最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

• 属性的取值是以什么开头的
  [attribute|=value] CSS2
  [attribute^=value] CSS3
  两者之间的区别:
  CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
  CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
• 属性的取值是以什么结尾的
  [attribute$=value] CSS3
• 属性的取值是否包含某个特定的值得
  [attribute~=value] CSS2
  [attribute*=value] CSS3
  两者之间的区别:
  CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
  CSS3中的只要包含value就可以找到, 无论有没有被隔开
• 通配符选择器