CSS基础标签

CSS基础标签

列表

自定义列表dl

• dt
• dd

序列表ul

• 无序列表

  • ul

    • li

• 有序列表

  • ol

    • li

权重优先级

!important 权重无限大

行内样式,权重1000

ID选择器单个权重100

类名选择器，属性选择器，伪类选择器，单个权重10

标签选择器，伪元素选择器，单个权重1

统配符选择器，关系选择器（+，>,~,""），否定伪类，权重0

选择器

交集选择器

• h3.class

  • (交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格如h3.special。 )

并集选择器

• .clss,h3

  • (并集选择器是各个选择器通过逗号连接而成的 )

后代选择器

• .class h3

  • (后代元素选择器是一个空格，空格前后各有一个选择器,作用是：找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的要求的元素)

子代选择器

• .class>h3

  • 作用是：找到大于号的选择器所选中的元素的子元素中大于号后选择器的要求的元素

相邻选择器

• .class>ul+div

  • 作用是：找到加号前的选择器所选中的元素紧跟其后第一个符合+号后选择器选中的元素

兄弟选择器

• .class>ul~div

  • 作用是：找到_{号前的选择器所选中的元素紧跟其后所有符合}号后的选择器选中的元素

行内样式

样式

• 超出显示省略号

  • text-overflow:ellipsis;overflow:hidden;

• 强制不换行

  • white-space:nowrap;

• 自动换行

  • word-wrap:break-word;

行内元素

• a
• span
• i
• input
• img

边距样式

外边距

• margin-top-bottom-left-right

内边距

• padding-top-bottom-left-right

文字样式

大小

• font-size;

字体

• font=family

颜色

• color

盒模型

标准盒模型

• 实际宽尺寸=width+左padding+右padding+左border+右border
  内容区宽尺寸=width

• 组成

  • 内容

    • content

  • 内边距

    • padding

  • 边框

    • border

  • 外边距

    • margin

怪异盒模型

• 实际宽尺寸=width
  内容区宽尺寸=width-左border-右border-左padding-右padding

行内盒模型

• 对齐方式

  • 垂直对齐

    • vertical-align

  • 水平对齐

    • text-align:center

边框样式

• 直线solid
• 虚线dashed
• 点线dotted
• 双实线double
• 立体groove
• 隐藏hidden
• 向内inset

背景样式

背景样式

• 背景图片裁剪区域

  • background-clip

• 背景图片显示基点

  • background-origin

• 背景平铺样式

  • background-repeat

内容对应属性值

• 超出内容隐藏

  • overflow:hidden

• 超出内容正常显示

  • overflow:visible

• 显示滚动条

  • overflow:scroll

• 内容超出显示滚动条

  • overflow:auto

表单元素

input

label

button

子主题 6

下拉选项

• select

  • 子主题 1

防止用户拖拽

• textarea

块级标签

• fieldset

  • 问卷调查
  政府报告

XMind: ZEN - Trial Version