前戏

之前学习了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>
内部样式

把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.最后定义的优先级最高(就近原则)

css--使用的四种方法的更多相关文章

  1. CSS垂直居中的四种方法

    写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...

  2. HTML引入CSS样式的四种方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式          行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐 ...

  3. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  4. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

  5. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  6. CSS系列，三栏布局的四种方法

    三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...

  7. HTML5样式和列表、CSS链接的四种状态

    一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...

  8. react添加样式的四种方法

    React给添加元素增加样式 第一种方法: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. nodejs取参四种方法req.body,req.params,req.param,req.body

    摘要: nodejs取参四种方法req.body,req.params,req.param,req.body 获取请求很中的参数是每个web后台处理的必经之路,nodejs提供了四种方法来实现. 获取 ...

  10. CSS简单的四种引入方式

    CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...

随机推荐

  1. django上课笔记2-视图CBV-ORM补充-Django的自带分页-Django的自定义分页

    一.视图CBV 1.urls url(r'^login.html$', views.Login.as_view()), 2.views from django.views import View cl ...

  2. 任务27：Middleware管道介绍

    任务27:Middleware管道介绍 HttpContext 图中注册了三个中间件,所有httpContext就会在这三个管道上都执行HttpContext,会在Reponse里面写一些东西.所有东 ...

  3. 一个NodeJS写的基于MVC的服务器

    目前实现了静态文件下载.根据地址导航到控制器相应的控制器方法,但视图模版功能目前还未实现. 服务器代码(httpserver.js): var http = require("http&qu ...

  4. 51nod1266【水】

    最短,两半分开走 最长,一边走,比较一下两端就好了. #include <bits/stdc++.h> using namespace std; typedef long long LL; ...

  5. SVG动画 -- 描边动画

    代码说明:纯CSS实现,无JS <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  6. zabbix网络发现主机

    1 功能介绍 默认情况下,当我在主机上安装agent,然后要在server上手动添加主机并连接到模板,加入一个主机组. 如果有很多主机,并且经常变动,手动操作就很麻烦. 网络发现就是主机上安装了age ...

  7. bzoj 4513 [Sdoi2016]储能表

    题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4513 题解 要求的式子 用数位dp的方法去做 我们把式子拆开 变成 $\sum_{i=0}^ ...

  8. DataTable数据检索的性能分析[转]

    原文链接 作者写得非常好,我学到了许多东西,这里只是转载! 我们知道在.NET平台上有很多种数据存储,检索解决方案-ADO.NET Entity Framework,ASP.NET Dynamic D ...

  9. SASS @mixin 遇到的坑

    @mixin borderTop($size:1px,$type:solid,$color:red){ border-top:$size $type $color; } .border_top{ @i ...

  10. P1597 语句解析

    题目背景 木有背景…… 题目描述 一串(<255)PASCAL语言,只有a,b,c 3个变量,而且只有赋值语句,赋值只能是一个一位的数字或一个变量,未赋值的变量值为0.输出a,b,c 最终的值. ...