前端学习笔记(二)-CSS基础

w8626455
200 阅读7分钟

CSS语法

CSS由三部分组成：

  • 选择器
  • 属性
  • 值
选择器 {
    属性: 值;
}

创建样式表的种类与优先级

  • 浏览器缺省样式
  • 外部样式表
    • 通过link进行连接<link rel="stylesheet" type="text/css" href="mystyle.css">
  • 内部样式表
    • 在head标签中的style进行书写
  • 内联样式表
    • 在标签属性的style中进行书写

优先级： 内联样式>内部样式表>外部样式表>浏览器缺省样式

选择器种类与选择器的专用性

  • 元素选择器：由标签名称表示，如div，p，span
  • 类选择器：由符号.以及后面的类名表示
  • ID选择器：由符号#以及后面的ID名表示
  • 通用选择器：由符号*表示
  • 属性选择器： 存在和值属性选择器
    • [attr]：存在attr属性
    • [attr=value]：存在attr，其值唯一等于value
    • [attr~=value]：存在attr，其值包含value 子串值属性选择器
    • [attr|=value]：存在attr，其值以value或value-开头
    • [attr^=value]：存在attr，其值以value开头
    • [attr$=value]：存在attr，其值以value结尾
    • [attr*=value]：存在attr，其值包含字符串，该字符串的子字符串是value
  • 伪类：以单个冒号:跟在选择器的后面。具有"类"的行为，选择的是一类元素，根据CSS3的定义为：
    • 用于选择DOM树之外的信息，包含匹配那些指定状态的元素：visited，:active，:hover
    • 满足一定逻辑条件的DOM树中的元素，比如:first-child，last-child，first-of-type，last-of-type，nth-child()，nth-of type()
  • 伪元素：为DOM树定义的虚拟元素，具有"元素"的行为，选择的是单个元素指定的内容。比如::before，::selection

伪类与伪元素的参考资料： 伪类和伪元素 我终于理解了伪类和伪元素 伪类与伪元素的区别

各类选择器专用性列表(从低到高) 专用性无影响

  • 通用选择器(*)

专用性个位加1分

  • 元素原则器(div，span)
  • 伪元素

专用性十位加1分

  • 类选择器(.)
  • 属性选择器([attr])
  • 伪类

专用性百位加一分

  • ID选择器

专用性千位加1分

  • 内联样式
  • !important总是优先于其他规则
  • 多个选择器具有相同的专用性时，按照源代码的顺序决定(后面的选择器将战胜先前的选择器)
  • 复合选择器(+,>,~,' ')对专用性无影响

选择器的组合

  • A,B：分组选择器，匹配A（和\或）B的任意元素
  • A B：后代选择器，B是A的后代节点
  • A>B：直接子节点选择器，B是A的直接子节点
  • A+B：相邻兄弟选择器，B是A的下一个兄弟节点
  • A~B：普通兄弟选择器，B是A之后的兄弟节点中任意一个

背景

  • backgroud-color：背景色
  • backgroud-image：背景图片
  • 背景图片的有关属性
    • backgroud-repeat：背景图片的重复行为，默认x和y轴平铺
    • backgroud-attachment：背景图片是否随着页面的其余部分滚动，默认为scroll
    • backgroud-position：背景图片的位置，默认值0% 0%，即左上角
  • backgroud：简写属性，顺序如上所示。

文本

  • color：文本颜色
  • direction：文本方向
  • text-align：文本对齐方式
  • text-decoration：文本修饰，主要用于删除链接的下划线
  • text-transform：文本转换，指定大小写字母的转换
  • text-indent：文本缩进
  • text-shadow：文本的阴影
  • line-height：行间距
  • letter-spacing和word-spacing：中文和英文字间距

字体

  • font-style：字体样式
  • font-variant：提供小型大写字体或正常文本字体
  • font-weight：字体的粗细
  • font-size：字体大小
  • font-family：字体系列
  • font：字体属性的缩写，顺序如上所示

链接

  • 链接样式
    • a:link：未访问的链接
    • a:visited：已访问的链接
    • a:hover：用户鼠标放在链接上
    • a:active：链接被点击的那一刻

列表样式

  • list-style-type：列表项标志的类型
  • list-style-position：列表项所在位置，ouside(默认)与inside
  • list-style-image：设置图像为列表项标志

表格

  • border-collapse：表格的边框是否被折叠成单一的边框，或隔断开。

盒子模型

所有的HTML都可以看成盒子，包括外边距(margin)，边框(border)，内边距/填充(padding)和内容(content)构成。 盒子模型分为W3C标准模式和IE低版本的怪异模式，分别由下述两幅图表示

  • W3C标准模式：
    盒子的总宽度=width(content)+padding+border+margin，width属性表示的content的宽度
  • 怪异模式：
    盒子的总宽度=width(content+padding+border)+margin，width属性表示的content+padding+border的宽度 两种模式可以通过box-sizing进行选择：
  • box-sizing:content-box(标准模式)
  • box-sizing:border-box(怪异模式)

边框border

  • border-width：边框宽度
  • border-style：边框样式
  • border-color：边框颜色
  • border-bottom，border-left，border-right，border-top：单独设置边框

轮廓outline

  • outline是纳入盒子空间计算的，不会增加额外的width和height
  • ouline简写属性的顺次是outline-color，outline-style，outline-width

外边距margin

  • 外边距塌陷，当两个框彼此接触时，它们的间距将取两个margin的最大值
  • 简写属性的顺次是上右下左，(上下)(左右)，百分比的参考值是父元素的width值

内边距\填充padding

  • 简写属性的顺次是上右下左，(上下)(左右)，百分比的参考值是父元素的width值

Display(显示)与Visibility(可见性)

  • display:block：堆放在其他盒子之上的盒子，可以设置高度和宽度，宽度是父元素的宽度，高度由内容决定；具有填满父容器，并随着父容器的宽度自适应的流动特性
  • display:inline：随文本流堆放，宽高设置无效，竖直方向的margin和padding失效。
  • display:inline-block：将对象呈现为inline对象，对象的内容作为block呈现，并可以修改宽高内外边距。
  • display:none：隐藏元素且不占用任何空间
  • visibility:hidden：隐藏元素，隐藏元素仍占据空间并且影响布局

定位position

首先介绍文档流，HTML布局使用的是文档流机制，其中block元素独占一行，inline元素不独占一行。 position通过top、buttom、left、right进行定位

  • static：position的默认值，即没有定位，遵循正常的文档流
  • relative：元素仍处在文档流中，其定位相对自身原来所处的文档流位置进行移动
  • absolute：脱离普通文档流，定位于最近的已定位的祖先元素。如果不存在就逐级向上排查，直到body元素
  • fixed：相对于浏览器窗口是固定位置
  • sticky：相对定位(relative)和固定定位(fixed)的混合，允许定位元素在到达一定阈值时由相对定位切换成固定定位。暂时未使用过。参考资料
  • z-index： 一条从屏幕表面到使用者脸的虚线，默认情况下定位的元素都具有auto(实际为0)的z-index，数值越大离使用者脸的具体越近。
    • 只适用于定位元素(position属性为relative、absolute、fixed)
    • 子元素无论如何都会在父元素上方
    • 相同z-index，定位元素覆盖未定位元素
    • 相同z-index，都是定位元素，按文档流顺序，后面的覆盖前面的

overflow 控制内容在溢出元素框时的表现形式

  • visible：内容溢出元素框(默认)
  • auto:溢出内容隐藏，仅在内容溢出时使用滚动条
  • hidden：溢出内容隐藏
  • scroll：溢出内容隐藏，滚动条持续可见，内容未溢出时禁用，内容溢出时则可用。

background-clip 指的是背景或者背景图片覆盖的范围

  • 覆盖到border：border-box
  • 覆盖到padding：padding-box
  • 覆盖到content：content-box

浮动

浮动的原理：实现文字环绕效果

  • 脱离文档流
  • 还占据着文本流 Float的特性：
  • 破坏性：破坏了元素的inline-box模型，使之没有line-height(文字环绕，父元素高度塌陷)。
  • 包裹性：设置了float之后，其宽度会自动调整为包裹住内容宽度。但是display样式没有变化，即浮动是一个带有方位的display:inline-block属性
  • 清空格

如何避免float的破坏性

  • 为父元素添加overflow：hidden
  • 浮动父元素
  • <div style="clear:both;"></div>当做最后一个字标签放在父标签那里
  • 父元素应用样式
    .clearfix:after {
        display: block;
        clear: both;
        content: "";
        height: 0;
        visibility: hidden;
    }
    /*解决IE6，IE7浮动问题*/
    .clearfix {
        zoom: 1;
    }
avatar
文章
阅读
粉丝