HTML Learning Notes (CSS) No.3

CSS refers to cascading style sheets The CSS style sheet greatly improves the productivity of the property selector selector{Property:value;} such as h1{color:red;front-size:14px;} Selectors grouped like h1,h2,h3{color:red;} Set the H1,h2,h3 label property to the same property inheritance: body{color:red;The derived selector: Defines the style ID selector by the context of the element in its place: You can specify a specific style for an HTML element that has an ID, with # to define the current more common way is that the ID selector is often used to establish a derived selector such as # in HTML defined by the ID attribute of the label {Property: value;} #在html中通过id属性来定义的标签 inner nested child label name {Property: value;} class selector: Class selector displays class as a point or as a derived selector if you first specify its class name in the expression in the Class keyword and then use the following method in the CSS:. The specified class name {Properties: value;} Property selector: Sets the Style property selector for an HTML element with a specified property, and the attribute and value selector are not supported in the IE6 version: <style type= "Text/css" > [title]{Color:        Blue        } [title=te]{color:red; } </style> then specify the Title property value within the specified label to change the color CSS style, font, connection, list, table, outline CSS background: CSS allows the use of solid color as the background, Also allows the use of background images to create fairly complex effects background-attachmentWhether the background image is fixed or scrolls with the rest of the page Background-colorSets the background color of an element background-imageSet the picture to the background background-positionSets the starting position of the background picture background-repeatSet whether and how the background picture repeats background-sizeSpecify the size of the background image Background-originSpecify the location area of the background image Background-clipDraw area with background CSS text: CSS Text properties can define text appearance through text properties, you can change the color of the text, character spacing, align text, decorate it, text indent * to indicate more commonly used colorText color *directionText Direction Line-heightRow Height letter-spacingCharacter Spacing Text-alignAligns the text in an element *text-decorationWant text to add adornments text-indentIndent the first line of text in an element *text-transformThe letter *unicode-bidi in the elementSet text orientation White-spaceHow whitespace is handled in an element word-spacingWord Spacing Text-shadowAdd a shadow to text Word-wrapSpecify text wrapping rules for CSS fonts: CSS can define font family, size, bold, style, and deformation of text font-familySet the font family font-sizeSet the font size Font-styleSet font style Font-variantDisplay text in a small uppercase font or a normal font font-weightTo set the font's thickness for CSS connections: four states A:linkNormal, inaccessible connection a:visitedThe user has access to the connection a:hoverThe mouse pointer is over the connection a:activeBeing clicked on a common connection style: The Text-decoration property is mostly used to remove underlined CSS lists in joins: CSS lists allow you to prevent, change, or use an image as a list flag List-styleAbbreviated list item List-style-imageList item Image list-style-positionList flag Position List-style-typeList types are typically tagged in the form of an ID at the frame level, while the class method is used for specific content details, some data constructs, and so on CSS tables: Table properties can help us greatly improve the appearance of the table Boder-collapseCollapse border (that is, only one line) borderThe border shows the outline of the CSS: it is mainly used to highlight the role of elements outlineSet profile Properties Outline-colorSet Outline color Outline-styleSets the style of the outline Outline-widthSets the width of the outline of the CSS box model: The box model includes margin (margins), Border (border), padding (padding), content (contains width and height width, height) part of the Padding property (inner margin is outside the content, Within the frame) paddingSet all Margins Padding-bottomSet the bottom margin padding-leftSet left margin Padding-rightSet right margin Padding-topSet the top margin CSS border: You can create a border that works well, And can be applied to any element border style: The keyword border-style keyword allows you to define different non-inherited styles (including none) in 10 to make a single-border style change: up or down four directions border-top-styleborder-bottom-styleborder- Left-styleborder-right-style Border Width: border-widthborder-up or down-width border color border-colorborder-up or down-COLORCSS3 border: Border-radius: Rounded Border Box-shadow: Border Shadow Border-image: The border picture has four parameters for the shadow Effect: 1, move to the right a few pixels 2, move down a few pixels 3, the shadow's Transparency 4, the color margin margin:marginmargin-the upper and lower left margin has the superposition nature, If the two-style thing is next to the design margin, margin selects the margin value that is most worthy of that style CSS positioning: Changing the position of elements on the page positioning mechanism: normal flow element determines the placement of the process in the order in which it is positioned in its HTML floating absolute layout CSS positioning properties: PositionPlace the element in a static, relative, absolute, stationary position topElement up offset BottomElement down offset rightElement Right offset leftElement left offset OverflowSet the element to what happens in its area clipSets the shape of the element display Vertical-alignSets the vertical alignment of an element z-indexSet the stacking order of elements position properties: The Static/relative/absolute/fixedabsolute effect is no longer occupies the position of the page when static any offset of the keyword alignment does not affect the fixed when the content can be scrolled, Fixed content does not scroll the float of CSS: float property->leftelement to the left floats rightElement floats to the right noneelement does not float inheritInherit floating property from parent clear property: Remove floating property (including inherited properties) the Clear property value: Left/right: Remove the floating both left-to-right of the element: the left-and-the side is stripped of the floating inherit: the clear value inherited from the parent

HTML Learning Notes (CSS) No.3