前戏

之前学习了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. 父窗口与iFrame之间调用方法和元素

    父窗口与iFrame之间调用方法和元素 父窗口调用子窗口: 调用元素 js格式: var obj=document.getElementById("iframe的name").co ...

  2. 基于puppeteer的网络拦截工具flyover

    为什么需要网络拦截工具 通常我们会遇到这样的场景: 线上一个图片有异常,线下修正之后需要发布之前进行测试,有些情况下,QA同学有直接在线上环境测试的需求,只是链接本地资源,通常在windows下有一个 ...

  3. 【POJ - 2664】Prerequisites? （排序+查找）

    Prerequisites? 原文是English,这里直接就写中文吧 题意简述 k:已经选择的科目数:m:选择的科目类别:c:能够选择的科目数.r:要求最少选择的科目数量 在输入的k和m以下的一行是 ...

  4. 定位，标记，Socket通信传输位置

    # -*- coding: utf- -*- """ Editor : X-POWER Date : -- Motto : talk is cheap,show me y ...

  5. 给Clouderamanager集群里安装可视化分析利器工具Hue步骤（图文详解）

    扩展博客 以下,是我在手动的CDH版本,安装Hue. CDH版本大数据集群下搭建Hue(hadoop-2.6.0-cdh5.5.4.gz + hue-3.9.0-cdh5.5.4.tar.gz)(博主 ...

  6. 跟我一起玩Win32开发（3）：窗口的重绘

    c可以编译#include <Windows.h> //先声明一下消息处理函数 LRESULT CALLBACK MyWindowProc(HWND hwnd, UINT msg, WPA ...

  7. AtCoder Beginner Contest 058 ABCD题

    A - ι⊥l Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement Three poles st ...

  8. Squid启动报：Could not determine this machines public hostname. Please configure one or set 'visible_hostname'.

    在squid.conf中添加 visible_hostname squid.packet-pushers.net 或者编辑/etc/hosts文件, 在该文件中制定主机IP地址与主机名的对应.

  9. 使用json传输数组实例

    client.php <?php //遍历数组元素,并将元素转码 function array_iconv($data, $in_charset='GBK', $out_charset='UTF ...

  10. P1116 车厢重组

    题目描述 在一个旧式的火车站旁边有一座桥,其桥面可以绕河中心的桥墩水平旋转.一个车站的职工发现桥的长度最多能容纳两节车厢,如果将桥旋转180度,则可以把相邻两节车厢的位置交换,用这种方法可以重新排列车 ...