Home > Developer > Web Develop
How CSS and HTML are combined:块级标签:block ` div p
A：在标签中的style属性里书写css代码 例：<div style="color:red;" >大家好</div>B：把css代码写到head中的style标签里，可提高css代码的重用性. 例： <style type="text/css" > div{ color:red; } </style>C：导入外部css，在ie中这种方式导入外部css文件,最多导入33个.这种导入方式是输入css代码的范畴. 例： <style type="text/css" > @import url(div.css); </style>D：导入外部css，输入HTML代码的导入方式.导入数量没有上限. 与css中import的方式的不同: link加载步骤: 1 加载所有html标签 2 加载css 3 出效果 import 步骤: 1加载所有html标签 2.加载css 3.加载外部css 4.出效果 区别1:link效率更高一些 区别2:link加载的css可直接受控于js import加载的css不能被js所控制.
Cases:
Selector:A: Tag Selector: Direct write tag name override principle: 1 from inside to outside 2 from bottom to above example: <style type= "Text/css" > DIV {colo r:red; } </style>b:class selector:. Class name, used when the same element has different effects. Example: <style type= "Text/css" >. one{color:red; } </style> ... <body><div class= "One" > Hello </div></body>c:id selector: #id名称 Note: When you add an id attribute to an HTML element, you guarantee the uniqueness of the ID. Use the same class for different effects. Example: <style type= "Text/css" > #div01 {color:red; } </style> ... <body> <div class= "One" > Hello </div> <div id= "DIV01" class= "One" > Hello </div> <span class= "One" > Everyone good </span> </body>d: Composite selector: selector 1, selector 2,..... You can apply multiple selectors at the same time. Example: <style type= "Text/css" > div,span{color:red; } </style> ... <body> <div > Everyone good </div> <div id= "DIV01" > Everyone good </div> <span > Hello </span> </body>e: descendant selector: ancestor element descendant element//change span tag in all div to red example: <style type= "t Ext/css "> div span{color:red; } </style> ... <body> <span>span</span> <div> Hello, <div>span<. ;span>span</span></div> Hello </div> </body>f: child element selector: Parent element > child element//Change child span label in all div to red example: <style type= "text/css" > div > span{color:red; } </style> ... <body> <span>span</span> <div> Hello, <span>sp. an</span> Hello <span>span</span></div> </body>g: Adjacent Brother selector: Label + adjacent tag Note: Select only the next sibling, that is, 2 younger brother. /div with span adjacent to Red example: <style type= "TEXT/CSS" > span + div{color:red; } </style> ... <body> <span>span</span> <div> Hello <span>span</span> Hello, <span.>span</span></div> <span>span</span> </body>h: Property selector: [attribute name] Example: <style t Ype= "Text/css" > [href]{color:red; } </style> ... <body> <a href= "#" > The emergence of the situation!</a><br/> <a> the emergence of the!</a><br/> </ Body>i: Pseudo-Class selector: 1. Never order: Link adds a style to a link that has not been visited. 2. Point: Active adds a style to the element being activated. 3. Point over Effect: visited 4. When the mouse is pointing up: hover when the mouse hovers over the element, add a style to the element. Example: <style type= "Text/css" > a:link {color:pink; } a:active{Color:black; } a:hover{Color:white; } a:visited{Color:green; } </style> ... <body> <a href= "01-tag type. html > Hello </a><br/> </bo Dy>Article title CSS Common selectors and how to combine with HTML
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
