表现标准语言CSS3学习 入门+导入方式

如何学习：

  1. css是什么

  2. css怎么用(快速入门)

  3. css选择器（重点+难点）

  4. 美化网页（文字、阴影、超链接、列表、渐变...）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效效果）

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）字体、颜色，边距、高度、宽度、背景图片、网页定位、网页浮动...

1.2 发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画... 浏览器兼容性

1.3 快速入门

style 注释方式为/* */

  1. 放到HTML文件内部
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <!--规范 <style> 可以编写css代码,每一个声明，最好使用分号结尾。

  语法：

      选择器{

          声明1;

          声明2;

      }

  -->

  <style>

    h1{

        color: red;

    }

  </style>

</head>

<body>

  <h1>我是标题</h1>

</body>

</html>
  1. 与HTML分离

在html的同级目录下，建立css文件夹。

用link进行连接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <!--规范  link方式

  -->

  <link rel="stylesheet" href="css/Style.css">

</head>

<body>

  <h1>我是标题</h1>

</body>

</html>


h1{

    color: red;

}

css的优势

  1. 内容和表现分离

  2. 网页结构表现单一，可以实现复用

  3. 样式十分丰富

  4. 建议使用独立于html的css文件

  5. 利用SEO(Search Engine Optimization)：汉译为搜索引擎优化，容易被搜索引擎收录。

1.4四种css的导入方式

表现方式，就近原则！哪个离代码近，哪个就有优势。

  1. 行内样式
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->

<h1 style = "color: red">我是标题</h1>

</body>

</html>
  1. style标签
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

      /*  注释  */

    h1{

        color: red;

    }

  </style>

</head>

<body>

  <h1>我是标题</h1>

</body>

</html>
  1. 外部样式链接式link
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <!--规范  link方式

  -->

  <link rel="stylesheet" href="css/Style.css">

</head>

<body>

  <h1>我是标题</h1>

</body>

</html>


h1{

    color: red;

}
  1. 外部样式导入式@import 2.1中使用的。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    @import url("css/style.css");

  </style>

</head>

<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->

<h1 >我是标题</h1>

</body>

</html>

表现标准语言CSS3学习 入门+导入方式的更多相关文章

  1. Unity---动画系统学习(2)---模型3种导入方式、人形动画介绍、切割动画

    1. 介绍 Unity中导入的模型主要是由3DMAX.Maya等建模软件制作的,后缀为.fbx的文件. 博主在Unity Asset Store里面下载了一套官方免费的模型和动画. 和一套地图,分享给 ...

  2. python学习笔记：模块——自定义模块的3种导入方式

    一.定义 模块就是用一堆的代码实现了一些功能的代码的集合,通常一个或者多个函数写在一个.py文件里,而如果有些功能实现起来很复杂,那么就需要创建n个.py文件,这n个.py文件的集合就是模块.如果不懂 ...

  3. 【CSS】CSS3从入门到深入（复习查漏向

    CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...

  4. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

  5. 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇

    始终无法有效把word排版好的粘贴过来,排版更佳版本请见知乎文章: https://zhuanlan.zhihu.com/p/24309547 实在搞不定博客园的排版,排版更佳的版本在: 给深度学习入 ...

  6. 深度学习入门实战（二）-用TensorFlow训练线性回归

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者 :董超 上一篇文章我们介绍了 MxNet 的安装,但 MxNet 有个缺点,那就是文档不太全,用起来可能 ...

  7. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

  8. 给深度学习入门者的Python快速教程

    给深度学习入门者的Python快速教程 基础篇 numpy和Matplotlib篇 本篇部分代码的下载地址: https://github.com/frombeijingwithlove/dlcv_f ...

  9. HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程​

    HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...

  10. HTML5+CSS3从入门到精通 中文pdf版​

    HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...

随机推荐

  1. MongoDB 分片模式

    Sharding (分片模式) 副本集可以解决主节点发生故障导致数据丢失或不可用的问题,但遇到需要存储海量数据的情况时,副本集机制就束手无策了.副本集中的一台机器可能不足以存储数据,或者说集群不足以提 ...

  2. HTML初体验之各种标签练习

    HTML初体验之各种标签练习 首先是<!DOCTYPE>标签 放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键.浏览器自动切换到恰当的呈现模式,以便正确显示由doctype ...

  3. ZSTUOJ刷题12:Problem B.--深入浅出学算法007-统计求和

    Problem B: 深入浅出学算法007-统计求和 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 6782  Solved: 3693 Descript ...

  4. 前端使用JSEncrypt进行加密和解密

    下载链接:https://www.bootcdn.cn/jsencrypt/ 使用方法: 1.引入jsencrypt 2.使用方法 // 加密公钥 const key = `xxxxxx`; func ...

  5. simis报错总结

    --笔记开始: 1.在前台模块处理时,[单位应收核定]比[人员缴费信息]的在职人员多一人,但是总金额一样,可能是以下原因造成!!! A.从后台看,若正常核定在职的ab08比ac13多一个人,可能是ac ...

  6. Spring Boot 中的异步调用

    通常我们开发的程序都是同步调用的,即程序按照代码的顺序一行一行的逐步往下执行,每一行代码都必须等待上一行代码执行完毕才能开始执行.而异步编程则没有这个限制,代码的调用不再是阻塞的.所以在一些情景下,通 ...

  7. mysql数据库如何支持emoji表情

    mysql数据库的默认字符集utf8,只能存储3个字节的数据.标准的emoji表情是4个字节,在APP端输入 保存表情是用户的普遍需求和行为. 插入数据库报错如下: java.sql.SQLExcep ...

  8. C语言初级阶段4——数组2————二维数组

    C语言初级阶段4--数组2----二维数组 二维数组的定义:类型说明符 数组名[数组大小] [数组大小] 第一个大小是行的大小,第二个大小是列的大小. 二维数组的初始化:{} #include< ...

  9. redis事务和锁机制、持久化操作RDB/AOF

    一.Redis事务介绍 Redis事务是一个单独的隔离操作 :事务中的所有命令都会序列化.按顺序地执行.事务在执行的过程中,不会被其他客户端发送来的命令请求所打断.Redis事务的主要作用就是串联多个 ...

  10. Mysql的驱动表 被驱动表 join buffer

    1.为什么小表驱动大表: for(int i=5;.......){     for(int j=1000;......)     {}} 1.1如果小的循环在外层,对于数据库连接来说就只连接5次,进 ...