CSS属性和选择器（初级篇）

引子

成文原因有二：其一，复习巩固知识、站在巨人的肩膀上，老罗讲话：“人生苦短，能一步走完的路，尽量别走三步”；其二，分享快乐，“毕竟共享技术的快乐不是什么时候都会有的”。

HTML只有一个作用就是用来添加语义，所以在企业开发中修改样式都是交给CSS来做。下面有请CSS闪亮登场✨✨✨

一、文字属性

1.规定文字样式的属性

• 格式：font-style: italic;
• 取值：normal ： 正常的， 默认就是正常的；italic : 倾斜的
• 快捷键：
  fs font-style: italic;
  fsn font-style: normal;

2.规定文字粗细的属性

• 格式： font-weight: bold;
• 单词取值：bold 加粗、bolder 比加粗还要粗、lighter：细线， 默认就是细线
• 快捷键：
  fw font-weight:;
  fwb font-weight: bold;
  fwbr font-weight: bolder;

3.规定文字大小的属性

• 格式：font-size: 30px;
• 单位：px（像素 pixel）注意：通过font-size设置大小一定要带单位， 也就是一定要写px
• 快捷键
  fz font-size:;
  fz30 font-size: 30px;

4.规定文字字体的属性

• 格式：font-family:"楷体";
• 注意点：

1.如果取值是中文， 需要用双引号或者单引号括起来
2.设置的字体必须是用户电脑里面已经安装的字体

• 快捷键
  ff font-family:;
  补充：如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

5.文本装饰属性

• 格式：text-decoration: underline;
• 取值：underline:下划线、line-through:删除线、overline:上划线、none:什么都没有, 最常见的用途就是用于去掉超链接的下划线。
• 快捷键：
  td text-decoration: none;
  tdu text-decoration: underline;
  tdl text-decoration: line-through;
  tdo text-decoration: overline;

6.文本水平对齐的属性

• 格式：text-align: right;
• 取值：left 左、right 右、center 中。
• 快捷键
  ta text-align: left;
  tar text-align: right;
  tac text-align: center;

7.文本缩进的属性

• 格式：text-indent: 2em;
• 取值：2em, 其中em是单位, 一个em代表缩进一个文字的宽度
• 快捷键
  ti text-indent:;
  ti2e text-indent: 2em;

二、标签选择器

id选择器

• 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
• 在编写id选择器时一定要在id名称前面加上#
• 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的

类选择器

• 作用：根据指定的类名称找到对应的标签, 然后设置属性
• 格式：
  .类名{
  属性:值;
  }

后代选择器

• 格式：
  //先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
  标签名称1 标签名称2{
  属性:值;
  }

注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去

子元素选择器

• 作用：找到指定标签中所有特定的直接子元素, 然后设置属性
• 格式:
  //先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
  标签名称1>标签名称2{
  属性:值;
  }

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去

通用兄弟选择器（CSS3）

• 作用：给指定选择器后面的所有选择器选中的所有标签设置属性
• 格式:
  选择器1~选择器2{
  属性:值;
  }

注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

序选择器（CSS3）

• 同级别的第几个:（不区分类型）
  first-child 选中同级别中的第一个标签
  last-child 选中同级别中的最后一个标签
  nth-child(n) 选中同级别中的第n个标签
  nth-last-child(n) 选中同级别中的倒数第n个标签
  only-child 选中父元素中唯一的标签
• 同类型的第几个:
  first-of-type 选中同级别中同类型的第一个标签
  last-of-type 选中同级别中同类型的最后一个标签
  nth-of-type(n) 选中同级别中同类型的第n个标签
  nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
  only-of-type 选中父元素中唯一类型的某个标签
  nth-child(odd) 选中同级别中的所有奇数
  nth-child(even) 选中同级别中的所有偶数

属性选择器

• 格式:
  //根据指定的属性名称找到对应的标签, 然后设置属性
  [attribute]
  //找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
  [attribute=value]
• 最常见的应用场景：用于区分input属性
  input[type=password]{}
  
  

---------------------------------CSS--------------------------------
//标签选择器
p{  
  color: red;
}
//id选择器
#identity1{  
  color: red;
}
#identity2{  
  color: red;
}
//类选择器
.para{  
  color: red;
}
//后代选择器
div p{  
  color: red;
}
//子元素选择器
div>p{  
  color: red;
}
//交集选择器
p.para{  
  color: red;
}
//并集选择器
#identity1,#identity2{  
  color: red;
}
//通用兄弟选择器h1~p{  
  color: red;
}
//序选择器p:nth-of-type(n+1){  
  color: red;
}
//属性选择器
p[id]{  
  color: red;  
  font-size: 10px;  
  text-decoration: underline;
}
---------------------------------HTML--------------------------------

  
  
我是标题
  
  
我是段落1
  
  
我是段落2

三、CSS三大特性

继承性

• 作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性

注意点:
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
3.a标签的文字颜色和下划线是不能继承的
4.h标签的文字大小是不能继承的

• 应用场景：一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

层叠性

• 作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

优先级判断的三种方式
1.间接选中就是指继承如果是间接选中, 那么就是谁离目标标签比较近就听谁的
2.相同选择器(直接选中)：如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
3.不同选择器(直接选中)：如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠id>类>标签>通配符>继承>浏览器默认

优先级之important

• 作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

注意点:
1.!important只能用于直接选中, 不能用于间接选中
2.通配符选择器选中的标签也是直接选中的
3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
4.!important必须写在属性值得分号前面5.!important前面的感叹号不能省略

优先级之权重

• 作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

权重的计算规则
1.首先先计算选择器中有多少个id, id多的选择器优先级最高
2.如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
3.如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
4.如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的也就是说优先级如果一样, 那么谁写在后面听谁的

• 注意点: 只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

div和span

• div: 一般用于配合css完成网页的基本布局

• span: 一般用于配合css修改网页中的一些局部信息

• div和span有什么区别?

  • div会单独的占领一行,而span不会单独占领一行
  • div是一个容器级的标签, 而span是一个文本级的标签

• 容器级的标签和文本级的标签的区别?

  • 容器级的标签中可以嵌套其它所有的标签(容器级的标签div h ul ol dl li dt dd ...)
  • 文本级的标签中只能嵌套文字/图片/超链接(文本级的标签span p buis strong em ins del ...)

• 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

• 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素

• 名词解释：

  • 块级元素会独占一行(块级元素p div h ul ol dl li dt dd)
  • 行内元素不会独占一行行内元素span buis strong em ins del

• 块级元素和行内元素的区别?

  • 块级元素独占一行如果没有设置宽度, 那么默认和父元素一样宽，如果设置了宽高, 那么就按照设置的来显示
  • 行内元素不会独占一行如果没有设置宽度, 那么默认和内容一样宽、行内元素是不可以设置宽度和高度的
  • 行内块级元素为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

• 快捷键
  di display: inline; 行内
  db display: block; 块级
  dib display: inline-block; 行内块级

背景平铺属性

• 介绍：在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的
• 取值:
  • repeat 默认, 在水平和垂直都需要平铺
  • no-repeat 在水平和垂直都不需要平铺
  • repeat-x 只在水平方向平铺
  • repeat-y 只在垂直方向平铺
• 快捷键
  bgr background-repeat:
• 应用场景:可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度

背景定位属性

• 介绍：在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置
• 格式:
  background-position: 水平方向 垂直方向;
• 取值：
  • 水平方向: left center right
  • 垂直方向: top center bottom
• 如写具体值、例如: background-position: 100px 200px;记住一定要写单位, 也就是一定要写px记住具体的像素是可以接收负数的
• 快捷键:
  bp background-position: 0 0;
• 注意点: 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

背景属性缩写

• 格式：
  background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;（其中任何一个属性都可以被省略）
• 快捷键:
  bg+ background: #fff url() 0 0 no-repeat;
• 背景关联方式：默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式。可通过background-attachment属性修改关联方式
• 格式：
  background-attachment：scroll;
• 取值：
  • scroll 默认值， 会随着滚动条的滚动而滚动
  • fixed 不会随着滚动条的滚动而滚动
• 快捷键:
  ba background-attachment:;

背景图片和插入图片的区别：

1.背景图片仅仅是一个装饰, 不会占用位置插入图片会占用位置
2.背景图片有定位属性, 所以可以很方便的控制图片的位置插入图片没有定位属性, 所有控制图片的位置不太方便
3.插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

边框

• 边框就是环绕在标签宽度和高度周围的线条
• 边框属性的格式
  border: 边框的宽度 边框的样式 边框的颜色;
  //快捷键:
  bd+ border: 1px solid #000; //所有边框
  bd+ border: none; //none 代表不需要边框
  bt+ border-top: 1px solid #000; //上边框
  br+ border-right: 1px solid #000; //右边框
  bb+ border-bottom: 1px solid #000; //下边框
  bl+ border-left: 1px solid #000; //左边框
  //也可以分别设置四条边的边框（注意方向）
  border-width: //上 右 下 左;
  border-style: //上 右 下 左;
  border-color: //上 右 下 左;

注意点:
1.连写格式中颜色属性可以省略, 省略之后默认就是黑色
2.连写格式中样式不能省略, 省略之后就看不到边框了
3.连写格式中宽度可以省略, 省略之后还是可以看到边框

padding(内边距)

• 名词解释：边框和内容之间的距离就是内边距

注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色

margin(外边距)

• 名词解释：标签和标签之间的距离就是外边距
• 用法同内边距

盒子模型的宽和高

• 内容的宽度和高度
  • 通过width/height属性设置的宽度和高度
• 元素的宽度和高度
  • 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  • 高度 同理可证
• 元素空间的宽度和高度
  • 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  • 高度 同理可证

box-sizing属性

• 介绍：CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
• box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变。（原理是增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度）
• box-sizing取值：
  • content-box元素的宽高 = 边框 + 内边距 + 内容宽高
  • border-box元素的宽高 = width/height的宽高

注意：
1.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
2.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
3.margin: 0 auto; 只对水平方向有效, 对垂直方向无效

text-align:center;和margin:0 auto;区别？

• text-align: center;的作用是设置盒子中存储的文字/图片水平居中
• margin:0 auto;的作用是让盒子自己水平居中

清空默认边距

• 原因：为了更好的控制盒子的宽高和计算盒子的宽高等
• 清空默认边距的相关代码：
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
  margin:0;padding:0
  }

行高和字号

• 行高指的是每行内容的高度（盒子高指的是元素的高度）注意区分

规律：
1.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可
2.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中

本文主要借鉴小码哥（很不错的培训机构）视频之跟着江哥狂虐H5，不做商业目的，如有侵权，立即删除，学习CSS的路还长呢，少年莫慌~~
参考资料：
[http://bbs.520it.com/portal.php]
http://www.jianshu.com/users/4312c933b9db/latest_articles