CSS Basics-day2

CSS Property Manipulation

CSS text

Text color

{            /*color: #8B5742; color code table *                 / Color: RGBA (255,0,0,0.5);    /* color palette, red, green and blue transparency */            /* color:blue; color name */        }     </style>

Horizontal alignment: The Text-align property specifies the horizontal alignment of the text in the element

{/*background-color:wheat;*/            /*width:100%;*/            /*height:300px;*/            /*line-height:300px;*/text-align:Center;/*Center Display*/            /*Text-align:left left Display*/            /*Text-align:right, right-hand display*/            /*text-align:justify; Justify*/}    </style>

Text Other properties

<!--font-size:10px; Font size--><!--line-height:200px;   Text line High-popular speaking, text height plus text up and down the height of the white space 50%: Based on the percentage of font size, the baseline centerline line top concept--><!--vertical-align:-4px  Set the element content vertical alignment, Valid only for inline elements, invalid for block-level elements--><!--Text-decoration:none       text-decoration property is used to set or remove decorations for text. It is mainly used to remove the underlined--><!--font-family: ' Lucida Bright '    font--><!--font-weight:lighter/bold/border/   Font width--><!--font-style:oblique font style italic--><!--text-indent:150px;      First line indent 150px--><!--letter-spacing:10px;  Letter spacing--><!--word-spacing:20px;  Word spacing--><!--text-transform:capitalize/uppercase/lowercase; Text conversion, for all words to be uppercase or lowercase letters, or capitalize the first letter of each word--

Background properties

{Border:1px solid Red;/*border: 1 pixels, solid, red*/            /*Background-color:plum; Background color*/width:100%;Height:600px;Background-image:URL ("http://dig.chouti.com//images/logo.png");/*Background Image*/background-repeat:no-repeat;/*tiling method, the default horizontal vertical*/background-position:Center Center;/*alignment, centered. right top（20px 20px）*/            /*Background:url ("http://dig.chouti.com//images/logo.png") no-repeat Center Center; Shorthand Method*/}</style>

Border properties

{width:100px;Height:200px;/*border-style:dashed; Type*/            /*border-color:red; Red*/            /*border-width:5px; Width*/            /*border:3px dashed red; Shorthand method: Width, type, color*/Border-right:3px Dashed Red;/*Separate Direction*/            /*border-top-style:dotted;*/            /*Border-right-style:solid;*/            /*border-bottom-style:dotted;*/            /*Border-left-style:none;*/}</style>

List Properties

{/*List-style-type:square; List item flag type*/            /*List-style-image:url ("a.jpg"); Set an image as a list item flag*/            /*List-style-position:inside; !* default outside, sets the position of the list item flag in the list. *!*/List-style:None;/*Shorthand property, set to null*/}</style>

Margins and inner margins

Box model

Margin: Used to control the distance between elements and elements, the most basic use of margin is to control the space around the elements, from a visual angle to achieve the purpose of separation.

padding: Used to control the distance between the content and the border;

Border (Border): a border around the inside margin and outside the content.

Content: The contents of the box, displaying text and images.

Margin Property

margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;

Unilateral margin Properties

margin:10px 20px 20px 10px; the        top margin is 10px        right margin is 20px the        bottom margin is 20px the        left margin is 10pxmargin:10px 20px 10px;        The top margin is 10px and the left margin is        20px        bottom margin is 10pxmargin:10px 20px;        The upper and lower margins are around 10px and        the margin is 20pxmargin:25px.        All 4 margins are 25px

Shorthand Property

margin:0 Auto;

Center

Padding Property

Using the Fill property alone can change the padding around the top and bottom. The abbreviation Fill property can also be used once everything changes.

Set the same margine;

<!    DOCTYPE html>{margin:0 Auto;width:80%; }. Content{Background-color:Darkgrey;Height:500px; }a{text-decoration:None; }. Page-area{text-align:Center;Padding-top:30px;Padding-bottom:30px;Background-color:#f0ad4e; }. Page-area ul Li{Display:Inline-block; }. Page-area ul Li A,. Page-area ul Li Span{Display:Inline-block;Color:#369;Height:25px;width:25px;text-align:Center;Line-height:25px;padding:8px;Margin-left:8px;Border:1px solid #e1e1e1;Border-radius:15%; }. Page-area ul Li Page-next{width:70px;Border-radius:0}. Page-area ul Li Span.current_page{Border:None;Color:Black;Font-weight: the; }. Page-area ul li A:hover{Color:#fff;Background-color:#2459a2; }    </style>

Page Number Instance

Think 1:the outer margin of the body

The border is positioned by default in the upper-left corner of the browser window, but does not have a border to the browser's window, because the body itself is also a box (with the outer HTML), and by default, the body is a number of pixels away from the HTML, The specific values vary by browser, so the box in the body does not close to the border of the browser window, in order to verify this, plus:

Body {    border: 1px solid;     background-color: cadetblue;}

>>>> Workaround:

Body {    margin: 0;}

thinking 2:margin collapse (boundary collapse or boundary overlap)

1, Brother Div:
The margin-bottom of the above div and the margin-top of the div below will collapse, which will take the maximum value of the upper and lower margin as the display value.

2. Parent-Child Div:
If there is no border,padding,inlinecontent in the parent Div, the margin of the child div is searched upward until a label is found that includes one of the border,padding,inline content, then press this div Make margin;

<! DOCTYPE html>{margin:0px; }. Div1{Background-color:Rebeccapurple;width:300px;Height:300px;Overflow:Hidden; }. Div2{Background-color:Green;width:100px;Height:100px;Margin-bottom:40px;Margin-top:20px; }. Div3{Background-color:Teal;width:100px;Height:100px;Margin-top:20px; }</style>

View Code

>>>> Workaround:

Overflow:hidden;

CSS Basics-day2