The CSS framework was upgraded from February 21 to 0.7.1. After such a long version upgrade, I finally changed the mode of CSS rules in different CSS files to the mode of a single file, so I feel that the Blueprint CSS framework is now a CSS framework that can be used in actual projects.
This CSS framework sets the html tag as follows:
- The attributes of 43 html tags (91 html 4.0 tags) are reset in a unified manner. (html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ).
- The default style for resetting html tags is: the padding borders inside and outside are all zero, and the font width, font family, and font style are inherited, the font size is (in Chinese, it is better to change the fixed pixel), and the height is aligned with the baseline;
- Set the Row Height in the body to 1.5 times; the font size to 75% (this is better than fixed pixels in Chinese); the font color to #222222 (close to black)
- Set the table boundary spacing to spacing and zero. (With spacing and zero spacing, it is estimated that only in this way can the boundary spacing of the table be set to invisible); the bottom and the outside are filled with 1.4em, and the width is 100%;
- Set the elements in caption, th, and td to the left, and the font width is normal. The background color of caption is # EEEEEE (light gray), and the th background is # C3D9FF (light blue) the font inside is bold, th, and the content of td is filled with 4px, right 10px, and 4px, left 5px;
- Set the height of the elements in table, td, and th to center;
- If the table needs to change the color of the row or the color of a row, the tr. even td class has been given. The background color is # E5ECF9 (light blue)
- Set tfood to italic
- Set blockquote. The filling content before and after the q element is empty, and the reference symbol is empty. The outside filling of blockquote is 1.5em font color #666666 (dark gray ), italics (Chinese italics do not show well. It should be better to change italics instead of the background color or font no. 1)
- Set the border of the connected image to zero;
- Set h1 to h6 font size to fill outside width, color to #111111 (closer to black)
- Set the size of the image from h1 to h6 to 0.
- The default value of the picture element in the row is left floating, and a p img is provided. right class for use when you need to float the right of the image (but most of the time we need to do this, we need to change or create a class separately );
- Set the link color to #000099 (dark blue) with an underline, move the mouse over, and the focus status color to black;
- Set the border of abbr and acronym to a pixel line;
- Set the color of the del Delete word to #666666 (medium gray );
- Set the pre and code text to white-space: pre (that is, do not wrap the text, now <nobr> <wbr> <xmp> are not recommended );
The identifier before the ul and ol lists is defined as a solid dot and an Arabic number.
- There are also some labels whose upper-right and lower-left padding, line height, and font size settings are not detailed.
Several classes can be called separately as needed:
- . Small;
- . Large;
- . Hide not displayed;
- . The font color of quiet is #666666 (dark gray );
- . The font color is #000000 (black );
- . The highlight background color is # FFFF00 (yellow );
- . Added background color: #006600 (green); color: # FFFFFF (white );
- . The removed background color is #990000 (RED). The color is # FFFFFF (white );
- The internal and external fills on the left of. first are all zero;
- . The padding on the right side of last is zero;
- . The internal and external fills on top are all zero;
- The internal and external fills in. bottom are all zero.
CSS for layout:
- . Container is 950 pixels in width and the entire center mode. This class should be mainly used for the overall page control in the page body element. It seems that there is no other use;
- . Showgrid useless class. This is an aid to demonstrate this framework and can be deleted;
- The body element is set to 1.5em, and the left and right sides are filled with zero content.
The column width of the layout gives 24 values with different width settings:
- Div. span-1 to Div. span-24 are all set to left floating, and 10 pixels are filled out of the right;
- Div. Last sets the right outer filling to zero pixels;
- . Span-1 to. span-24 starts from 30 pixels in width and increases every 40 pixels into one unit;
- . Span-24 and Div. span-24 fill in the upper right corner to overwrite the preceding settings. The settings are set to zero.
The above four items can be understood:
- . Span-1 to. span-23 if it is used for DIV elements, this Div has the property of left floating, left filled with 10 pixels and width respectively;
- . Span-1 to. span-23 if it is used for other elements, it only has the width attribute, and does not have the floating attribute or the right outer fill;
- . Span-24 is a special style. If it is used for DIV elements, it is 950 pixels in width, left floating, and left filled with zero;
- . Span-24 is a special style. If it is used for other elements, the width is 950 pixels, no floating, and the right outer is filled with zero;
- Div. the last class is located in the DIV in the CSS file. span-1 to Div. the end of span-24, so if. if the last class is applied to the DIV element, the right outer filling of the DIV element will be overwritten with zero.
Inner filling value:
- . Append-1 to. append-23: Set the inner-Right filling. Starting from 40 pixels, each 40 pixels increases for one unit, and the inner-23 of. append-23 is 920 pixels;
- . Prepend-1 to. prepend-23 set inner left fill, starting from 40 pixels, increasing every 40 pixels for a unit,. prepend-23 inner left fill value is 920 pixels.
Two right-side line styles are given:
- Div. border: set the right padding to 4px, right padding to 5px, and right padding to 1px gray (# EEEEEE;
- Div. colborder: set the right padding to 24px, right padding to 25px, and right padding to 1px gray (# EEEEEE.
Fill style:
- . Pull-1. pull-24 sets the left outer fill, starting from the negative 40 pixels to the negative 960 pixels. Each 40 pixels changes into a unit value and has the left floating and relative positioning attributes;
- . Push-1. push-24 is set to zero fill, and the bottom fill is 1.5 em. The left outer fill starts from 40 pixels to 960 pixels. Every 40 pixels changes to a unit value, and the right outer fill, from a negative 40 pixel to a negative 960 pixel, each 40 pixel changes into a unit value, and has the right floating and relative positioning attributes.
The above two items should be the most difficult to understand part of the CSS framework. I will not elaborate on them here. When I write a column for practical application, I will understand the function;
Some other styles are given:
- . Box is just a box as its name implies. Ha, set the inner to fill 1.5em, the outer to fill 1.5em, and the background color # E5ECF9 (light blue)
Hr sets the html
- The hr. space style is used in the Given the clear floating style:
- . Clearfix: After and. container: After setting. clearfix and. after the iner, the content is ". "(a small dot), displayed as a block element, with a height of 0. Floating elements are not allowed on both sides, and the visibility attribute is hidden (note: the visibility hidden attribute differs from the display hidden attribute. The visibility hidden attribute occupies space while the display hidden attribute does not occupy space );
- . Clearfix and. Container set the display style to intra-row blocks (ie does not fully support this attribute. Currently, this attribute is only used for IE to obtain haslayout );
* HTML. clearfix and * HTML. the container is set to "HTML under the wildcard. clearfix and. the container two styles "attribute height is 1% (the height is 1% and the zoom: 1 function is the same, ie adds 1% or zoom to inline-block: 1. Obtain properties similar to table-cell, which can be identified only under IE6 );
- . Clearfix and. Container set the display style to block mode (overwrite the block mode in the specified row to block mode, but IE will not make haslayout disappear, so as to achieve this );
- . Clear is set to not allow floating elements on both sides.
The first two of the three classes that clear the float are complex. In addition to clearing the float, there are also some other capabilities, basically, the content, order, and code hierarchy of these styles can be cleared in all browsers (if not supported by a browser, so it is difficult to support most of the CSS attributes in this framework, so this framework does not make much sense for this browser.) The specific research is too deep, I am not sure, but for our users, you only need to use these two classes when you know you need to clear the float. As the name suggests ,. the clearfix class is generally used to clear floating by adding one or more div or other html Tag elements that are not included in the content ,. the container class is used on one of your internal elements to clear the floating .. There is nothing to say about the clear class, that is, floating elements on both sides are not allowed.
Form element:
In fact, this part does not need to be carefully studied. Most of the content specified is the font, font size, font color, and border, margin, width, and height of the elements of the form. I will not go into detail about this. You may need to know about it.
Given the focus style of elements (like the dark side), it is a pity that IE does not support it, so this role is not so big. After all, IE is still a giant with market share;
Given three classes, they can be used to identify Block areas with special meanings:. error,. notice,. success, all of which have different background colors and border colors;
- . Error identifies "error" as its name implies"
- . Notice identifies "prompt" as its name implies"
- . Success identifies "successful" as its name implies"
Blueprint visualization tool-boks download
Download blueprint css frameworks
