HTML元素分类、伪类、背景图片

Posted on   |     |   Views

CSS Cascading style sheets写法

  • 内嵌式
  • 外链式
1
<link rel=”stylesheet” herf=”1.css”>
  • 行内样式

三种样式写法的区别

  • 内嵌样式表：
    • 影响范围限于当前页面，其他页面无效，不能真正实现结构和表现解耦
  • 外链样式表
    • 影响范围大，是整个站点，实现真正的结构表现分离
  • 行内样式表：
    • 仅限于当前标签，作用范围小。结构和表现完全耦合
  • link属于HTML标签，而@import是CSS提供的
  • 页面加载时，link会同时加载，而@import引入的CSS要等到页面中的所有元素加载完再加载
  • @import有兼容性，而link是HTML标签，无兼容性问题
  • link方式的样式的权重高于@import的权重
  • link引入的CSS支持js修改样式，而@import导入的CSS不能被js代码修改样式；

html分类(显示方式)

块元素

最常用的有： div, p, li, h1-h6

特点：

  • 独占一行
  • 可以定义宽度和高度
  • 包含关系的时候，父元素和子元素都为块元素的时候，子元素的宽度等于父元素的宽度

行内元素（内联元素）

典型代表：strong span a em b del s ins i u

特点：

  • 不能设置宽高，
  • 宽高度由内容撑开
  • 在一行上显示

行内块元素

典型代表img input

特点：

  • 在一行显示
  • 可以定义宽高

元素之间的转换

  • 行内元素转成块级元素
1
display:block;
  • 块级元素转成行内元素
1
display:inline-block;
  • 块元素转成行内元素
  • 块、行内元素转成行内块元素

css特性

层叠性

当样式属性冲突时，执行时是最后面样式。和标签调用顺序无关。

继承性

  • 条件：包含关系
  • 普遍性：文本大小、字体、粗细、颜色、行高、风格样式被继承

  • 特殊性：

    • 标题标签不会继承，但受父级元素的影响，文字大小。
    • a标签不会继承父元素的文字颜色。

  • 不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

  • 所有元素可继承：visibility和cursor。
  • 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
  • 终端块状元素可继承：text-indent和text-align。
  • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
  • 文字的所有属性可以继承，行高也可以继承, 但a标签不继承文字颜色

优先级

  • !important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 默认
  • 1000以上 1000 100 10 1 0

继承的权重为0, 权重会叠加

连接伪类

a:link{属性:值;}, 没有点击时默认状态 a{属性:值;} 一般写这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
a:link{
  /*连接默认状态*/
  属性:值;
}
a:visited{
  /*连接访问之后的状态*/
  属性:值;
}
a:hover{        
  /*鼠标放上去显示的状态*/
  属性:值;
}
a:active{
  /*连接激活的状态*/
  属性:值;
}
a:focus{
  /*获取较大*/
  属性:值;
}

注意：连接伪类的顺序不能错；

  • text-decoration 文本修饰
  • text-decoration: none; 去掉a标签的默认样式的下划线
  • text-decoration: underline; 加上下划线
  • text-decoration: line-through; 删除线

背景

  • background-color

background-image

  • background-repeat 背景图片沿着x轴平铺
  • background-position left|right|top|bottom|center 背景定位写具体方位的时候，书写顺序没有限制
  • background-attchment scroll|fixed
    • scroll 背景滚动 默认
    • fixed 背景固定

背景属性连写

1
background: color imge repeat position attachment

特点：没有顺序要求

感谢您的支持！