表现标准语言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. 【BOOK】Ajax数据爬取

    Requests获取原始HTML文档,Ajax加载和JavaScript处理的数据无法获得 一.Ajax Ajax-异步的JavaScript和XML Ajax请求页面更新: 1. 发送请求 2. 解 ...

  2. 安装S32 Design Studio及简单操作

    安装S32 Design Studio及简单操作 说明:安装所需要的安装包均在此文件中,安装流程及基本操作按照入门手册PDF进行即可,以下着重记录所学基本操作流程,安装流程省略 安装: 安装流程 按照 ...

  3. vue父子件，子件页面table数据列按条件显示不同的内容

    需求:在父件中点击按钮.子件弹框中,table列根据条件显示不同的数据 实现思路:点击按钮,执行不同的方法,方法中参数值不同,从而展示不同的columns. 父件按钮如下图: 父件中导入子件需要注意的 ...

  4. 基于LabVIEW的计时器

    前言: 最近有人问我,怎么实现一个计时器计时,可以做到启动.停止.重新开始等功能,好久没关于LABVIEW的博文,借这个写个计时器相关内容. 一.Labview时间计时器介绍: 这里采用时间计时器计算 ...

  5. find_in_set使用：匹配按逗号分隔后的内容

    SELECT  * FROM `tb_test` WHERE c_id ='123' AND create_time LIKE '2021-06-03%'  AND find_in_set('A362 ...

  6. oculus按键大全

    // OVRInput.Update(); if (OVRInput.GetUp(OVRInput.Button.Three)) { Debug.Log("remote click" ...

  7. AX2012 去掉浮点数后面的0

    static void Job116(Args _args) { str string1; real num1; ; num1 = 0.00; string1 = System.String::For ...

  8. 第8章 使用标记帮助工具构建表单（ASP.NET Core in Action, 2nd Edition）

    本章包括 使用Tag Helpers轻松构建表单 使用锚标记帮助程序生成URL 使用Tag Helpers为Razor添加功能 在第7章中,您了解了Razor模板以及如何使用它们为应用程序生成视图.通 ...

  9. java学习问题

    1.nacos Connection refused: connect 由于配置文件配置错误引起的.我的nacos是部署在另一台linux服务器的,yml具体配置如下:

  10. Python爬虫之Scrapy制作爬虫

    前几天我有用过Scrapy架构编写了一篇爬虫的代码案例深受各位朋友们喜欢,今天趁着热乎在上一篇有关Scrapy制作的爬虫代码,相信有些基础的程序员应该能看的懂,很简单,废话不多说一起来看看. 前期准备 ...