css--使用的四种方法

前戏

之前学习了HTML相关的知识，也能简单的写一个hello world的页面。但是，只学HTML满足不了我们的需求，而HTML、CSS、JavaScript三者搭配使用才能更好的完成我们需要的效果，那他们之间的关系是什么呢？

HTML是网页内容的载体

CSS样式是外观控制

JavaScript是行为，用来实现网页特效效果

什么是CSS呢

CSS层叠样式表（Cascading Style Sheets）用于定义HTML内容在浏览器内的显示样式

为什么要学习CSS

CSS简化HTML相关标签，网页体积小，下载快

解决内容与表现分离的问题

更好的维护网页，提高工作效率

CSS样式规则

了解了CSS之后，那怎么写CSS呢？CSS也有自己的规则，如下图

CSS规则由两部分组成：选择器、声明

要注意的是：所有符号都要在英文状态下输入，属性和值之间用：隔开，写完之后用；隔开

CSS注释

 注释是代码之母

在HTML里注释是<!---注释语句->

在CSS里注释是/*注释语句*/

 CSS使用方法

使用css有四种方法

1.行内样式（内联样式）

2.内部样式表（嵌入样式）

3.外部样式表

4.导入式

行内样式

行内样式是在标签内添加style属性

语法

<p style="color: red">内容</p>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>

   <p style="color: red">内容</p>

</body>
</html>
View Code
复制代码
内部样式

把css样式代码写在head标签里的style里

语法：

<head>
    <style>
        p{color: blue}
    </style>
</head>

注意：一定要写在head标签里

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style>
        p{color: blue}
    </style>
</head>
<body>

   <p >内容</p>

</body>
</html>
点我
复制代码
CSS外部样式

外部样式表，把css样式代码单独写在独立的一个文件中

扩展名：CSS文件名.css

引用外部文件使用link

<link rel="stylesheet" href="css_file.css">

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="css_file.css">
</head>
<body>

   <p >内容</p>

</body>
</html>
点我
复制代码

注意：link要放在head标签里

导入式

@import  "外部css样式"

注意：@import写在<style>标签内最开始

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         @import url("css_file.css");
     </style>
</head>
<body>

   <p >内容</p>

</body>
</html>
复制代码

CSS使用方法区别

如下图，在项目中我们最常用的是外部样式

 

 CSS使用方法优先级

行内样式>内部样式>外部样式

说明：

　　1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

　　2.最后定义的优先级最高(就近原则)

posted @   邹邹很busy。  阅读(1351)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示

目录导航