CSS (c): Basic Attribute two

<span id="Label3"></p> <ul> <ul> <li>Border-width</li> <li>Border-color</li> <li>Border-style</li> </ul> </ul><p><p>The Border-width shorthand property sets the width for all borders of an element, or individually for each edge Border.</p></p><p><p>Only works if the border style is not none. If the border style is none, the border width is actually reset to 0. You are not allowed to specify a negative length Value.</p></p><p><p>The Border-color property sets the color of the four Border. This property can be set to 1 to 4 Colors.</p></p><p><p>The Border-color property is a shorthand property that sets the color of the visible part of all the borders of an element, or sets a different color for 4 edges.</p></p><p><p>The Border-style property is used to style all borders of an element, or to individually set border styles for each edge.</p></p><p><p>The border may appear only if the value is not none.</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #000000;">/ <span style="color: #000000;">* Set the gray solid border of 5px *</span> /</span><span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #000000;"><span style="color: #000000;">p{</span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #000000;"><span style="color: #000000;">border-width:5px 5px 5px 5px;</span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #000000;"><span style="color: #000000;">border-color: #ccc;</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #000000;"><span style="color: #000000;">border-style:solid;</span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;"><span style="color: #000000;">border-width:5px 5px 5px 5px;</span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #000000;"><span style="color: #000000;">border-color: #ccc;</span></span><span style="color: #008080;"><span style="color: #008080;">Ten</span></span>border-style:solid;<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre> <ul> <ul> <li>Border</li> </ul> </ul><p><p>The border shorthand property sets all border properties in a Declaration.</p></p><p><p>The following properties can be set sequentially:</p></p> <ul> <ul> <li>Border-width</li> <li>Border-style</li> <li>Border-color</li> </ul> </ul><p><p>If you do not set one of these values, there will be no problems, such as Border:solid #ff0000; is also Allowed.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set the gray solid border of 5px *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> border:5px solid #ccc;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>border:5px solid #ccc<span style="color: #0000ff;"></ </span> <span style="color: #800000;">p</span><span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Border-radius</li> </ul> </ul><p><p>The Border-radius property is a composite property that can specify up to four Border-*-radius Attributes.</p></p> <ul> <ul> <li>Grammar</li> </ul> </ul>Border-radius:<em><em>1-4 Length</em></em>|<em><em>%</em></em>/<em><em>1-4 Length</em></em>|<em><em>%</em></em>;<p><p><strong>Note:</strong> The order of four values for each radius is: upper-left, upper-right, lower-right, bottom-left corner. If you omit the Lower-left corner, the upper-right corner is the Same. If you omit the lower-right corner, the Upper-left corner is the Same. If you omit the upper-right corner, the Upper-left corner is the Same.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set rounded corners of each radius of 5px *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> border-radius:5px;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>border-radius:5px<span style="color: #0000ff;"></</span> <span style="color: #800000;">P</span> <span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Border-image</li> </ul> </ul><p><p>The Border-image property is a shorthand property that sets the following properties:</p></p> <ul> <ul> <li>Border-image-source</li> <li>Border-image-slice</li> <li>Border-image-width</li> <li>Border-image-outset</li> <li>Border-image-repeat</li> </ul> </ul><p><p>If the value is omitted, its default value is Set.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set Image Border *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> border-image:url (button.png) 0 0 stretch;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>border-image:url (button.png) 0 14 0 14 Stretch<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Box-shadow</li> </ul> </ul><p><p>The Box-shadow property adds one or more shadows to the Border.</p></p> <ul> <ul> <li>Grammar</li> </ul> </ul><pre><pre><em>H-shadow</em> <em>V-shadow</em> <em>Blur</em> <em>spread</em> <em>Color</em> inset;</pre></pre><p class="note"><p class="note">Note: Box-shadow adds one or more shadows to the Box. This property is a comma-delimited list of shadows, each of which is specified by a 2-4-length value, an optional color value, and an optional inset Keyword. The value of the omitted length is 0.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set the Black shadow to the right offset by 5px *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> box-shadow:5px 5px 10px #000;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>box-shadow:5px 5px 10px #000 <span style="color: #0000ff;"> </</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Line-height</li> </ul> </ul><p><p>The Line-height property sets the distance (row height) between rows.</p></p><p class="note"><p class="note">Note: negative values are not allowed.</p></p> <ul> <ul> <li>Description</li> </ul> </ul><p><p>This property affects the layout of the row box. When applied to a block-level element, it defines the minimum distance, not the maximum distance, between the baselines in the Element.</p></p><p><p>The difference between the calculated values of the line-height and font-size (which becomes "line spacing" in CSS) is divided into two halves, which are added to the top and bottom of a text line Content. The smallest box that can contain the content is the row box.</p></p><p><p>The original numeric value specifies a scaling factor, and the descendant element inherits the scaling factor instead of the computed Value.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set the line height of 20px *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> line-height:20px;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>line-height:20px<span style="color: #0000ff;"></</span> <span style="color: #800000;">P</span> <span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Text-indent</li> </ul> </ul><p><p>The Text-indent attribute specifies the indentation of the first line of text in a block of Texts. Negative values are Allowed. If a negative value is used, the first row is indented to the left.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set indent for two characters justifies *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> text-indent:2em;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>text-indent:2em<span style="color: #0000ff;"></</span> <span style="color: #800000;"> P</span><span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Text-align</li> </ul> </ul><p><p>The Text-align property specifies the horizontal alignment of the text in the Element.</p></p><p><p>This property sets the horizontal alignment of text within a BLOCK-LEVEL element by specifying which point the row box is aligned with. By allowing the user agent to adjust the spacing between letters and words in the row content, the value justify can be supported, and different user agents may get different results.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set the text left-justified *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> text-align:left;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>text-align:left<span style="color: #0000ff;"></</span> <span style="color: #800000;"> P</span><span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Letter-spacing</li> </ul> </ul><p><p>The Letter-spacing property increases or decreases whitespace between characters (character spacing).</p></p><p><p>This property defines how much space is inserted between the text character Boxes. Because character glyphs are usually narrower than their character boxes, the usual interval between letters is adjusted when the length value is Specified. therefore, Normal is equivalent to a value of 0.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set the character interval for 5px *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> letter-spacing:5px;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>letter-spacing:5px<span style="color: #0000ff;"></</span> <span style="color: #800000;">P</span> <span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Text-overflow</li> </ul> </ul><p><p>Controls the style of the overflow part of the text Content.</p></p><p><p>Text-overflow is only used to illustrate the text overflow in what way display, to achieve overflow when the effect of ellipsis, you must also define the force text in a row (white-space:nowrap) and overflow content is hidden (overflow:hidden), This is the only way to achieve an overflow text display ellipsis Effect.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set to appear as an ellipsis when the character exceeds the container width *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> overflow:hidden; </span> <span style="color: #008080;">4</span> <span style="color: #000000;"> white-space:nowrap;</span> <span style="color: #008080;">5</span> <span style="color: #000000;"> text-overflow:ellipsis;</span> <span style="color: #008080;">6</span> <span style="color: #000000;">}</span><span style="color: #008080;">7</span><span style="color: #008080;">8</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>overflow:hidden;white-space: nowrap;text-overflow:ellipsis; <span style="color: #0000ff;"></</span> <span style="color: #800000;">P</span> <span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Word-wrap</li> </ul> </ul><p><p>Controls whether a line breaks when the content exceeds the bounds of the Container. A value of normal allows the content to open or overflow the specified container boundary. When the value is break-word, the content wraps within the BOUNDS. If necessary, word breaks are allowed inside WORDS.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set the line wrap *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> word-wrap:break-word;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>word-wrap:break-word<span style="color: #0000ff;"></</span> <span style="color: #800000;">P</span> <span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Background-color</li> </ul> </ul><p><p>The Background-color property sets the background color of the Element.</p></p>Range of element backgrounds<p><p>The Background-color property sets a solid color for the Element. This color fills the Element's content, padding, and border areas, extending to the outer bounds of the Element's border (but excluding margins). If the border has a transparent part (such as a dashed border), the background color is displayed through these transparent sections.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set the background color to Gray *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> background-color: #ccc;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>background-color: #ccc<span style="color: #0000ff;"></ </span> <span style="color: #800000;">p</span><span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Background-image</li> </ul> </ul><p><p>The Background-image property sets the background image for the Element.</p></p><p><p>The background of an element occupies the full dimensions of the element, including padding and borders, but excluding margins.</p></p><p><p>By default, the background image is in the upper-left corner of the element and repeats in both horizontal and vertical directions.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set background picture *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> background-image:url (bgimage.jpg);</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>background-image:url (bgimage.jpg) <span style="color: #0000ff;"></</span> <span style="color: #800000;">P</span> <span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Background-repeat</li> </ul> </ul><p><p>Sets how the Background-image property of an object is Tiled.</p></p><p><p>By default, the vertical and horizontal orientation of the background-image is Repeated.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set X-axis repeat background picture *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> background-image:url (bgimage.jpg);</span> <span style="color: #008080;">4</span> <span style="color: #000000;"> background-repeat:repeat-x;</span> <span style="color: #008080;">5</span> <span style="color: #000000;">}</span><span style="color: #008080;">6</span><span style="color: #008080;">7</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>background-image:url (bgimage.jpg ); background-repeat:repeat-x<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Background-position</li> </ul> </ul><p><p>The Background-position property sets the starting position of the background image.</p></p><p><p>This property sets the position of the background image (defined by background-image), and the background image will start at this point if it is to be repeated.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set the background picture starting from the top left corner *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> background-image:url (bgimage.jpg);</span> <span style="color: #008080;">4</span> <span style="color: #000000;"> background-position:left top;</span> <span style="color: #008080;">5</span> <span style="color: #000000;">}</span><span style="color: #008080;">6</span><span style="color: #008080;">7</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>background-image:url (bgimage.jpg ); background-position:left top<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></pre></pre> <ul> <ul> <li>Background</li> </ul> </ul><p><p>The background shorthand property sets all the background properties in a Declaration.</p></p><p><p>You can set the following properties:</p></p> <ul> <ul> <li>Background-color</li> <li>Background-position</li> <li>Background-size</li> <li>Background-repeat</li> <li>Background-origin</li> <li>Background-clip</li> <li>Background-attachment</li> <li>Background-image</li> </ul> </ul><p><p>If you do not set one of these values, there will be no problem, such as background: #ff0000 URL (' smiley.gif '); is also Allowed.</p></p><p><p>It is generally recommended that you use this property instead of using a single property, because this property is better supported in older browsers and requires fewer letters to be typed.</p></p><pre><pre><span style="color: #008080;">1</span> / <span style="color: #000000;">* Set background picture *</span> / <span style="color: #008080;">2</span> <span style="color: #000000;">p{</span><span style="color: #008080;">3</span><span style="color: #000000;"> background:url (bgimage.jpg) no-repeat left top;</span> <span style="color: #008080;">4</span> <span style="color: #000000;">}</span><span style="color: #008080;">5</span><span style="color: #008080;">6</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>background:url (bgimage.jpg) no-repeat Left top<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></pre></pre><p><p></p></p><p><p>CSS (c): Basic Attribute two</p></p></span>