CSS笔记(2)之如何使用CSS

引言:

上节说到css样式表的概念以及css作用对象:元素

本文主要内容:

1.CSS样式表的引用的几种方式 

        内联式

        外联式

        内嵌式

2.候选样式表的介绍

一、引用方式

外联式:

<link rel="stylesheet" type="text/css"href="style.css" media="all">

代码拆解

最外层式link标签

link 标签的作用是将当前文档与其他文档关联起来,其他文档的路径有herf指向

rel 表示关系是层叠样式表

type 引用对象的文件类型声明

href 其后可以填相对地址也可以填绝对地址 指向的是被引用的文件

meadia 默认就是media=“all" 多媒体描述符 应用多媒体对象类型声明

值得注意的是:

 1.如果文件不是css结尾,使用type申明的text也可能不会被老牌浏览器所识别

 2.link标签只能放在头部不能放在其他地方

 3.当有多个link时会将样式合并处理

内嵌式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">

        /*这里书写样式*/
 
    </style>
</head>

 以双标签<stytle type = "text/css" media="all"> </stytle>

和外联式类似 同样具有type 和media两个属性

内联式/行内样式 

<body>
    <p style="color:red;">这是内容</p>

</body>

 适用于少量代码对一个元素设置

但从结构与样式分离的角度来说这样设置显然不是最优选项

二、候选样式表

如果我们需要给自己网站设计一个夜晚模式或者深色模式该怎么办呢?重新编写代码替换原有的代码显然不是明智的选择,那该怎么办呢?css提供了候选样式表 

候选样式表与首选样式表的不同属性:

rel 候选样式表的属性值式alternate stylesheet 

除此之外还可以为不同的样式表设置不同的名称



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值