Command reference of Style Sheet (CSS)
It is possible to explain here nowhere near because there is innumerably a command of Style Sheet. I am specifying the design of the entire homepage with the external style sheet. Specifying everything only with the external style sheet has impossibility.
I often want to apply the style only to certain one place. In this case, Style Sheet is specified on not the external style sheet but an individual page. Such a command forgets easily and I want to explain only the one often used on this page. I think can call my memo.
Writing that specifies Style Sheet of each page
Writing when Style Sheet of each page is specified is written as follows in the head tag. This is unnecessary in principle when specifying it with the external style sheet.
<style type="text/css">
<!--
body{background: white; color: black;}
div{border: 1px solid black;}
-->
</style>
<!-- And --> is the one having ended comment for a browser of the Style Sheet uncorrespondence.
Writing specified directly for tag with Style Sheet
Writing when Style Sheet is individually specified specifies the style directly for tag for instance as follows.
<div style="text-align: center; line-height: 1.5em">HTML command</div>
CSS command reference often used
Positional of text character arrangement (text-align)
text-align: left (Left-aligned) text-align: center (Center-aligned) text-align: right (Right-aligned) text-align: justfy (Justification) There are four types.
?Specification of height of line (width of changing line)(line-height)
It specifies it by the numerical value of the magnification to a present fontsize or other units. The point and "em" that shows the size of the character show the size of the character based on the size of character "M" in "pt".
line-height: normal line-height: 16pt line-height: 130% line-height: 1.5em
Release including turn (clear)
clear: both
For instance, when this is released when turning to the image etc. round the character etc. , crowding, and arranging it, as follows is done in Style Sheet. Even if it is not HR tag, it is possible also by the BR tag and the DIV tag.
<hr style="clear: both;">
Specification of blank (margin) outside of frame (margin)
margin: 10px 5px (Margin-top and bottom 10px, Margin-right and left 5px) margin-top 1px margin-right 5px margin-bottom 0.5em margin-left 25%
All of the top and bottom and the right and left at the time only of margin in one specification are the top and bottom, the right and left in two specification, and applied to the left in four ..on, right and left, and under.. specification in three specification under the right on. "px" shows the size based on a minimum unit of the screen display (pixel).
Center of the block level element About margin: auto
Margin: auto seems to be able to center the block level element, and it doesn't work well in IE when applying to the table. It did not go well in IE7 though auto was specified for both margin-right and margin-left.
It seems to be able to center the CENTER tag without trouble. However, because it is non-recommendation, I do not want to use the CENTER tag if possible in HTML4.01. Then, I had specified only a left margin as follows though I am not a complete centering.
margin-left: 30%
It is possible to center it almost in the specification of a left margin according to the width. The problem was not in IE7, Firefox3, and Opera9 if it was this either.
Method of centering block level element
After all, it is necessary to apply Style Sheet to the block level element by the posture by two steps as follows to center the block level element completely.
In this example Margin-left:auto; Margin-right:auto specifies centering for the table excluding IE. Text-align:center is specified by using the bug in IE. It returns it with text-align:justify though it is centered in all browsers in this because it is centered to contents of the table due to the bug of IE.
<div class="cent_txt"> <table class="cent_blk"> Table of Contents </table> </div>
This With cent_txt The class of cent_blk is as follows.
.cent_txt {text-align:center;} /* text centering on + IE bug */
.cent_blk {margin-left:auto;margin-right:auto;text-align:justify;} /* IE centering on + measures other than IE bug */
It centers it in other methods. (Non-recommend it in HTML4.0)
Centering the image and the table can be centered well in the following method though it is not CSS.
<div align="center">be anything like images and tables</div>
Specification of blank (padding) in frame (padding)
padding: 0px 2px padding-top: 1px padding-right: 5px padding-bottom: 1em padding-left: 10%
This also : just like the time of the margin Coverage changes depending on a specified number of padding.
Padding is used to move the anchor position.
It occasionally wants to set the anchor to the place with nothing, too, and to specify the head of the display for the position that shifts a little up than the anchor position. At that time Even if it goes well in Firefox, it doesn't display it well in IE when specifying position:relative top:-300px. Then, IE is displayed well when doing to padding-top:300px.
<div style="font-size:1pt"> <a name="menu" id="menu" style="padding-top:300px">.</a> </div>
The specification of the frame border together
border: 1px solid grey border-top: 1px dotted red border-right: 5px dashed #000000 border-bottom: 2px #777777 border-left: 3px
Only the necessary one of thickness (border-width), line kind (border-style), and color (border-color) of the line is specified in this order.
Not to change content of CSS later (!important)
Because the advertisement in the homepage outputs an abnormal code at time, this might disarrange the design of the page though it is very convenient to specify home page design with CSS. It specifies it so that the code that will be specified later is given to priority like this and home page design is disarranged as follows.
background-color:#dddddd !important
It is described, "Important" by opening half angle space after it specifies it with CSS in a word.
They are not allowed to change line on the way. (white-space)
white-space: nowrap
When they are not allowed to change line during the link, it is effective. It uses it also for the menu on this page.