CSS

作者: McMillan | 来源:发表于2017-04-24 16:28 被阅读8次

背景

背景属性

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-size
  • background-origin
  • background-clip

背景简写属性:background
当使用简写属性时,属性值的顺序为::
background-color
background-image
background-repeat
background-attachment
background-position

字体

简写属性:font
简写顺序:style、weight、size、family
size和family不能省略,位置不能交换

文本格式

所有CSS文本属性

属性 描述
color 设置文本颜色
text-align 对齐元素中的文本
vertical-align 设置元素的垂直对齐
text-decoration 向文本添加修饰
text-transform 控制元素中的字母
text-indent 缩进元素中文本的首行
direction 设置文本方向
line-height 设置行高
word-spacing 设置字间距(单词之间)
letter-spacing 设置字符间距(字母之间)
white-space 设置元素中空白的处理方式
text-shadow 设置文本阴影
box-shadow 盒子阴影
text-overflow 指定应向用户如何显示溢出内容
word-wrap 允许长文本换行
word-break 单词拆分换行

链接

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

列表

不同的列表项标记

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

作为列表项标记的图像

ul
{
    list-style-image: url('sqpurple.gif');
}

如果使用缩写属性值的顺序是:
list-style-type
list-style-position (有关说明,请参见下面的CSS属性表)
list-style-image

表格

表格边框

指定CSS表格边框,使用border属性。

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

表格宽度和高度

width和height属性定义表格的宽度和高度。

表格文字对齐

text-align属性设置水平对齐方式,像左,右,或中心
vertical-align垂直对齐属性设置垂直对齐,比如顶部,底部或中间

表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性(padding)

盒子模型

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。
注意:上右下左的顺序

边框

  • border-style (required)
  • border-width
  • border-color
  • border-radius
  • box-shadow
  • border-image
    边框简写属性:border(border-style是必须的)

轮廓(outline)

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。。

尺寸 (Dimension)

属性 描述
width 设置元素的宽度
height 设置元素的高度
line-height 设置行高
max-width 设置元素的最大宽度
max-height 设置元素的最大高度
min-width 设置元素的最小宽度
min-height 设置元素的最小高度

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

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

Positioning(定位)

  • static
  • relative
  • fixed
  • absolute

top, bottom, left, right

Static 定位

HTML元素的默认值,即没有定位,元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:

Relative 定位

相对定位元素的定位是相对其正常位置。
相对定位元素经常被用来作为绝对定位元素的容器块。

Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

z-index

z-index属性指定了一个元素的堆叠顺序
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

Float(浮动)

  • 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
  • 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 浮动元素之后的元素将围绕它。
  • 浮动元素之前的元素将不会受到影响。

清除浮动 - 使用 clear

元素水平对齐(Horizontal Align)

  • 块元素可以把左,右外边距(margin)设置为"自动"对齐。
  • 使用position属性设置上、下、左、右对齐
  • 使用float属性设置左,右对齐

图像透明/不透明

opacity属性是W3C的CSS3建议的一部分。

CSS3 框大小

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

CSS3 多列

属性 描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns 设置 column-width 和 column-count 的简写

选择器

选择器 示例 示例说明 CSS
.class .intro 选择所有class="intro"的元素 1
#id #firstname 选择所有id="firstname"的元素 1
* * 选择所有元素 2
element p 选择所有<p>元素 1
element,element div,p 选择所有<div>元素和<p>元素 1
element element div p 选择<div>元素内的所有<p>元素 1
element>element div>p 选择所有父级是<div>元素的<p>元素 2
element+element div+p 选择所有紧接着<div>元素之后的<p>元素 2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2
[attribute=language] [lang=en] 选择一个lang属性的起始值="EN"的所有元素 2
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个<P>元素的第一个字母 1
:first-line p:first-line 选择每一个<P>元素的第一行 1
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式。 2
:before p:before 在每个<p>元素之前插入内容 2
:after p:after 在每个<p>元素之后插入内容 2
:lang(language) p:lang(it) 选择一个lang属性的起始值="it"的所有<p>元素 2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3
[attribute*=value] a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素,从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素,从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素(包括文本节点) 3
:target #news:target 选择当前活动的#news元素(包含该锚名称的点击的URL) 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not(p) 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 "readonly"(只读) 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 "required" 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3

相关文章

网友评论

      本文标题:CSS

      本文链接:https://www.haomeiwen.com/subject/siypzttx.html