前戏

之前学习了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. struts2添加需要的jar包

    转自:https://blog.csdn.net/fance611261/article/details/6790737 以前总是在myeclipse中添加jar包的,由于现在转向了eclipse,原 ...

  2. git提交历史不显示自己账户的问题

    其实这个问题本身也不大好描述.还是上图好了 问题就如同途中倒数第二次提交.明明就是我提交的,却不显示我的账号.个人页面也不反映这次提交.   后来发现问题所在,要想正确显示,必须要把对这个项目的邮箱设 ...

  3. PJzhang:微信公众号短连接与微信好友验证

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/LPuYrDEyEXHyhcK3_HokSg 之前看到他们有人把微信公众号文章的长链接转为短链接,很受用,百度搜索一下方法, ...

  4. redis主从集群搭建

    一.安装redis 首先登陆官网下载压缩包,我安装的是最新版本5.X,下载地址http://download.redis.io/releases/redis-5.0.2.tar.gz. 进入文件所在目 ...

  5. common.py OpenCv例程阅读

    #!/usr/bin/env python ''' This module contais some common routines used by other samples. ''' import ...

  6. Nginx+tomcat集群环境搭建（Windows下）

    实验环境 windows xp sp3 Nginx版本:1.5.12: 下载地址:http://nginx.org/en/download.html Tomcat版本:6.0.39 下载地址:http ...

  7. socket_IO模型

    1 背景知识 1.1 用户空间和内核空间 比如32位系统,寻址空间是4G.内存分为用户空间和内核空间,内核空间仅供内核使用,用户空间给各个进程使用.os的核心是内核,只有内核可以访问被保护的内存空间. ...

  8. Github配置SSH连接

    安装git.exe,打开Git Bash 1.检查是否已经有SSH Key. $cd /.ssh 2.生成一个新的SSH. $ ssh-keygen -t rsa -C "email@git ...

  9. 477 Total Hamming Distance 汉明距离总和

    两个整数的 汉明距离 指的是这两个数字的二进制数对应位不同的数量.计算一个数组中,任意两个数之间汉明距离的总和.示例:输入: 4, 14, 2输出: 6解释: 在二进制表示中,4表示为0100,14表 ...

  10. Win10新机的安装与配置

    一.快捷键 打开Chrome上次关闭的所有标签页:Ctrl-Shift-T 二.问题解决 1. 右键取得管理员权限 https://www.tenforums.com/tutorials/3841-a ...