1. Interview questions in this chapter
1.1 How to use CSS in web pages
1.2 What are the commonly used selectors in CSS?
2. Knowledge points
2.1 Review of the previous chapter
The previous chapter talked about the basic use of tables and forms
2.2 This chapter mainly explains the basic usage of CSS
3.Specific content
3.1 CSSIntroduction
We use HTML to build a stable structural foundation, and the style control of the page is left to CSS. The style of a web page includes the color, size, line shape, spacing, etc. of various elements. This is a huge workload for designing or maintaining a website with a lot of data. Fortunately, you can use CSS to control these styles, which will greatly improve the efficiency of web design and maintenance, and make it easy to unify the overall style of the web page.
CSS is the abbreviation of English Cascading Style Sheet. It is translated into Chinese as cascading style sheet, and some people translate it into cascading style sheet, or style sheet for short. It is a technology used to define the appearance style of web pages. By introducing CSS rules into web pages, it can quickly and efficiently layout the page and accurately control the width, height, position, font, background and other appearance effects of HTML markup objects. . CSS is a markup language that can not only effectively control the style of a web page, but more importantly, it realizes the separation of web page content and style, and allows CSS rules to be stored separately in a document. The extension of the CSS file is "css ".
3.2 CSSBasic grammar
CSS rules consist of two parts: a selector and one or more declarations.
Basic syntax:
Selector {
Attribute 1: value;
Attribute 2: value;
...
Attribute n: value;
}
CSS properties are grouped according to related functions, including fonts, text, backgrounds, lists, animations, etc. The specific usage methods and examples of these properties can be found in subsequent chapters.
3.3 CSSUsage
According to the different usage methods and scope of CSS in HTML documents, the usage of CSS style sheets is divided into three categories: inline styles, internal style sheets and external style sheets, and external style sheets can be divided into linked external styles. table and import external style sheets. In this section we will learn how to use CSS in HTML from four categories.
-
inline style sheet
-
internal style sheet
-
external style sheet
a. Link to an external style sheet
b. Import external style sheets
3.3.1 Inline style sheets
Inline style (inline style), also called inline style, is the most direct of the four methods of using CSS. Its implementation borrows the global attribute style of the HTML element and writes the CSS code directly into it. Strictly speaking, inline style is a loose way of using it. It does not require a selector. In this way, CSS code and HTML code are mixed together, so the use of inline style is not recommended.
Basic syntax:
<tag style="attribute:value; attribute:value; ...">
<!DOCTYPE html> <html> <head> <title>Inline style</title> </head> <body style="background-color:#081f02;color:white;"> <h1 style="text-align :center;">The Book of Songs·Tao Yao</h1> <p style="text-indent:2em;"> "The peach is young, its flowers are burning. When the son returns, it is suitable for his family. The peach is young, There is a peach tree in fact. When the son returns home, it is suitable for his family. When the peach is young, its leaves are pure. When the son returns home, it is suitable for his family. ""Taoyao", Chapter 6 of "The Book of Songs·Zhounan", is about China in the pre-Qin period. ethnic folk songs. The poem consists of three chapters, with four lines in each chapter. It is a poem to congratulate a young girl on her marriage. This poem is inspired by peach blossoms and sings a hymn for the bride. The language of the whole poem is beautiful and concise. It not only cleverly changes "Shi Jia" into various inversions and synonyms, but also repeatedly uses the word "Yi" to reveal the beautiful character of the newlywed mother and her family living in harmony, and also writes about her Their good character injects fresh blood into the newly built family, bringing a harmonious and joyful atmosphere. </p> <p> The whole poem is divided into three chapters. The first chapter uses bright peach blossoms as a metaphor for the bride's youth and charm. People often say: The first person who uses flowers to compare beauty is a genius, the second person who uses flowers to compare beauty is a mediocre person, and the third person who uses flowers to compare beauty is a fool. "The Book of Songs" is China's first collection of poetry, so it is not an exaggeration to say that it is the first place to use flowers to compare beauty. Yao Jiheng's "General Theory of the Book of Songs": "Peach blossoms are the most beautiful in color, so they are used as metaphors for women, and they have opened eternal poems to praise the ancestors of beauties." Since then, flowers, especially peach blossoms, have been used to compare beauties. For example, Ruan Ji of Wei Dynasty "Yong Huai" "The Prosperous Son of the Past": "Peach and plum blossoms bloom every day, scorching with brilliance." Cui Hu of the Tang Dynasty, "Inscribed on Capital City Nanzhuang": "On this day last year, in this gate, the peach blossoms on people's faces reflected each other's red." Song Dynasty Chen Shidao's "Bodhisattva Man" lyrics: " Jade wrists pillow fragrant cheeks, peach blossoms bloom on the face." They all have their own characteristics, and naturally they cannot be dismissed as mediocre or idiots, but they are all influenced by the poem "The Book of Songs", but the influence varies, and the application is clever. That’s all. What is written here is that the fresh peach blossoms are blooming one after another, and the newlyweds who have been dressed up are both excited and shy at the moment, with flushed cheeks. It is really a human face with peach blossoms, and the charm of the two complements each other. The poem describes both scenes and people, and the scenes blend together to create a joyful and warm atmosphere. This kind of scene can still be seen at rural weddings even today. The second chapter expresses wishes for marriage. After the peach blossoms bloom, they will naturally bear fruit. The poet said that its fruit is fat and big, which symbolizes that the bride will give birth to a son early and raise a fat and white baby. The third chapter uses the lush peach leaves to wish the bride’s family prosperity. The abundant fruits on the branches of peach trees and the dense shade of peach branches' leaves are used to symbolize the happiness of the newlyweds' married life. It is really the most beautiful metaphor and the best praise. Zhu Xi's "Collected Poems" believes that each chapter uses "Xing", which is reasonable, but if you play with the poetic meaning, it is true that there is a comparison between Xing and Xing, and both Xing and Xing are used. There are three chapters in the poem. Each chapter starts with peach, and then uses flowers, fruits, and leaves as metaphors. It is very layered: from flowers blooming to fruiting, and then from fruit falling to leaves blooming; the poetic meaning of the metaphor also gradually changes, and is related to The peach blossoms grow in harmony with each other, forming a natural and integrated whole. </p> </body> </html>
3.3.2 Internal style sheets
Internal style sheets should be used when a single document requires special styling.
Internal style sheets place styles <head>in areas of the page, so that the defined styles are applied to this page. Internal style sheets are <style></style>declared using tags, which is a more commonly used method.
Basic syntax:
<head>
……
<style type="text/css">
<!--
Selector 1 {Attribute: value;...}
Selector 2 {Attribute: value;...}
...
Selector n {Attribute: value;... ｝
-->
</style>
……
</head>
Grammar description:
-
<style>The tag defines the style information of the HTML document and specifies how the HTML element is rendered in the browser. The type is used to specify the content type in the element. -
Some older browsers do not recognize
<style>the tag, which means that older browsers ignore<style>the content of the element and display the content directly on the page as text. To prevent this from happening, you can use HTML comments (<!-- Comments -->) to<style>hide the content instead of showing it when the browser does not support the element. Of course, the current mainstream browsers support<style>tags, and under normal circumstances, comments do not need to be used.
<!DOCTYPE html>
<html>
<head>
<title>Internal style sheet</title>
<style type="text/css">
body{
color:#1c3b02; /* Set the foreground color*/
}
h1{
text- align:center; /* Set alignment to center*/
}
p{
line-height:1.5; /* Set line height*/
font-size:14px; /* Set font size*/
}
img{
width:300px; /* Set width */
float:left; /* Set to float on the left*/
}
</style>
</head>
<body>
<h1>The Book of Songs·Peach Blossoms</h1>
<p>
"The peach blossoms burn brightly. The son returns home. , suitable for the family. When the peach is young, it has nectar. When the son returns, it is suitable for the family. When the peach is young, its leaves are pure. When the son returns, it is suitable for the family."<br />
<img src="images/flower.jpg" />
"Tao Yao", the sixth chapter of "The Book of Songs·Zhou Nan", is a Chinese folk song in the pre-Qin era. The poem consists of three chapters, with four lines in each chapter. It is a poem to congratulate a young girl on her marriage. This poem is inspired by peach blossoms and sings a hymn for the bride. The language of the whole poem is beautiful and concise. It not only cleverly changes "Shi Jia" into various inversions and synonyms, but also repeatedly uses the word "Yi" to reveal the beautiful character of the newlywed mother and her family living in harmony, and also writes about her Their good character injects fresh blood into the newly built family, bringing a harmonious and joyful atmosphere.
</p>
<p>
The whole poem is divided into three chapters. The first chapter uses bright peach blossoms as a metaphor for the bride's youth and charm. People often say: The first person who uses flowers to compare beauty is a genius, the second person who uses flowers to compare beauty is a mediocre person, and the third person who uses flowers to compare beauty is a fool. "The Book of Songs" is China's first collection of poetry, so it is not an exaggeration to say that it is the first place to use flowers to compare beauty. Yao Jiheng's "General Theory of the Book of Songs": "Peach blossoms are the most beautiful in color, so they are used as metaphors for women, and they have opened eternal poems to praise the ancestors of beauties." Since then, flowers, especially peach blossoms, have been used to compare beauties. For example, Ruan Ji of Wei Dynasty "Yong Huai" "The Prosperous Son of the Past": "Peach and plum blossoms bloom every day, scorching with brilliance." Cui Hu of the Tang Dynasty, "Inscribed on Capital City Nanzhuang": "On this day last year, in this gate, the peach blossoms on people's faces reflected each other's red." Song Dynasty Chen Shidao's "Bodhisattva Man" lyrics: " Jade wrists pillow fragrant cheeks, peach blossoms bloom on the face." They all have their own characteristics, and naturally they cannot be dismissed as mediocre or idiots, but they are all influenced by the poem "The Book of Songs", but the influence varies, and the application is clever. That’s all. What is written here is that the fresh peach blossoms are blooming one after another, and the newlyweds who have been dressed up are both excited and shy at the moment, with flushed cheeks. It is really a human face with peach blossoms, and the charm of the two complements each other. The poem describes both scenes and people, and the scenes blend together to create a joyful and warm atmosphere. This kind of scene can still be seen at rural weddings even today. The second chapter expresses wishes for marriage. After the peach blossoms bloom, they will naturally bear fruit. The poet said that its fruit is fat and big, which symbolizes that the bride will give birth to a son early and raise a fat and white baby. The third chapter uses the lush peach leaves to wish the bride’s family prosperity. The abundant fruits on the branches of peach trees and the dense shade of peach branches' leaves are used to symbolize the happiness of the newlyweds' married life. It is really the most beautiful metaphor and the best praise. Zhu Xi's "Collected Poems" believes that each chapter uses "Xing", which is reasonable, but if you play with the poetic meaning, it is true that there is a comparison between Xing and Xing, and both Xing and Xing are used. There are three chapters in the poem. Each chapter starts with peach, and then uses flowers, fruits, and leaves as metaphors. It is very layered: from flowers blooming to fruiting, and then from fruit falling to leaves blooming; the poetic meaning of the metaphor also gradually changes, and is related to The peach blossoms grow in harmony with each other, forming a natural and integrated whole.
</p>
</body>
</html>
3.3.3 Linking external style sheets
When you want to ensure a unified style of the site, or when there is a lot of style content to be defined and multiple pages need to share styles, you can use an external style sheet. Linking to an external style sheet means saving the style sheet as an external style sheet file, and then <link>linking to the style sheet file using a tag in the page. <link>The tag is placed in the area of the page <head>.
Basic syntax:
<head> <link href="stylesheet path" rel="stylesheet" type="text/css" /> …… </head>
Grammar description:
-
href: indicates the style sheet storage path.
-
rel: used to define the relationship between the linked file and HTML. rel="stylesheet" refers to using this external style sheet in the page.
-
The type attribute is used to specify the file type. "text/css" means that the file type is style sheet text.
/*Contents of css file (style.css)*/
h1{
text-align:center; /* Set alignment to center*/
}
p{
line-height:1.5; /* Set line height*/
font-size:14px; /* Set font size*/
}
img{
width:120px; /* Set width*/
}
css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Tiducheng Nanzhuang</h1> <p> "On this day last year, in this door, the faces of the people and the peach blossoms reflected each other's red. The human face has gone nowhere, but the peach blossoms still smile in the spring breeze. "<br /> The time of creation of this poem is not clearly recorded in historical records. However, Meng Qi's "Poetry of Poem" from the Tang Dynasty and "Taiping Guangji" from the Song Dynasty recorded the "Essence" of this poem: After Cui Hu went to Chang'an to take the Jinshi examination and failed, I met a beautiful girl by chance in the southern suburbs of Chang'an. I revisited the girl during the Qingming Festival the following year but did not meet her, so I wrote this poem. This record has the color of a legendary novel, and its authenticity is difficult to be confirmed by other historical materials. </p> <p> Full poem Four sentences, these four poems contain two scenes that are the same and reflect each other. The first scene: Seeking Spring and Encountering Beauty - "On this day last year, in this door, the faces of people and peach blossoms reflected each other's red." "The poet captured the most beautiful and moving scene in the whole process of "Looking for Spring and Encountering Beauty". "The peach blossoms on the human face reflect each other's red" not only sets a beautiful background for the "human face" as beautiful as peach blossoms, but also highlights the girl's radiant face face, and implicitly expresses the poet's gaze and swaying emotions, as well as the situation where both parties are affectionate and have no words. The second scene: rediscovering and not meeting again. It is still the season of blooming spring and blooming flowers. It is still a doorway covered with sparse flowers and trees and covered by peach trees. However, the "human face" that adds luster to all this is nowhere to be found. Only a peach blossom tree in front of the door is still smiling affectionately in the spring breeze. </p> " images/blossom1.jpg" /> <img src="images/blossom2.jpg" /> <img src="images/blossom3.jpg" /> <img src="images/blossom4.jpg" /> <img src="images/blossom5.jpg" /> <img src="images/blossom6.jpg" /> </body> </html>
3.3.4 Importing external style sheets
Importing an external style sheet refers to <style>importing an external style sheet into the element in the header of the HTML file. importThe method for importing an external style sheet is used. The methods of importing external style sheets and linking to style sheets are very similar, but the styles imported from external style sheets are essentially equivalent to being stored inside the web page.
Basic syntax:
@import url("style sheet path");
<!--Use the css file (style.css) from the previous example to import-->
<!DOCTYPE html>
<html>
<head>
<title>Import style sheet</title>
<style type="text/css ">
@import url("style.css");
</style>
</head>
<body>
<h1>Evening view of the Spring River in Huichong</h1>
<p>
"Three or two branches of peach blossoms outside the bamboo, the duck prophet of the warmth of the spring river . The ground is covered with wormwood and reed buds are short, which is when pufferfish are about to come."<br />Huichong's
late scene on the Spring River was painted by Su Shi during his stay in Jiangyin in the eighth year of Yuanfeng (1085) for Hui Chong's duck drama. The painting poem. Su Shi's painting poems are rich in content and use a wide range of materials, covering many aspects such as characters, landscapes, birds and animals, flowers, wood and stones, and religious stories. These works clearly reflect Su Shi's vigorous, bold, fresh and bright artistic style, and show Su Shi's superb ability to flexibly control the artistic laws of poetry and painting. And this poem "Hui Chong's "Evening Scene on the Spring River" has always been regarded as the representative work of Su Shi's painting poems.
</p>
<img src="images/blossom2.jpg" />
<img src="images/blossom3.jpg" />
<img src="images/blossom4.
</html>
3.4 CSSBasic selectors
Selectors are CSSa very important concept in Chinese, which can greatly improve the efficiency of developers when writing or modifying style sheets. CSSA large number of selectors are provided, which can be roughly divided into basic selectors, combined selectors, attribute selectors, pseudo-class selectors, pseudo-object selectors, etc.
Due to browser support, many selectors are rarely used in actual development. This section mainly explains the most basic and commonly used selectors.
Basic selectors include tag selectors, class selectors, id selectors and universal selectors.
3.4.1 Tag Selector
The most basic component of an HTML document is HTML tags. If you want to use the same CSS style for all similar tags in the document, you should use a tag selector.
Basic syntax:
Tag name {property1:value1;property2:value2;…}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title> new document </title>
<style type="text/css">
p /*html tag selector*/
{
color:red ; /*Color*/
font-size:30px;/*Font size*/
font-family:young round; /*Font type*/ font
-style:italic;/*Font style: italic*/
font-weight:bold ;/*Font weight: bold*/
}
h1
{
color: #00ff00;
font-size:40px;
}
</style>
</head>
<body>
<h1>Silent Night Thoughts</h1>
<p>The bright moonlight in front of the window</p>
<p>Suspected to be frost on the ground</p>
<p>Raise your head Looking at the bright moon</p>
<p>Bowing my head and thinking about my hometown</p>
</body>
</html>
</body>
3.4.2 Class Selector
Basic syntax:
Tag name.Class name {Attribute 1: value 1; Attribute 2: value 2;…}
The css selector targets the global attribute class of the mark, and the reference method is:
.Class name {property 1: value 1; property 2: value 2;…}
The class selector targets the global attribute class of the mark, and the reference method is:
<tag name class="class name">
Grammar description:
Here, the class name can be any legal character, defined by the designer. If it can be used for all tags, it will be in the form of ".class name", where " " means all, and can also be omitted.
Here are examples of common forms of class selectors:
1.Form 1
p.text1{color:brown;font-size:14px;}
In this form, only <p>tags are allowed to reference this style. Examples of reference methods are as follows:
<p class="text1">
2.Form 2
*.text1{ color:brown;font-size:14px; }
or
.text1{ color:brown;font-size:14px; }
All tags can reference this style, reference method example
<p class="text1">
<h4 class="text1">
<p>Who will take pity on the spring when it is about to fall? Waiter Bai will come and break a branch. </p> </body> </html>
3.4.3 idSelector
Selectorsid and class selectors are basically the same. The difference is that "." is not used when defining but "#" is used, and it acts on the global attribute "id" of the HTML tag instead of "class".
Basic syntax:
Tag name #id name { attribute 1: value 1; attribute 2: value 2;…}
The id selector targets the global attribute id of the tag, and the reference method is:
<tag name id="id name">
Grammar description:
If it can be used for all tags, it will be in the form of "#id name", where " " means all, and can also be omitted.
</body> </html>
3.4.4 Universal Selector
A universal selector is a special selector that *matches all elements in a web page, unless a more specific selector is used to specify that the same attribute corresponding to an element should use another value. Universal selectors <body>are slightly different from styling elements in that universal selectors apply to every element without relying on <body>properties inherited from the rules applied to the element.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
font-size:14px;
line-height:1.5;
text-align:center;
background-color:#5f443b;
color: #eddbd9;
}
.text{
color:#fe1c5e;
}
</style>
<title>Example of class selector</title>
</head>
<body>
<h1>Late Peach Blossom</h1>
<p>One tree is red Taoya brushes the pond, and the bamboo shades the pine trees when they bloom late. </p>
<p>If it were not because of the setting sun, it would be impossible to see it. How would an idle person know about it? </p>
<p>In cold places, talents are born and schools are changed. Daughters from poor families often marry late. </p>
<p class="text">Who will take pity on the spring when it is about to fall? Waiter Bai will come and break a branch. </p>
</body>
</html>
3.4.5 Other selectors
In the previous section, we mainly studied the basic selectors of CSS. In this section, we will learn about other selectors of CSS.
3.4.5.1 Combination selectors
The combined selector in CSS can be regarded as an upgraded version of the basic selector, which means using the basic selector in combination. There are five main categories of combination selectors: multi-element selectors, descendant selectors, child selectors, adjacent selectors and sibling selectors.
-
Multiple element selector
Basic syntax:
E, F {Attribute 1: value 1; Attribute 2: value 2;… }In this example, the level 1 heading and paragraph have the same color, which can be achieved using a multi-element selector. Part of the code is as follows:
-
Descendant element selector
Basic syntax:
EF {Attribute 1: value 1; Attribute 2: value 2;… }The descendant element selector matches all F elements that are descendants of the E element, for example:
table b{color:red; }<b>Indicates that all element text in the table is set to red.<!DOCTYPE html> <html> <head> <style type="text/css"> .test li a{ color:#ffffff; background-color:#5e374a; } </style> <title>Descendant element selector Example</title> </head> <body> <h1>Convenient lifestyle website</h1> <ul class="test"> <li>Shopping website:</li> <li>Ticket booking: <a href= "http://www.12306.cn/mormhweb">12306</a></li> <ul> <li><a href="http://www.taobao.com">Taobao</a ></li> <li><a href="http://http://www.jd.com">Jingdong Mall</a></li> <li><a href="http://www.dangdang.com">Dangdang</a></li> </ul> <li>Travel Website: </li> <ul> <li><a href="http://www.ctrip.com">Ctrip Travel Network</a></li> <li><a href="http://www.tuniu.com">Tu Cow</a></li> </ul> <li>Map route: <a href="http://map.baidu.com">Baidu Map</a></li> </ul> < p> <a href="http://www.baidu.com">For more content, find Baidu</a> </p> </body> </html>
3. Child element selector
Basic syntax:
E>F{Attribute 1: value 1; Attribute 2: value 2;…}Syntax description:
The child element selector can only select the child elements of a certain element, where E is the parent element and F is the direct child element. E>F means that all child elements F under the E element are selected. This is different from the descendant element selector, in which F is the descendant element of E, and in the child element selector, F is the child element of E.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.test>li>a{
color:#ffffff;
background-color:#5e374a;
}
</style>
<title>child element Selector example</title>
</head>
<body>
<h1>Convenience life website</h1>
<ul class="test">
<li>Shopping website:</li>
<li>Ticket booking: <a href="http://www.12306.cn/mormhweb">12306</a></li>
<ul>
<li><a href="http://www.taobao.com">Taobao< /a></li>
<li><a href="http://http://www.jd.com">Jingdong Mall</a></li>
<li><a href="http://www.dangdang.com">Dangdang</a></li>
</ul>
<li>Travel Website: </li>
<ul>
<li><a href="http://www.ctrip.com">Ctrip Travel Network</a></li>
<li><a href="http://www.tuniu.com">Tu Cow</a></li>
</ul>
<li>
Map route: <a href="http://map.baidu.com">Baidu Map</a></li>
</ul>
<p>
<a href="http://www.baidu.com/">For more content, find Baidu</a>
</p>
</body>
</html>
-
neighbor sibling selector
Basic syntax:
E+F{Attribute 1: value 1; Attribute 2: value 2;…}
Grammar description:
The adjacent sibling selector can select elements immediately after another element, and they have the same parent element. In other words, E and F have the same parent element, and the F element is behind the E element and is closely related to it. adjacent.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p+p{
color:#fbf95e;
background-color:#0763c2;
}
</style>
<title>Adjacent sibling selector Example</title>
</head>
<body>
<h2>Peach Blossoms in Dalin Temple</h2>
<p>The beauty of April in the world is over, and the peach blossoms in the mountain temple are beginning to bloom. </p>
<p>Eternal regret has no place to return to in spring, and I don’t know where to turn. </p>
<h2>Peach Blossoms</h2>
<p>Thousands of peach blossoms contain dew, but nowhere can they shine red. </p>
<p>In the fairy source of wind and warmth, in the spring and water country. </p>
<p>The wandering orioles should be seen falling, but the dancing butterflies are unknown. </p>
<p>Imagine the picture of desire, with branches and bamboo bushes. </p>
</body>
</html>
-
Generic sibling selector
Basic syntax:
E~F{Attribute 1: value 1; Attribute 2: value 2;…}
Grammar description:
Generally, the sibling selector will select all sibling elements behind an element. It is similar to the adjacent sibling selector and needs to be in the same parent element, and the F element is after the E element. The difference is that the E ~ F selector matches all F elements following the E element, and E+F only matches the F element immediately following the E element.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p~p{
color:#fbf95e;
background-color:#0763c2;
}
</style>
<title>Example of general sibling selector </title>
</head>
<body>
<h2>Peach Blossoms in Dalin Temple</h2>
<p>The beauty of April in the world is over, and the peach blossoms in the mountain temple are beginning to bloom. </p>
<p>Eternal regret has no place to return to in spring, and I don’t know where to turn. </p>
<h2>Peach Blossoms</h2>
<p>Thousands of peach blossoms contain dew, but nowhere can they shine red. </p>
<p>In the fairy source of wind and warmth, in the spring and water country. </p>
<p>The wandering orioles should be seen falling, but the dancing butterflies are unknown. </p>
<p>Imagine the picture of desire, with branches and bamboo bushes. </p>
</body>
</html>
3.4.5.2 Pseudo-class selector
Pseudo-classes can be seen as a special class selector that can be automatically recognized by browsers that support CSS.
Basic syntax:
E: Pseudo class {Attribute 1: value 1; Attribute 2: value 2;…}
Pseudo-classes are different from classes. They are already defined by CSS and cannot be arbitrarily used with other names like class selectors. Commonly used pseudo-class selectors are shown in the following table.
3.4.5.3 Pseudo-object selector
Pseudo-object selectors do not use selectors for real objects, but selectors for pseudo-objects that have been defined in CSS.
Basic syntax:
E: Pseudo object {property 1:property value 1;property 2:property 2;…}
Except for E::selection, all the selectors in the above table are pre-CSS3 selectors. CSS3 changes the single colon (:) in front of the pseudo-object selector to a double colon (::) to distinguish the pseudo-class selector, but the previous writing method Still valid, it is recommended to use the new writing method. For example, to achieve the initial-letter highlighting (bold typing) and sinking effect commonly used in magazine layout:
div::first-letter {
float:left;
font-size:40px;
font-weight:900;
}
For example, make the first line of text in a paragraph red.
p::first-line{color:red;}
For example, set the font to appear white on a black background when the paragraph text is selected.
p::selection{
background-color:black;
color:white;
}
3.4.5.4 Attribute selector
The attribute selector is to add a square bracket after the tag, and various attributes or expressions are listed in the square brackets. There are many forms of attribute selectors, and we will briefly introduce a few here through examples.
1. There is attribute matching
Control the style of an element by matching existing attributes. Generally, the matching attributes should be included in square brackets.
For example, set any a tag with href attribute to comprehensive color:
a[href]{color:brown;}
-
Exact attribute matching
The style will only be applied when the attribute value exactly matches the specified attribute value. The id selector and class selector are essentially exact attribute matching selectors.
For example, set the link a tag pointing to the URL " http://www.taobao.com " to brown:
a[href="http://www.taobao.com"]{color:brown;}
3. Prefix matching
A style can be applied to an element as long as the starting string of the attribute value matches the specified string.
Prefix matching [^=]is implemented using the form:
For example:
[id^="user"]{color:brown;}
Rules:
<p id="userName">李政</p> <p id="userWeight">体重</p>
etc. can be set to brown.
4. Suffix matching
In contrast to prefix matching, a style can be applied to an element as long as the trailing character of the attribute value matches the specified string. Suffix matching is implemented using the [$=] form:
For example:
[id$="Name"]{color:brown;}
Rules:
<p id="JackName">Jack</p> <p id="RoseName">Rose</p>
etc. can be set to brown.
5. Substring matching
The style is applied as long as the specified string exists in the attribute, using the [*=] form:
For example:
[id*="test"]{color:brown;}
Rules:
<p id="Rosetest">Paragraph 1</p> <p id="testY">Paragraph 2</p> <p id="xtesty">Paragraph 3</p>
etc. can be set to brown.
4. Summary of this chapter
4.1 Summarize the knowledge points in this chapter
This chapter learned the basic ways of using CSS, how to use selectors, and commonly used selectors.
4.2 Answers to interview questions
4.2.1 How to use CSS styles in web pages
There are four ways to use CSS in web pages: inline style sheets, internal style sheets, linked external style sheets, and imported external style sheets.
4.2.2 What are the commonly used selectors in CSS?
Selectors can be roughly divided into basic selectors, combination selectors, attribute selectors, pseudo-class selectors and pseudo-object selectors.
Basic selectors include tag selectors, class selectors, id selectors and universal selectors.
4.3 Preview the content of the next chapter
In the next chapter, we will continue to study CSS styles in depth.
5. Practice questions
5.1 Exercise 1
5.2 Exercise 2
5.3 Exercise 3
5.4 Exercise 4
