Tóm tắt cú pháp CSS
Mục đích của việc tóm tắt này là để ĐỌC HIỂU các tập tin CSS mỗi khi bắt gặp chúng trong quá trình phân tích các trang web.
Cú pháp chung
A. CSS Selectors
1. Element selector
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
p {
text-align: center;
color: red;
}2. ID selector
The id selector uses the id attribute of an HTML element to select a specific element.The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Example
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}3. Class selector
The class selector selects HTML elements with a specific class attribute.To select elements with a specific class, write a period (.) character, followed by the class name.
Example
In this example all HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}4. Class selector áp dụng cho một element nhất định
You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class="center" will be red and center-aligned:
p.center {
text-align: center;
color: red;
}5. Class selector: áp dụng nhiều class cho một element
HTML elements can also refer to more than one class.
Example
In this example the <p> element will be styled according to class="center" and to class="large":
<p class="center large">This paragraph refers to two classes.</p>6. Universal selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
* {
text-align: center;
color: blue;
}7. Grouping selectors
The grouping selector selects all the HTML elements with the same style definitions.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}B. CSS Combinators
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
C. CSS Pseudo-classes
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}Example
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}D. CSS Pseudo-elements
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}The following example formats the first line of the text in all <p> elements:
Example
p::first-line {
color: #ff0000;
font-variant: small-caps;
}The following example formats the first letter of the text in all <p> elements:
Example
p::first-letter {
color: #ff0000;
font-size: xx-large;
}Pseudo-elements can be combined with CSS classes:
Example
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:
Example
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before the content of each <h1> element:
Example
h1::before {
content: url(smiley.gif);
}The ::after pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after the content of each <h1> element:
Example
h1::after {
content: url(smiley.gif);
}The ::marker pseudo-element selects the markers of list items.
The following example styles the markers of list items:
Example
::marker {
color: red;
font-size: 23px;
}The ::selection pseudo-element matches the portion of an element that is selected by a user.
The following CSS properties can be applied to ::selection: color, background, cursor, and outline.
The following example makes the selected text red on a yellow background:
Example
::selection {
color: red;
background: yellow;
}
Comments
Post a Comment