HTML CSS 学习笔记02

1.CSS背景样式

• background-color：背景色
• background-image：背景图
  • url(背景地址)
  • 默认：会水平垂直都铺满背景图
• background-repeat：平铺方式
  • repeat-x x轴平铺
  • repeat-y Y轴平铺
  • repeat （x，y都进行平铺，默认值）
  • no-repeat（都不平铺）
• background-position：背景位置
  • x y：number（px、%）|单词
    • x：left、center、right
    • y：top、center、bottom
• background-attachment：背景图随滚动条移动的方式
  • scroll：默认值（背景位置是按照当前元素进行偏移的）
  • fixed：背景位置是按照浏览器进行偏移的

2.CSS边框样式

• border-style：边框样式
  • solid：实线
  • dashed：虚线
  • dotted：点线
• border-width：边框大小 px
• border-color：边框颜色 red #f00…. 透明：transparent

3.CSS文字样式

• font-family：字体类型

  • 英文、中文

  • 衬线体、非衬线体

    注意点：

    • 多个字体类型的设置目的
    • 引号的添加的目的

• font-size：字体大小 默认19px

  写法：number px|单词（samll、large 不推荐使用）

• font-weight：字体粗细：

  • 模式：normal、bold
  • 写法：单词（normal、bold）|number（100 200 …900，100到500都是正常的，600到900都是加粗的）

• font-style：字体样式

  • 模式：正常-normal、斜体-italic

  • 写法：单词（normal、italic）

    注：oblique也是表示斜体，用的比较少，一般了解即可。

    区别：1.italic带有倾斜属性的字体的才可以设置倾斜操作

    2.oblique没有倾斜属性的字体也可以设置倾斜操作

4.CSS段落样式

• text-decoration：文本装饰

  • 下划线：underline

  • 删除线：line-through

  • 上划线：overline

  • 不添加任何装饰：none

    注：添加多个文本修饰：line-through underline overline

• text-transform：文本大小写（针对英文段落）

  • 小写：lowercase
  • 大写：uppercase
  • 首字母大写：captialize

• text-indent：首行缩进，em单位，相对单位，2em表示缩进两个文字大小

• line-height：定义行高

  • 什么是行高，一行文字的高度，上边距和下边距相等

  • 默认行高：不是固定值，而是根据字体大小变化

  • 取值：

    • number px|scale（比例值，跟文字大小成比例的）

      letter-spacing：字之间的间距

      word-spacing：词之间的间距-针对英文段落

    • 英文和数字不自动折行的问题：

      • word-break：break-all；非常强烈的折行
      • word-wrap：bread-word；不是那么强烈的折行，会产生一些空白区域

5.CSS复合样式

符合的写法：是通过空格的方式实现的。符合写法有的是不需要关心顺序的，例如background、border；有的是需要关系顺序的，例如：font。

• background：red url() repeat 0 0;

• border:1px red solid;

• font:最少要有两个值：size family

  • weight style size family √
  • style weight size family √
  • weight style size/line-height family√

  注如果飞呀混合去写的话，那么要先写符合样式，再写但一样是，这样样式才不会被覆盖掉。

6.CSS选择器

• ID选择器：#elem{} id=“elem”

  注：

  • ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的
  • 命名的规范，由字母、下划线、中划线、数字组成，且第一个不能使数字
  • 驼峰写法：searchButton（小驼峰）、searchButton（大驼峰）
  • 短线写法：search-button
  • 下划线写法：search_button

• CLASS选择器：.elem{} class=“elem”

  注：

  • class选择器是可以服用的
  • 可以添加多个class样式
  • 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
  • 标签+类的写法

• 标签选择器 TAG选择器

  • div{} <div></div>
  • 使用场景：
    • 去掉某些标签的默认样式
    • 复杂的选择器中，如层次选择器

• 群组选择器（分组选择器）：可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用

• 通配选择器：*{} -> div,ul,li,p,h1…{}

  注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用

  使用场景：去掉所有标签的默认样式时

• 层次选择器

  • 后代 m n{}
  • 父子m>n{}
  • 兄弟m~n{}
  • 相邻m+n{}

7.属性选择器

• M[attr]{}
  • =：完全匹配
  • *=：部分匹配
  • ^=：起始匹配
  • $=：结束匹配
  • [][]:组合匹配

8.伪类选择器

M：伪类{}

• :link 访问前的样式 只能添加给a标签

• ：visited 访问后的样式 只能添加给a标签

• ：hover鼠标移入时的样式 可以添加给所有的标签

• ：avtive 鼠标按下时的样式 可以添加给所有的标签

  注：

  • 一般的网站都只设置a{}（link visited active） a:hover{}

  • ：after、：before 通过伪类的方式给元素添加一段文本内容，使用content属性
  • ：checked、：disabled、：foucus都是针对表单元素的

结构型伪类选择器

• nth-of-type() nth-child() 角标是从1开始的，1表示第一项，2表示第二项|n值表示从1到无穷大

• first-of-type

• last-of-type

• only-of-type

  注：nth-of-type（）和nth-child（）之间的区别

  • type：类型
  • child：孩子

7.CSS继承

• 文字相关的样式可以被继承

• 布局相关的样式默认是不能被继承的，但是可以设置继承属性inherit值

8.CSS优先级？

• 相同样式优先级：当这是相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
• 内部样式与外部样式：内部样式与外部样式优先级相同，如果都设置了相同样式，那么厚写的引入方式优先级高
• 单一样式优先级：style行间>id>class>tag>*>继承
  • style行间 权重 1000
  • id 100
  • class 10
  • tag 1
• ！important提升样式优先级，非规范方式，不建议使用。不能针对继承的属性进行优先级的提升
• 标签+类与单类：标签+类>单类
• 群组优先级 群组选择器与单一选择器的优先级相同，靠后写的优先级高。
• 层次优先级
  • 权重比较
    • ul li .box p input{} 1+1+10+1+1
    • .hello span #elem{} 10+1+100
  • 约分比较
    • ul li .box p input{} li p input{}
    • .hello span #elem{} #elem{}

9.CSS盒子模型

• 组成：content->padding->border->margin

  物品 填充物 包装盒 盒子与盒子之间的间距

  • content：内容区域 width和height组成的
  • padding：内边距（内填充）
    • 只写一个值：30px 上下左右
    • 写两个值：30px 40px 上下、左右
    • 写三个值：10px 20px 40px 上、左右、下
    • 写四个值：上、下、左、右
  • 单一样式只能写一个值：padding-left、padding-right、padding-top、padding-bottom

  注：

  • 背景色填充到border以内的区域，包含border
  • 文字在content区域添加
  • padding不能为负数，而margin可以为负数

• box-sizing：

  • 盒尺寸，可以改变盒子模型的展示形态

  • 默认值：content-box：width、height->content

    ​ border-box：width、height->content padding border

  • 使用场景：

    • 不用再去计算一些值
    • 解决一些100%的问题

• 盒子模型的一些问题：

  • mardin叠加问题，出现在上下margin同时存在的时候。会取上下值中较大的作为叠加的值
  • margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题

• 扩展

  • margin左右自适应是可以的，但是上下自适应是不行的。
  • width、height不设置的时候，对盒子模型的影响，会自动去计算容器的打下节省代码。

10.标签分类

• 按类型

  • block：div、p、ul、li、h1…

    • 独占一行
    • 支持所有样式
    • 不写宽度的时候，和父元素的高度相同
    • 所占区域是一个矩形

  • inline：span、a、em、strong、img…

    • 挨在一起
    • 有些样式不支持，例如：width、height、margin、padding
    • 不写宽的时候，宽度由内容决定
    • 所占的区域不一定是矩形
    • 内联标签之间会有空隙，原因：换行产生的

  • inline-block：input、select…

    • 挨在一起，但是支持宽高

    注：布局一般用块标签，修饰文本一般用内联标签

• 按内容（详情：https://www.w3.org/TR/html5/dom.html）

  • flow：流内容
  • metadata：元数据
  • sectioning：分区
  • heading：标题
  • phrasing：措辞
  • embedded：嵌入的
  • interactive：互动的

• 按显示

  • 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容img、input…
  • 非替换元素：将内容直接告诉浏览器，将其显示出来 div、h1、p…

11.显示框类型

dispaly：block、inline、inline-block、none…

区别：display：none 不占空间的隐藏

visibility：hidden 占用空间的隐藏

12.标签嵌套规范

13.溢出隐藏

overflow：

• visible：默认
• hidden
• scroll
• auto
• overflow-x、overflow-y针对两个轴分别设置

14.透明度与手势

• opacity：0~1 透明~不透明 0.5半透明。占空间、所有的子内容也会透明
• rgba（）：0~1 可以让指定的样式透明，而不影响其他样式
• cursor：手势
  • default：默认箭头
  • 要实现自定义手势：
    • 准备图片：.cur、.ico
    • cursor：url(./img/cursor.ico) atuo;

15.最大、最小宽度

• min-width、min-height、max-width、max-height
• %单位：换算->以父容器的大小进行换算
• 一个容器怎么适应屏幕的高：容器加height：100%；body：100%；html：100%
  • html，body{height：100%;}
  • .contrainer{height:100%;}

16.CSS默认样式

• 没有默认样式的：div、span

• 有默认样式的：

  • body->margin：8px
  • h1->margin：上下21.440px；font-weight：bold
  • p->margin：上下16px
  • ul->margin：上下16px；padding：左 40px；list-style：disc；
  • a->text-decoration:underline;

• css reset：

  *{margin：0；padding：0；}

  • 优点：不用考虑哪些标签有默认的margin和padding
  • 缺点：稍微的影响性能
  • body,p,h1,ul{margin：0；padding：0；}

  ul{list-style：none；}

  a{text-decoration：none；color：#999；}

  img{display：block；}

  • 问题的现象：图片跟容器底部有一些空隙
  • 内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐
  • vertical-align：baseline；基线对齐方式，默认值
  • img{vertical-align：bottom；}解决方式是推荐的

  写具体页面的时候或一个布局效果的时候：

  • 写结构
  • CSS重置样式
  • 写具体样式