暑期学习记录12

本文介绍了如何使用CSS样式表来美化HTML页面,包括创建外部、嵌入式样式表及应用内联样式的方法,并探讨了样式优先级及媒体相关样式表的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写在前面:
暑假自己在家学习,真的需要很强自制力。自己八月初又开始三天打鱼两天晒网了,接下来不能再这样了。

  • 创建外部样式表
  • 链接到外部样式表
  • 创建嵌入式样式表
  • 应用内联样式
  • 位置的重要性
  • 使用与媒体相关的样式表
  • 提供替代的样式表
  • 借鉴他人的灵感: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支持直接切换样式表,其他浏览器搜索样式表切换器,寻找可用代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值