css介绍和三种引入方式
块标签 >>>> 块元素 在页面上独占一行的标签
行内标签 >>>> 行内元素 在页面上不会独占一行的标签
span 行内标签 一般用于在网页上划定一个范围 一般结合CSS样式 帮助我们确定某些现实效果的作用范围
div 块标签 一般用于做网页的布局
CSS的引入方式
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--链接式--> <link rel="stylesheet" href="css/mycss.css" /> <!--内嵌式--> <style> /* 选择器 */ span{ font-size: 20px; color: green;
font-family: "微软雅黑"; } </style> </head> <body> <!-- 1行内式引入 借助标签的style属性引入 style属性中的值语法为 样式名:样式值; 样式名:样式值;... ...
2内嵌式 将css样式的代码抽取出来,通过选择器确定样式作用范围 在head标签中 使用一对style标签 定义css样式 在style标签中 注释写法 /* */ 减少相同代码的编写量 减少代码的维护工作量
3链接式 行内式只能将样式作用于当前标签 内嵌式可以将样式作用于多个标签不能作用于其他网页 链接式可以将样式的作用范围扩大多个不同网页 链接式可以将CSS代码放入独立的.css文件中 可以使当前页面更加简洁 每一个需要引入样式 的HTML 在head标签中使用 link标签引入css文件即可
4当三种引入方式同时作用于同一个标签 如果样式有冲突 谁的优先级更高 优先级原则 就近原则 --> <span style="font-size: 40px; color: blue; "> 欢迎来到 </span> <br /> <span > 欢迎来到 </span> <br /> <span > 欢迎来到 </span> <br /> <span > 欢迎来到 </span> <br /> <span > 欢迎来到 </span> </body> </html>
|
CSS 外部样式文件
