CSS-语法

最新推荐文章于 2024-04-18 11:48:44 发布

Pluto_lei

最新推荐文章于 2024-04-18 11:48:44 发布

阅读量858

点赞数

分类专栏： css笔记文章标签： css

本文链接：https://blog.csdn.net/Pluto_lei/article/details/108868771

版权

css笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习目标

掌握CSS的两种语法结构
掌握link与@import引入方式的区别

CSS-基础

一、两种语法

选择器 {   
    属性: 值;
    属性: 值;
 }

@关键字 { 
   其他
 }

注意：

空格和缩进建议保留
半角符号，不要写成全角

二、四种引入方式

2.1、引入方式一

通过<link>标签引用
<link rel="stylesheet" href="index.css">

2.1、引入方式二

通过CSS语法@import引入
放在style标签或者CSS文件中

@import 必须放在CSS文件开头
语法后面的分号必不可少

<style>
@import url("index.css"); 
@import url('index.css'); 
@import url(index.css); 
@import 'custom.css'; 
@import "common.css"; 
@import url('landscape.css') screen and (orientation:landscape);
</style>

2.1、引入方式三

内部样式

将CSS放在页面<style>标签中
style标签可以放在head里，也可放在body内任意地方

<!DOCTYPE html>
 <html>
 <head>  
<meta charset="UTF-8" />  
<title>CSS</title> 
 <style> 
   h1 { background: orange; }  
</style> 
</head> 
<body> 
 <h1>Hello CSS!</h1>
 </body>
 </html>

2.1、引入方式四

内联样式
不推荐，但在某些情况下也有用
<p style="background: orange; font-size: 24px;"> CSS <p>

三、废弃的引入方式

属性样式
已废弃，尽量不用
<img src="a.png" width=100 height=200 >

link方式和@import引入CSS有什么区别?
<link>是HTML的标签，在页面上代表一个元素，可以被JS选中修改； @import是CSS的语法，JS无法操控
两个link标签，文件会并行加载。一个link的CSS里包含一个@import，文件串行加载会更慢。因此不推荐用@import

Pluto_lei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-语法

CSS-基础一、两种语法选择器 { 属性: 值; 属性: 值; }@关键字 { 其他 }注意：空格和缩进建议保留半角符号，不要写成全角二、四种引入方式2.1、引入方式一通过<link>标签引用<link rel="stylesheet" href="index.css">2.1、引入方式二通过CSS语法@import引入放在style标签或者CSS文件中@import 必须放在CSS文件开头语法后面的分号必不可
复制链接

扫一扫