Home > Developer > Web Develop
four ways to introduce CSS‘‘‘ selector { property: value; property: value; ... property: value } ‘‘‘
<!DOCTYPE html>
2. EmbeddedEmbedded is a set of CSS styles that are written in the
<!DOCTYPE html>
3-Link introduce a. css file into an HTML file
<!DOCTYPE html>
4. Import Type introduce a standalone. css file into an HTML file, import using CSS rules to introduce external CSS files,<style> tags are also written in the
#不常用<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>
Note:
The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is a flaw inherent in the import. The use of the link is different from the import is that it will be loaded with the Web page file body before loading CSS files, so the displayed page from the beginning is a style of effect, it does not appear as imported as the first page without style, and then display the style of the page, which is the advantage of linking.
CSS SelectorBasic Selector
Combo SelectorE,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; } E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝ E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; } E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; } E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; }
Note, about tag nesting:
In general, block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements. It is important to note that P tags cannot contain block-level labels.
Property SelectorE[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。 比如“[cheacked]”。以下同。） p[title] { color:#f00; } E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; } E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; } E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
Example: First, basic selector 1, Tag Selector
<!DOCTYPE html>
Output: You can see that as long as the div tag string has become Red 2, ID selector<!DOCTYPE html>
Run Result: 3, class selector<!DOCTYPE html>
4. * Select<!DOCTYPE html>
Second, combination selector 1, descendant selector
<!DOCTYPE html>
Output Result:2. Descendant selector<!DOCTYPE html>
Output Result:
From for notes (Wiz)
Between me and the front end of the three-day, two-night CSS Foundation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
