表现标准语言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. [转]Selenium私房菜系列1 -- Selenium简介

    一.Selenium是什么? Selenium是ThroughtWorks公司一个强大的开源Web功能测试工具系列,本系列现在主要包括以下4款: 1.Selenium Core:支持DHTML的测试案 ...

  2. JAVA中的变量与基本操作

  3. 基于Face-Recognition的计算机人脸识别安全认证程序

    20202411 2020-2021-2 <Python程序设计>实验四报告 基于Face-Recognition的计算机人脸识别安全认证程序 课程:<Python程序设计> ...

  4. iClock数据服务器默认账号密码

    网络空间资产搜索: shodan 搜索 默认密码 admin/a***n End!!!

  5. javaScript的介绍

    JavaScript Java Script的概述: 1组成 三部分组成 ecmaScript 基础语法(es5) dom document object 莫得了 文档对象模型 (操作html文档内容 ...

  6. win10 系统 腾讯云服务器 部署网站 并进行访问

    1.首先需要一个服务器 我是用的Windows系统 我用的是腾讯云的服务器(因为便宜) 然后给服务器重置密码 然后用重置后的密码 用户名 用远程桌面连接登录试试 远程桌面连接成功 然后回到服务器网站 ...

  7. MD5加密汇总

    1 #region MD5 2 /// <summary> 3 /// 16位MD5加密 4 /// </summary> 5 /// <param name=" ...

  8. BGP反射器

    路由反射器是一种减少自治系统内IBGP对等体连接数量的方法. 根据BGP路由通告原则,要求一个AS内的所有BGP Speaker将建立全连接关系(BGP Speaker两两建立邻接关系).当AS内的B ...

  9. JNI接口的实现

    JNI接口的实现 什么是JNI 说明:JNI 是 Java Native Interface 的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C++,但是它并不妨碍你使用 ...

  10. ES搜索高亮分词排序聚合搜索

    分词高亮搜索代码 List<A> list = new ArrayList<>(); //设置高亮显示 HighlightBuilder highlightBuilder = ...