May 04, 2021 Foundation5
1. Foundation CSS reference manual
2. Foundation default settings
Foundation uses the browser's default font
font-size:100%
F
or browsers on most desktop devices, the font size defaults to 16px. F
or mobile browsers, the default font size is 12px.
The default font is
"Helvetica Neue"
and line-height is
1.5
These settings are
<body>
the element.
In addition,
<p>
margin between the element and the bottom is 1.25rem and the line-height is 1.6.
The following HTML element, foundation set a separate style to render it, will not take the browser default style. Click "Try it" to view the online instance.
| Elements | Describe | Online instance |
|---|---|---|
| <h1> - <h6> | h1 - h6 title | Give it a try |
| <a> | Light blue link, mouse movement to link will be underlined | Give it a try |
| <small> | Light gray subtitle text | Give it a try |
| <blockquote> | Refers to the content module | Give it a try |
| <strong> | Bold text | Give it a try |
| <em> | Italic | Give it a try |
| <abbr> | Specify the abbreviation of the word, use the element text to appear underlined, the mouse will move up there will be a prompt message | Give it a try |
| <kbd> | Receive keyboard input instructions: CTRL plus P | Give it a try |
| <hr> | Horizon | Give it a try |
| <code> | Code snippets | Give it a try |
| <ul> | No sequence tables | Give it a try |
| <ol> | An ordered list | Give it a try |
| <dl> | Descriptive list | Give it a try |
Use the CSS class to modify the alignment of text:
| Class | Describe | Instance |
|---|---|---|
| .text-left | Align the text to the left | Give it a try |
| .text-right | Align the text to the right | Give it a try |
| .text-center | Center | Give it a try |
| .text-justify | The two ends are aligned | Give it a try |
Use the CSS class to modify the alignment of different size screens of text:
| Class | Describe | Instance |
|---|---|---|
| Left alignment | ||
| .small-text-left | All size screens are aligned to the left | Give it a try |
| .small-only-text-left | Small screen left alignment (width less than 40em) | Give it a try |
| .medium-text-left | Screen left alignment with width greater than 40.0625em | Give it a try |
| .medium-only-text-left | Screen left alignment with widths from 40.0625em to 64em | Give it a try |
| .large-text-left | 宽度大于 64.0625em 尺寸屏幕左对齐 | Give it a try |
| .large-only-text-left | Screens with widths from 64.0625em to 90em are aligned to the left | Give it a try |
| .xlarge-text-left | 宽度大于 90.0625em 尺寸屏幕左对齐 | Give it a try |
| .xlarge-only-text-left | Screens with widths from 90.0625em to 120em are aligned to the left | Give it a try |
| .xxlarge-text-left | The screen is more than 120em wide and the screen is aligned to the left | Give it a try |
| Right alignment | ||
| .small-text-right | All size screens are aligned to the right | Give it a try |
| .small-only-text-right | Small screen right alignment (width less than 40em) | Give it a try |
| .medium-text-right | Screens with widths greater than 40.0625em are aligned to the right | Give it a try |
| .medium-only-text-right | Screens with widths from 40.0625em to 64em are aligned to the right | Give it a try |
| .large-text-right | 宽度大于 64.0625em 尺寸屏幕右对齐 | Give it a try |
| .large-only-text-right | Screens with widths from 64.0625em to 90em are aligned to the right | Give it a try |
| .xlarge-text-right | 宽度大于 90.0625em 尺寸屏幕右对齐 | Give it a try |
| .xlarge-only-text-right | Screens with widths from 90.0625em to 120em are aligned to the right | Give it a try |
| .xxlarge-text-right | Screens larger than 120em in width are aligned to the right | Give it a try |
| Center alignment | ||
| .small-text-center | The screens are centered among all sizes | Give it a try |
| .small-only-text-center | Small screen center alignment (width less than 40em) | Give it a try |
| .medium-text-center | Screens with widths greater than 40.0625em are centered | Give it a try |
| .medium-only-text-center | Screens with widths from 40.0625em to 64em are centered | Give it a try |
| .large-text-center | Screens with widths greater than 64.0625em are centered | Give it a try |
| .large-only-text-center | Screens with widths from 64.0625em to 90em are centered | Give it a try |
| .xlarge-text-center | Screens with widths greater than 90.0625em are centered | Give it a try |
| .xlarge-only-text-center | Screens with widths from 90.0625em to 120em are centered | Give it a try |
| .xxlarge-text-center | Screens larger than 120em in width are centered | Give it a try |
| The two ends are aligned | ||
| .small-text-justify | All size screens are aligned at both ends | Give it a try |
| .small-only-text-justify | Small screen with 2 ends aligned (width less than 40em) | Give it a try |
| .medium-text-justify | Screens with widths greater than 40.0625em are aligned at both ends | Give it a try |
| .medium-only-text-justify | Screens with widths from 40.0625em to 64em are aligned at both ends | Give it a try |
| .large-text-justify | Screens with widths greater than 64.0625em are aligned at both ends | Give it a try |
| .large-only-text-justify | 宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐 | Give it a try |
| .xlarge-text-justify | 宽度大于 90.0625em 尺寸屏幕两端对齐 | Give it a try |
| .xlarge-only-text-justify | 宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐 | Give it a try |
| .xxlarge-text-justify | Screens with widths greater than 120em are aligned at both ends | Give it a try |
| Class | Describe | Instance |
|---|---|---|
| .left | The element floats to the left | Give it a try |
| .right | The element floats to the right | Give it a try |
| .clearfix | Clear Float - must be added to the parent element of the floating element | |
| .hide |
Hidden element (CSS
display: none
)
|
Give it a try |
| .list-inline | Set all elements on the same line | Give it a try |
| .lead | Make the elements stand out | Give it a try |
| .subheader | Set the light-colored elements of the .lt;h1> | Give it a try |