写在前面:
暑假自己在家学习,真的需要很强自制力。自己八月初又开始三天打鱼两天晒网了,接下来不能再这样了。
- 创建外部样式表
- 链接到外部样式表
- 创建嵌入式样式表
- 应用内联样式
- 位置的重要性
- 使用与媒体相关的样式表
- 提供替代的样式表
借鉴他人的灵感:CSS
1.创建外部样式表
文本编辑器中创建css文件
文件名不包含空格
在外部样式表开头最好添加@charset “UTF-8”;
2.连接到外部样式表
在每个希望使用样式表的html页面的head部分,输入<link rel="stylesheet
输入一个空格,然后输入href=”url.css”,其中url.css是样式表的名称
输入一个空格和/> 也可以不输入空格,直接输入>
多个样式表有冲突时,靠后优先级高
3.创建嵌入样式表
在HTML文档head部分输入<style>
根据需要,定义任意数量的样式规则
输入/style>结束嵌入
当且仅当style出现在link后面,才会覆盖样式表。
4.应用内联样式
在希望进行格式化的html元素中,输入style=”
创建一个样式规则,但不要包括花括号和选择器。
创建其他样式定义,输入;
输入后引号”
;分割多属性定义 “”包围样式定义
5.位置的重要性
基本规则:相同条件下,越晚出现的样式优先级越高。内联样式拥有最高的优先级。
标记!important的样式拥有最高优先级
6.使用与媒体相关的样式表
在link或style开始标记中添加media=”output”,其中output可以使print,screen,all。多个值之间用逗号隔开。
也可以在样式表中使用@media规则,这种方法不需要在link中指定媒体类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>El Palau de la Música</title>
<link rel="stylesheet" href="base.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
</head>
<body>
<article>
<h1>El Palau de la Música</h1>
<img src="img/palau250.jpg" width="250" height="163" alt="El Palau de la Música" />
<img src="img/tickets.jpg" width="87" height="163" alt="The Ticket Window" />
<p>I love the <span lang="es">Palau de la Música</span>. It is ornate and gaudy and everything that was wonderful about modernism. It's also the home of the <span lang="es">Orfeó Català</span>, where I learned the benefits of Moscatell.</p>
</article>
</body>
</html>
7.提供替代的样式表
指定基本样式,使用简单描述,不带title属性
要指定可以被其他样式替代的首选样式表,就在link元素中添加title=”label” 其中label时标识首选样式表的名称
要制定替代样式表的,就在link中使用rel=”alternate stylesheet” title=”label” 其中label是替代样式表的名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>El Palau de la Música</title>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="preferred.css" title="Dashed" />
<link rel="alternate stylesheet" href="alternate.css" title="Dotted" />
</head>
<body>
<article>
<h1>El Palau de la Música</h1>
<img src="img/palau250.jpg" width="250" height="163" alt="El Palau de la Música" />
<img src="img/tickets.jpg" width="87" height="163" alt="The Ticket Window" />
<p>I love the <span lang="es">Palau de la Música</span>. It is ornate and gaudy and everything that was wonderful about modernism. It's also the home of the <span lang="es">Orfeó Català</span>, where I learned the benefits of Moscatell.</p>
</article>
</body>
</html>
firefox支持直接切换样式表,其他浏览器搜索样式表切换器,寻找可用代码