前戏

之前学习了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. pymssql读取varchar字段中文显示乱码的问题分析

    问题 用python的pymssql模块读取旧业务系统后台SQL Server 2000数据库展示数据为乱码 开发环境 操作系统:windows 8 数据库 MS SQL Server 2000,默认 ...

  2. ccflow汇总帖

    视频教程学习 公司电脑路径; E:\开源工作流\ccflow佳怡物流版\ccflow\doc cclfow的码云地址: https://gitee.com/opencc/ccflow 在线demo演示 ...

  3. 详解Redis Cluster集群

    Redis Cluster是Redis的分布式解决方案,在Redis 3.0版本正式推出的,有效解决了Redis分布式方面的需求.当遇到单机内存.并发.流量等瓶颈时,可以采用Cluster架构达到负载 ...

  4. POJ2105【进制转化】

    直接瞎写就可以水过.我记得STL有很多好的函数,哎.水过去补多校的题. //#include <bits/stdc++.h> #include<cstdio> #include ...

  5. python __builtins__ int类 （36）

    36.'int', 用于将一个字符串或数字转换为整型 class int(object) | int(x=0) -> integer | int(x, base=10) -> intege ...

  6. bzoj 1187: [HNOI2007]神奇游乐园【插头dp】

    要判边界!!要判边界!!要判边界!!if(j!=m)!!! 我真是zz横着转移要判断到底能不能向右边出边-- 然后剩下的和1814差不多,九十因为不要求经过所有格子,所以左右括号随时可以合并,但是注意 ...

  7. PJzhang：贷款逾期与失信被执行人

    猫宁!!! 最近看到一家网贷机构在APP上的温馨提示,提到了网贷逾期与个人征信的关系以及向客户发放贷款的7项基本原则. 如下: 贷款申请及逾期告知 尊敬的客户,感谢您选择####股份有限公司为您提供贷 ...

  8. noi.ac 邀请赛1 By cellur925

    A. array 考场:上来就想暴力,首先第一个子任务肯定没问题,怎么搞都行.然后第二个子任务用个数组记下新修的值就行了.第三个子任务用一下等差数列求和公式帮助求解,每次都重新算(因为每次改变全部元素 ...

  9. ES6中的Rest参数和默认参数

    ES6中的Rest参数和默认参数 Rest参数 一个例子 编写一个函数, 用来判断, 某个字符串中, 是否其他的字符串, 如果第一参数以后的字符串, 都包含在第一参数中, 都包含在, 就返回true ...

  10. JSP文件过大无法编译

    JSP文件过大无法编译: The code of method _jspService(HttpServletRequest, HttpServletResponse) is exceeding th ...