[自学第三天] 笔记小结

1. CSS:层叠样式表,用来美化网页的.做到结构(HTML)和表现(CSS)分离.

2. 基本语法:
   选择器 { 属性: 属性值; }

3. css引用方式:行间样式、内部样式、外部样式、导入外部样式
   行间样式:直接在标签上书写样式.
   内部样式:在文件的内部书写样式.
   外部样式: (1)先创建一个CSS文件;(2)再用link标签引入这个文件.
   导入外部样式:(1)先创建一个CSS文件;(2)在style标签中用import导入这个文件.
   以上四种CSS引用方式的区别:
   行间样式只作用于当前标签;而内部样式作用于当前文件;外部样式可以被多个HTML文件引用.
   在实际项目开发中,最好使用外部样式.
   外部样式分为link引入和import引入两种方式.这两种方式区别:

   • link是HTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS.
   • link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载.
   • link是HTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持.
   • link支持使用Javascript控制DOM去改变样式;而@import不支持.

4. CSS选择器分类:

   • *:匹配html中所有元素(注意:*的性能差,因为它要匹配所有元素,所以在开发时,不建议使用)
   • 标签选择器:用来匹配对应的标签
   • 类选择器:用来选择class命名的标签
   • ID选择器:用来选择用id命名的标签
   • 派出选择器:根据上下文来确定要选择的标签
   • 伪类选择器
   • 伪元素选择器

5. 选择器的分组 让多个选择器(元素)具有相同的样式,一般用于设置公共样式.

6. 选择器的继承 子元素可以继承父元素的样式,反之不可以.

7. 样式权重
   !important(10000)>内联样式(1000)>id选择器(100)>伪类和伪元素选择器(10)>标签选择器(1)

8. CSS字体

   • font-size:字号(px.%)
   • font-family:字体
   • font-style:文字样式(normal/italic/oblique)
   • font-weight:文字加粗(normal/bold/bolder/lighter/100-900)
   • line-height:行高(px/数字/em等)
   • color:文字的颜色(颜色的单词/rgb()->r:0-255,g:0-255,b:0-255/16进制(以#开头,后跟6位(#rrggbb)或3位(#rgb)16进制数))
   • text-decoration:文字修饰(none/underline/overline/line-through)
   • text-align:文本对齐方式(left/right/center)
   • text-transform:字母大小写(capitalize/uppercase/lowercase/none)
   • text-indent:文本缩进(px/em/%/pt)

   Tip:
   font复合属性:
   font:font-style font-variant font-weight font-size/line-height font-family;
   注意:
   1)属性值的位置顺序
   2)除了font-size和font-family之外,其他任何一个属性值都可以省略.
   3)font-variant:normal/small-caps(让大写字母变得小一些)

9.CSS背景

• background-color:背景色(transparent/color)
• background-image:背景图(none/url)
• background-repeat:背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y)
• background-position:设置对象的背景图像位置({x-number|top|center|bottom}{y-number|left|center|right})
• background-attachment:背景图像滚动位置(scroll/fixed)
• background:设置背景的复合写法. background:color image repeat attachment position 10.CSS伪类选择器 伪类:专门用来表示元素的一种特殊状态. 常用伪类选择器:
• a标签的伪类:
  1):link/:visited/:hover/:active
  2):focus 获得焦点
  3):first-child/:last-child/:nth-child(number)
  11.属性选择器
  [属性名]:包含有指定属性名的元素(常用)
  [属性名=值]:属性名的值为指定值的元素(常用)
  [属性名~=值]:属性名的值包含指定值的元素
  [属性名^=值]:属性名的值以指定值的开头的元素
  [属性名$=值]:属性名的值以指定值的结尾的元素

12. 关系选择器
    1)空格:后代选择器
    2)>:只选择儿子元素
    3)+:兄弟选择

13. CSS伪元素

    1. CSS伪元素与伪类区别:
       CSS引入伪类和伪元素概念是为了格式化文档树以外的信息.也就是说,伪类和伪元素是用来修饰不在文档树中的部分.

    伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的. 它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类.

    伪元素用于创建一些不在文档树中的元素,并为其添加样式.比如说,我们可以通过:Before来在一个元素前增加一些文本, 并为这些文本添加样式.虽然用户可以看到这些文本,但是这些文本实际上不在文档树中.

    2. 伪元素&伪类的特点:
       伪元素和伪类都不会出现在源文档或者文档树中
       伪类允许出现在选择器的任何位置,而一个伪元素只能跟在选择器的最后一个简单选择器后面
       伪元素和伪类名都是大小写不敏感的
       有些伪类是互斥的,而其它的可以同时用在一个元素上.(在规则冲突的情况下,常规层叠顺序决定结果).
    3. :before/:after/:first-letter/:first-line
       前缀可以是一个冒号也可以是双冒号
       ::selection/::placeholder/::backdrop
       前缀只能是双冒号

2019-10-14