1.利用标签的style属性修改样式
<!-- css结合html标签方式一 需求：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色 基础知识 缺点 1.如果标签多了，样式多了，代码量非常大，可读性就非常差 2.css代码没有复用性 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css结合html标签</title> </head> <body> <div style="border: 1px solid red;">div标签1</div> <div style="border: 1px solid red;">div标签2</div> <span style="border: 1px solid red;">span标签1</span> <span style="border: 1px solid red;">span标签2</span> </body> </html>2.在head标签的style标签中自定义css样式
<!-- css结合html标签方式二 需求：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色 基础知识 1.style标签专门用来定义css样式代码 2.注意css的注释为/**/，不要将html的注释写到css中 缺点 1.只能在同一页面内复用代码，不能再多个页面复用css代码 2.维护不方便，若要每个页面修改，工作量大 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css结合html标签</title> <style type="text/css"> div{ border: 1px solid red; } span{ border: 1px solid red; } </style> </head> <body> <div>div标签1</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> </body> </html>3.link标签引入css文件
div{ border: 1px solid red; } span{ border: 1px solid red; } <!-- css结合html标签方式三 需求：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色 基础知识 1.link标签专门用来引入css样式代码 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css结合html标签</title> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div>div标签1</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> </body> </html>1.标签名选择器
<!-- css选择器 需求：在所有div标签上修改字体颜色为蓝色，字体大小为30个像素，边框为1的黄色实线， 修改所有span标签的字体颜色为黄色，字体大小为20个像素，边框为5像素的蓝色虚线 基础知识 1.标签名选择器 1.格式 标签名{ 属性:值; } 2.作用 可以决定哪些标签被动使用这个样式 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签名选择器</title> <style type="text/css"> div{ border: 1px solid yellow; color:blue; font-size: 30px; } span{ border: 5px dashed blue; color:yellow; font-size: 20px; } </style> </head> <body> <div>div标签1</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> </body> </html>2.id选择器
<!-- id选择器 需求1：分别定义两个div标签 ①第一个div标签定义id为id001，然后根据id属性定义css样式，修改字体颜色为蓝色，字体大小为30个像素，边框为1的黄色实线。 ②第二个div标签定义id为id002，然后根据id属性定义css样式，修改字体颜色为红色，字体大小为20个像素，边框为5的蓝色点线。 基础知识 1.id选择器格式 #id属性值{ 属性:值; } 2.作用是在div标签中可以通过id属性选择性的去使用这个样式 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <style type="text/css"> #id001{ color: blue; font-size: 30px; border: 1px yellow solid; } #id002{ color: red; font-size: 20px; border: 5px blue dotted; } </style> </head> <body> <div id="id001">div标签1</div> <div id="id002">div标签2</div> </body> </html>3.class选择器
<!-- class选择器 需求 ①修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小为30个像素，边框为1的黄色实线。 ②修改class属性值为class02的div标签，字体颜色为灰色，字体大小为26个像素，边框为1像素的红色实线。 基础知识 1.class选择器格式 .class属性值{ 属性:值； } 2.class类型选择器可以通过class属性有效的选择使用这个样式 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class选择器</title> <style type="text/css"> .class01{ color: blue; font-size: 30px; border: 1px solid yellow; } .class02{ color: gray; font-size: 26px; border: 1px solid red; } </style> </head> <body> <div class="class01">div标签class01</div> <div class="class02">div标签class02</div> <span class="class01">span标签class01</span> <span>span标签2</span> </body> </html>4.组合选择器
<!-- 组合选择器 需求 ①修改class="class01"的div标签和id="id01"的所有span标签，字体颜色为蓝色，字体大小为20个像素，边框为1像素的黄色实线。 基础知识 1.组合选择器的格式 选择器1,选择器2，选择器n{ 属性:值； } 2.组合选择器可以让多个选择器共用同一个css样式 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class选择器</title> <style type="text/css"> .class01,#id01{ color: blue; font-size: 20px; border: 1px solid yellow; } </style> </head> <body> <div class="class01">div标签class01</div><br/> <span id="id01">span 标签</span> <br/> </body> </html>
