Quartz

CSS

9分钟阅读

创建

插入样式表

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

多重样式优先级

（内联样式）Inline style >（内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

background

Property描述
background简写属性，作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。

Text

Property描述
color设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

Fonts

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。
  • a:link
  • a:visited
  • a:hover
  • a:active

List

Property描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。

Table

  • table
    • border-collapse:collapse
    • border: 1px solid black;
  • td
    • border-collapse:collapse

box 盒子模型

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

border

outline

margin

padding

Dimension 尺寸

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

display

  • none
  • hidden
  • inline
  • block

position

属性说明值
bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。auto
_length
%
_inherit
clip剪辑一个绝对定位的元素_shape
_auto
inherit
cursor显示光标移动到指定的类型url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
left定义了定位元素左外边距边界与其包含块左边界之间的偏移。auto
_length
%
_inherit
overflow设置当元素的内容溢出其区域时发生的事情。auto
hidden
scroll
visible
inherit
overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域auto
hidden
scroll
visible
no-display
no-content
overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域auto
hidden
scroll
visible
no-display
no-content
position指定元素的定位类型absolute
fixed
relative
static
inherit
right定义了定位元素右外边距边界与其包含块右边界之间的偏移。auto
_length
%
_inherit
top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。auto
_length
%
_inherit
z-index设置元素的堆叠顺序_number
_auto
inherit

overflow

  • visible 默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit 规定应该从父元素继承 overflow 属性的值。

float

属性描述值
clear指定不允许元素周围有浮动元素。left
right
both
none
inherit
float指定一个盒子（元素）是否可以浮动。left
right
none
inherit

对齐

元素居中对齐 margin: auto

文本居中对齐 text-align: center

图片居中对齐 margin: auto

左右对齐 - 使用定位方式 position: absolute;

左右对齐 - 使用 float 方式 float: right;

垂直居中对齐 - 使用 padding 使上下内边距相等 padding: 100px 0;

垂直居中 - 使用 line-height 使行高和元素高相等 line-height: 200px;height: 200px;

垂直居中 - 使用 position 和 transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex 弹性布局

.flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

flex-direction

  • row：横向从左到右排列（左对齐），默认的排列方式。
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  • column：纵向排列。
  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content

  • flex-start：item1 item2 ###
  • flex-end：### item1 item2
  • center：## item1 item2 ##
  • space-between：item1 ## item2
  • space-around：# item1 ## item2 #

align-items

  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex-wrap

  • nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
  • wrap-reverse -反转 wrap 排列。

align-content

  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

到达世界最高城理塘，太美丽了理塘，哎呀这不是丁真吗，还是看看远处的雪山吧家人们

关系图谱