[前端学习]css部分学习笔记，第二天

css颜色设置

• 一共有三种颜色设置方法：
  • 预设值。就是用英文名来写颜色的方法，这种方法不推荐用；
  • 十六进制颜色，这是我们在工作中最常用的颜色设置方法，不用记住这些颜色的代码，直接用工具吸取UI制作的图片颜色即可。
  • 另外，十六进制的写法尽量所有字母都用小写，例如红色（#ff0000）[即#红红绿绿蓝蓝]，，并且要求是如果每组色的字符都相同那么就使用简写的方式#f00，但是哪怕有一组不相同都不能简写。
  • RGB颜色设置，例如红色RGB(255,0,0)，这种方法也不常用。
    注意：颜色设置方式在旧浏览器中支持不一，所以统一建议使用十六进制的方式来设置。

line-height行高设置

• 行高即行与行之间的距离。有三种设置格式，
  • 20px，就是像素的格式（一般行高比实际字体像素大10左右）；
  • 2em，em是基于当前对象大小来计算倍数，例如当前对象大小为10px，那么2em=20px；
  • 百分比。

text-align文字对齐设置

• text-align可以让文本内容对齐，分别是：left左对齐（默认值），center(居中对齐)，right（右对齐）

text-indent首行缩进

• text-indent可以让文本自动首行缩进。常用的方法是2em,即首行缩进两个字符大小。当然如果有特殊样式需求可以再设置，也有像素和百分比的设置方式。

标签的语义化

• 良好的html结构可以让网站更容易被搜索引擎所收录
• 核心：在最合适的地方用最合适的标签
• 如何判断：哪怕把CSS样式去掉，一样能够有清晰的页面结构。
• 技巧：
  • 重语义的地方多用有语义的标签，少用<div><span>这种单纯的标签
  • 如果有地方既可以用语义标签又可以用非语义，那么优先用有语义的标签
  • 少用纯样式的标签，样式全部交给css来做。

css复合选择器

• 交集选择器

  • 格式：div.class{属性：属性值}(用.连接)
  • 可以理解为既...又..../并且（需要同时满足条件）。上面那个例子就已经解释了这个选择器的含义：选择既是div标签类名又等于class的。一般用得比较少。
  • 这里要注意，因为是用.来连接的，所以连接类名的时候类名声明前面的那个点就可以省略掉，测试过交集选择器只有标签连接类名才会生效。

• 并集选择器

  • 格式：div,p,.class,#id{属性:属性值}(用,来连接)
  • 如果有多个或者全部样式相同，可以用并集选择器。可以理解为和的意思，可以连接任何形式的选择器，当连接后他们可以共用设置的样式，通常用于集体声明。

• 后代选择器

  • 格式：.class ul li{属性:属性值}(用空格来连接)
  • 后代选择器常用于选择嵌套在内的标签，一层一层的往下找。在实际工作中很多都是嵌套标签，所以这个是比较常用的选择的器。
  • 为什么要用类名来作为最高级元素名，是因为有可能出现两个完全一样的嵌套结构，这个时候使用类名就可以把他们区分开。
  • 理论上只要是嵌套在内的标签，不管多深都能通过后代选择器来找到。
  • 后代选择器的匹配方式是并不是从左到右，这只是代码的书写顺序。实际上计算机为了降低资源消耗，是从内到外匹配，即从右到左。

• 子元素选择器

  • 格式：.class>li{属性:属性值}(用>来连接)
  • 为什么会有子元素选择器出现呢，可以这样理解：
    • 假如说你找li标签，虽然你可以用后代选择器一直往深层找，但如果你只想找下一级元素呢？你只能写.class li这个时候问题就出来了。这个查找范围太大了，它会找到后代里所有的li标签(如果一直往下找不会，但你就不能找到第二级的li了)。
      子元素选择器就为了应对这样的情况。当你使用.class>li来查找时，它只会找打直接的下一层，更深层的忽略。通俗来说就是只找儿子，再往下的都不管。
    • 注意：因为css具有继承性。所以哪怕只设置了下一级标签，但是继承性会让更内层也应用可以继承的样式。
      因此它一般应用在先用其他方式来设置样式，然后再用子选择器来层叠样式，这样属性就不会继承了。