CSS (3): basic attribute 2: basic css attributes

CSS (3): basic attribute 2: basic css attributes

• Border-width
• Border-color
• Border-style

The abbreviation of border-width attribute is to set the width of all borders of an element, or to set the width of each border separately.

It takes effect only when the border style is not none. If the border style is none, the Border width is actually reset to 0. The negative length value cannot be specified.

The border-color attribute sets the color of the four borders. This attribute can be set to 1 to 4 colors.

The border-color attribute is a short attribute. You can set the colors of visible parts of all borders of an element, or set different colors for the four sides.

The border-style attribute is used to set the style of all borders of an element, or to set the border style for each edge separately.

The border can only appear if the value is not none.

1/* set the gray solid border of 5px */2 p {3 border-width: 5px 5px 5px 5px; 4 border-color: # ccc; 5 border-style: solid; 6} 7 8 <p> border-width: 5px 5px 5px; 9 border-color: # ccc; 10 border-style: solid; </p>

• Border

Set all border attributes in one declaration.

You can set the following attributes in sequence:

• Border-width
• Border-style
• Border-color

If you do not set a value, there will be no problems, such as border: solid # ff0000.

1/* set the gray solid border of 5px */2 p {3 border: 5px solid # ccc; 4} 5 6 <p> border: 5px solid # ccc </p>

• Border-radius

The border-radius attribute is a combination of up to four border-*-radius attributes.

• Syntax

Border-radius: 1-4 length| %/ 1-4 length| %;

Note:The order of the four values for each radius is: upper left corner, upper right corner, lower right corner, and lower left corner. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper-right corner is omitted, the upper-left corner is the same.

1/* set the rounded corner with a radius of 5 PX */2 p {3 border-radius: 5px; 4} 5 6 <p> border-radius: 5px </p>

• Border-image

The border-image attribute is short for setting the following attributes:

• Border-image-source
• Border-image-slice
• Border-image-width
• Border-image-outset
• Border-image-repeat

If the value is omitted, the default value is set.

1/* set the image border */2 p {3 border-image: url(button.png) 0 14 0 14 stretch; 4} 5 6 <p> border-image: url(button.png) 0 14 0 14 stretch </p>

• Box-shadow

The box-shadow attribute adds one or more shadows to the border.

• Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

Note: box-shadow adds one or more shadows to the box. This attribute is a list of shadows separated by commas. Each shadow is defined by 2-4 length values, optional color values, and optional inset keywords. The value of the omitted length is 0.

1/* set the black shadow with a downward right offset of 5px */2 p {3 box-shadow: 5px 5px 10px #000; 4} 5 6 <p> box-shadow: 5px 5px 10px #000 </p>

• Line-height

The line-height attribute sets the line distance (line height ).

Note: Negative values are not allowed.

• Description

This attribute affects the layout of the row box. When a block-level element is applied, it defines the minimum distance between the basic line of the element, rather than the maximum distance.

The difference between the calculated value of line-height and font-size (in CSS, it is "row spacing") is divided into two halves, respectively added to the top and bottom of a text line content. The smallest box that can contain the content is the row box.

The original numeric value specifies a zoom factor, and the descendant element inherits the zoom factor instead of the calculated value.

1/* set the Row height of 20px */2 p {3 line-height: 20px; 4} 5 6 <p> line-height: 20px </p>

• Text-indent

The text-indent attribute specifies the indentation of the first line of text in a text block. Negative values are allowed. If a negative value is used, the first line is indented to the left.

1/* set two character width indent */2 p {3 text-indent: 2em; 4} 5 6 <p> text-indent: 2em </p>

• Text-align

The text-align attribute specifies the horizontal alignment of text in an element.

This attribute sets the horizontal alignment of text in block-level elements by specifying the point to which the row box is aligned. The value of justify can be supported by allowing the user agent to adjust the interval between letters and words in the row content. Different user agents may obtain different results.

1/* set the left alignment of the text */2 p {3 text-align: left; 4} 5 6 <p> text-align: left </p>

• Letter-spacing

The letter-spacing attribute adds or removes spaces (Character spacing) between characters ).

This attribute defines how much space is inserted between text character boxes. Because the font is usually narrower than its character box, the normal interval between letters is adjusted when the length value is specified. Therefore, normal is equivalent to 0.

1/* set the 5px character interval */2 p {3 letter-spacing: 5px; 4} 5 6 <p> letter-spacing: 5px </p>

• Text-overflow

Controls the style of the overflow part of text content.

Text-overflow is only used to describe how to display text overflow. To achieve the ellipsis effect during overflow, you must also define the forced text to be displayed in a line (white-space: nowrap) and overflow content is hidden (overflow: hidden), only in this way can overflow text display ellipsis effect.

1/* When the character exceeds the container width, it is displayed as the ellipsis */2 p {3 overflow: hidden; 4 white-space: nowrap; 5 text-overflow: ellipsis; 6} 7 8 <p> overflow: hidden; white-space: nowrap; text-overflow: ellipsis; </p>

• Word-wrap

Determines whether the line is broken when the content exceeds the container's boundary. When the value is normal, the specified container boundary can be exceeded or exceeded. When the value is break-word, the content will wrap in the boundary. If necessary, the word can be broken internally.

1/* Set automatic line feed */2 p {3 word-wrap: break-word; 4} 5 6 <p> word-wrap: break-word </p>

• Background-color

The background-color attribute sets the background color of an element.

Element background range

The background-color attribute sets a solid color for the element. This color fills in the content, inner margin, and border area of the element and extends to the outer border of the element border (but does not include the outer margin ). If the border has a transparent part (such as a dotted border), the background color is displayed through these transparent parts.

1/* set the background color to gray */2 p {3 background-color: # ccc; 4} 5 6 <p> background-color: # ccc </p>

• Background-image

The background-image attribute sets the background image for the element.

The background of an element occupies all the sizes of the element, including the padding and border, but not the padding.

By default, the background image is located in the upper left corner of the element and repeats horizontally and vertically.

1/* set the background image */2 p {3 background-image: url(bgimage.jpg); 4} 5 6 <p> background-image: url(bgimage.jpg) </p>

• Background-repeat

Set the background-image attribute of the tile object.

By default, the vertical and horizontal directions of the background-image are repeated.

1/* set the x axis to repeat the background image */2 p {3 background-image: url(bgimage.jpg); 4 background-repeat: repeat-x; 5} 6 7 <p> background-image: url(bgimage.jpg); background-repeat: repeat-x </p>

• Background-position

The background-position attribute sets the starting position of the background image.

This attribute sets the position of the original background image (defined by background-image). If the background image is to be repeated, it starts from this point.

1/* set the starting position of the background image to the upper left corner */2 p {3 background-image: url(bgimage.jpg); 4 background-position: left top; 5} 6 7 <p> background-image: url(bgimage.jpg); background-position: left top </p>

• Background

Set all background attributes in a declaration.

You can set the following attributes:

• Background-color
• Background-position
• Background-size
• Background-repeat
• Background-origin
• Background-clip
• Background-attachment
• Background-image

If you do not set a value, there will be no problems, such as background: # ff0000 url('smiley.gif '); is also allowed.

We recommend that you use this attribute instead of a single attribute, because this attribute can be better supported in older browsers and requires fewer letters.

1/* shorthand for setting the background image */2 p {3 background: url(bgimage.jpg) no-repeat left top; 4} 5 6 <p> background: url(bgimage.jpg) no-repeat left top </p>