1009作业:
必做: css元素样式来源有哪些,实例演示
选做: css优先级冲突的解决方案
三种CSS样式来源及CSS优先级冲突的解决方案。
1.1样式来源演示
内部样式表 head标签写入style标签写入对应的css样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS样式表的来源一</title><!-- 内部样式表 仅适用于当前的html文本 --><style>/* 声明 属性和值组成 属性=color：值red红色*//* 多个声明 被大括号包起来的 大括号及内部的数据叫声明块 *//* 大括号前面要加一个标识符 也就是叫选择器，现在叫标签选择器叫selector *//* 选择器和大括号的声明 叫规则集 简称规则 英文 （rules规则集） */h1 {color: red;}</style></head><body><h1 id="page-title" class="title">PHP中文网是国内较好的PHP教学网站</h1><h1>PHP中文网是国内较好的PHP教学网站</h1></body></html>
1.2 行内样式写法
Tag的样式来源写法
<div style="font-size: 100px"><h1>php学习中文网比较专业</h1></div>其中的DIV 标签内的style来写对应的css样式
1.3 外部样式表写法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>10月09作业 css层叠的意义</title><link rel="stylesheet" href="style.css"></head><body><h1 id="page-title" class="title">PHP中文网是国内较好的PHP教学网站</h1><h1>PHP中文网是国内较好的PHP教学网站</h1></body></html>
其中的head中的link标签负责引入外部的样式表，在网页加载的时候，直接自动加载此标签链接下的css层叠样式表。
关于优先级冲突的写法。
1属性值的前后顺序
<style>div{font-size: 10px;font-size: 100px;}</style><div><h1>php学习中文网比较专业</h1></div>
这样的话 字体大小应该是后面的100像素的大小，属性值书写时候的前后顺序影响着优先级
2选择器的优先级
举例说明
| 实例 | ID | class | Tag | 解析 |
|---|---|---|---|---|
div{font-size: 100px;} |
0 | 0 | 1 | “0.0.1” |
body div{font-size:10px} |
0 | 0 | 2 | “0.0.2” |
.header{font-size:20px} |
0 | 1 | 0 | “0.1.0” |
.header div{font-size:50px} |
0 | 1 | 1 | “0.1.1” |
.body .css{font-size:50px} |
0 | 2 | 0 | “0.2.0” |
#id{font-size:50px} |
1 | 0 | 0 | “1.0.0” |
-其中 ID > class > Tag
所以以上可以有效解决CSS优先级冲突。
3 样式表的来源解决css冲突
通过给行内元素添加style样式属性的方式，设置行内属性，他的优先级要高于ID高于Class高于Tag
注意！！！
- 尽量少用ID属性 因为级别太高
- 尽量少用Tag属性 因为css的目的是样式复用 Tag会加大劳动力和复杂性
- 尽可能用class来写
- 想让某一个样式非常重要，在声明块中添加
!imporeant非常重要 调试中可以使用，尽量少用，一般引用外部样式但是想让自己样式优先使用的话，就需要用到!imporeant! - 优先使用css样式表 引入外部样式 实现代码复用 减少代码冗余。
引用外部样式表的两种方式
方法一
<style>@import url("style.css")</style>方法二
<link rel="stylesheet" href="style.css" />
以上为html引入css的两种方法