CSS study notes
Because web automated testing, will use more sophisticated targeting methods: CSS positioning, this type of targeting is relatively simple, fast positioning, so continue to study the front end CSS knowledge, summarize learning notes for subsequent viewing. Meanwhile, we hope to be able to help you.
Learning Website: http://www.w3school.com.cn/css/css_intro.asp
CSS refers to Cascading Style Sheets (Cascading Style Sheets). Styles define how to display HTML elements. Styles are typically stored in a style sheet (CSS file). External style sheet can greatly improve efficiency.
CSS rule consists of two main parts: a selector, and one or more statements. Statement by the attribute value pairs.
selector {Attribute 1: 1 Attribute Value; Attribute 2: Attribute Value 2; ... N properties: Property Value N;}
If the property value has spaces, property values remember quotes.
To see another blog post: http://www.cnblogs.com/yufeihlf/p/5717291.html#test7
About CSS positioning selenium, but also for CSS selectors positioning statements.
As both the syntax selection, by a CSS targeting element, the elements operate. One targeted to the elements through CSS, set of elements related to style.
1. Single Label
Such as: h1 {...}
2. Multiple tags
Such as: h1, h2, h3, h4, h5, h6 {...}
3. style inheritance
Such as: body {...}, then the child element under the body, such as p, td, ul, ol, ul, li, dl, dt, dd and body properties are inherited.
But how child elements redefine the style, priority sub-elements own style.
As: p {...}, the tag will be in accordance with the p own pattern set.
4. Derived selector
By based element to define the style in the context of its location.
4.1 Descendant selectors
Related to descendant selectors have a easily overlooked aspect, namely the level spacing between the two elements can be unlimited.
For example, if you write ul em, em this syntax will select all the elements inherited from ul elements, regardless of nesting level of em deep.
Such as: ul em {...}, the following ul em element provided corresponding style.
4.2 subelements selector
Compared with descendant selectors, sub-element selector (Child selectors) can only be selected as an element of a child element of the element.
Such as: ul> em {...}
4.3 adjacent sibling selectors
If you need to select another element immediately after the element, and both have the same parent element, may be used adjacent sibling selector
Such as: h1 + p {margin-top: 50px;}, select the paragraph immediately after appearing elements h1, h1 and p elements have a common parent element
5.id selector
Syntax: #id property values
Examples 1: id set a style for all elements of the center.
#center {text-align: center}
Example 2: id as a table cell td styling elements within the fancy element.
#fancy td {
color: #f60;
background: #666;
}
Example 3: id set as a table cell td style of fancy element.
td#fancy {
color: #f60;
background: #666;
}
6. class selector
Syntax: .class property values
Example 1: set a style class named center of all the elements.
.center {text-align: center}
Example 2: form inside the unit element class called fancy element disposed td style.
.fancy td {
color: #f60;
background: #666;
}
Example 3: class table means td element disposed in the style called fancy.
td.fancy {
color: #f60;
background: #666;
}
7. attribute selector
Syntax: [Properties] or [attribute = attribute value]
8. link selector
a: link - ordinary, non-visited links. a: visited - a link that the user has access. a: hover - mouse pointer is over the link. a: active - the link is clicked the moment.
Example:
a: link {color: # FF0000 ;} / * unvisited link * /
A: visited {Color: # 00FF00;} / * link has been accessed * /
A: hover {Color: # FF00FF;} / * move the mouse pointer over the link * /
a: {Active Color: # 0000FF;} / * * link being clicked /
color: Font color: such as red or # ff0000.
font-family: The font style, such as Times.
font-style: italic text is most commonly used provisions. normal (normal text display). italic (text in italics). Oblique (oblique text display)
font-weight: thickness of the text, such as keywords using bold text to bold.
font-size: font size, such as 14px.
text-align: text alignment, such as Center (centered).
text-transform: character conversion: none (no), uppercase (capital), lowercase (lowercase), capitalize (first letter capitalized).
text-decoration: decorative text attributes. none (no such links are not underlined). underline the elements will be underlined. overline overline will be a draw at the top of the text. Value of the line-through text in the middle of drawing a line through. make text blink blink.
background-color: background color.
list-style-type: list item flag type ul list. The square (block set)
Because web automated testing, will use more sophisticated targeting methods: CSS positioning, this type of targeting is relatively simple, fast positioning, so continue to study the front end CSS knowledge, summarize learning notes for subsequent viewing. Meanwhile, we hope to be able to help you.
Learning Website: http://www.w3school.com.cn/css/css_intro.asp
CSS refers to Cascading Style Sheets (Cascading Style Sheets). Styles define how to display HTML elements. Styles are typically stored in a style sheet (CSS file). External style sheet can greatly improve efficiency.
CSS rule consists of two main parts: a selector, and one or more statements. Statement by the attribute value pairs.
selector {Attribute 1: 1 Attribute Value; Attribute 2: Attribute Value 2; ... N properties: Property Value N;}
If the property value has spaces, property values remember quotes.
To see another blog post: http://www.cnblogs.com/yufeihlf/p/5717291.html#test7
About CSS positioning selenium, but also for CSS selectors positioning statements.
As both the syntax selection, by a CSS targeting element, the elements operate. One targeted to the elements through CSS, set of elements related to style.
1. Single Label
Such as: h1 {...}
2. Multiple tags
Such as: h1, h2, h3, h4, h5, h6 {...}
3. style inheritance
Such as: body {...}, then the child element under the body, such as p, td, ul, ol, ul, li, dl, dt, dd and body properties are inherited.
But how child elements redefine the style, priority sub-elements own style.
As: p {...}, the tag will be in accordance with the p own pattern set.
4. Derived selector
By based element to define the style in the context of its location.
4.1 Descendant selectors
Related to descendant selectors have a easily overlooked aspect, namely the level spacing between the two elements can be unlimited.
For example, if you write ul em, em this syntax will select all the elements inherited from ul elements, regardless of nesting level of em deep.
Such as: ul em {...}, the following ul em element provided corresponding style.
4.2 subelements selector
Compared with descendant selectors, sub-element selector (Child selectors) can only be selected as an element of a child element of the element.
Such as: ul> em {...}
4.3 adjacent sibling selectors
If you need to select another element immediately after the element, and both have the same parent element, may be used adjacent sibling selector
Such as: h1 + p {margin-top: 50px;}, select the paragraph immediately after appearing elements h1, h1 and p elements have a common parent element
5.id selector
Syntax: #id property values
Examples 1: id set a style for all elements of the center.
#center {text-align: center}
Example 2: id as a table cell td styling elements within the fancy element.
#fancy td {
color: #f60;
background: #666;
}
Example 3: id set as a table cell td style of fancy element.
td#fancy {
color: #f60;
background: #666;
}
6. class selector
Syntax: .class property values
Example 1: set a style class named center of all the elements.
.center {text-align: center}
Example 2: form inside the unit element class called fancy element disposed td style.
.fancy td {
color: #f60;
background: #666;
}
Example 3: class table means td element disposed in the style called fancy.
td.fancy {
color: #f60;
background: #666;
}
7. attribute selector
Syntax: [Properties] or [attribute = attribute value]
8. link selector
a: link - ordinary, non-visited links. a: visited - a link that the user has access. a: hover - mouse pointer is over the link. a: active - the link is clicked the moment.
Example:
a: link {color: # FF0000 ;} / * unvisited link * /
A: visited {Color: # 00FF00;} / * link has been accessed * /
A: hover {Color: # FF00FF;} / * move the mouse pointer over the link * /
a: {Active Color: # 0000FF;} / * * link being clicked /
color: Font color: such as red or # ff0000.
font-family: The font style, such as Times.
font-style: italic text is most commonly used provisions. normal (normal text display). italic (text in italics). Oblique (oblique text display)
font-weight: thickness of the text, such as keywords using bold text to bold.
font-size: font size, such as 14px.
text-align: text alignment, such as Center (centered).
text-transform: character conversion: none (no), uppercase (capital), lowercase (lowercase), capitalize (first letter capitalized).
text-decoration: decorative text attributes. none (no such links are not underlined). underline the elements will be underlined. overline overline will be a draw at the top of the text. Value of the line-through text in the middle of drawing a line through. make text blink blink.
background-color: background color.
list-style-type: list item flag type ul list. The square (block set)