|-------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 | <!DOCTYPE html> <html> <head> ``<``title``>第3个程序</``title``> </head> <body> ``<h1>我是第1行</h1> ``<h1>我是第2行</h1> ``<h2>我是第3行</h2> </body> </html> |
运行后效果
很多朋友可能发现了，这里没有换行符<br>为啥自动换行了，因为<h1>和<h2>组件（标签）自带换行属性
css是控制html组件（标签）属性的，那么css要如何锁定这个组件
常见的有3种
①:标签选择器（ 标签名{}****）
我们现在要改变前2行的颜色，这两行用到的组件（标签）都是h1，我们可以使用标签选择器，对所有的<h1>标签起效果
|-------|------------------------------|
| 1 2 3 | h1{ ``color: red ``} |
|-------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | <html> <head> ``<``title``>第10个程序</``title``> ``<style ``type``=``"text/css"``> ``h1{ ``color: red ``} ``</style> </head> <body> ``<h1>我是第1行</h1> ``<h1>我是第2行</h1> ``<h2>我是第3行</h2> </body> |
运行后效果
②：类选择器（.+class名）
|-------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> ``<``title``>第10个程序</``title``> ``<style ``type``=``"text/css"``> ``.css1{ ``color: red ``} ``</style> </head> <body> ``<h1 class=``"css1"``>我是第1行</h1> ``<h1>我是第2行</h1> ``<h2 class=``"css1"``>我是第3行</h2> </body> </html> |
运行后结果
③：id选择器（#+id名）
|----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | <html> <head> ``<``title``>第10个程序</``title``> ``<style ``type``=``"text/css"``> ``#css1{ ``color: red; ``} ``</style> </head> <body> ``<h1 >我是第1行</h1> ``<h1>我是第2行</h1> ``<h2 id=``"css1"``>我是第3行</h2> </body> |
运行后效果
重点：每个组件的id一般是唯一的，class可以通用
下方代码被认为是不规范的
|-----|---------------------------------------------------------------|
| 1 2 | <h1 id=``"css1"``>我是第2行</h1> <h2 id=``"css1"``>我是第3行</h2> |
下方代码被认为是允许的
|-----|---------------------------------------------------------------------|
| 1 2 | <h1 class=``"css1"``>我是第2行</h1> <h2 class=``"css1"``>我是第3行</h2> |