表现标准语言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. Linux非正式学习随笔(1)

    11.5进linux学的第一件事,找个中文输入法.Linux是一套免费的类unix操作系统GPL:gnu通用公共许可证.托马斯斯托曼提出gnu计划,自由软件思想的一个协议.Linux诞生1991年10 ...

  2. bootstrapTable insertRow 新增行保留原数据

    思路:保留原数据,然后新增行. var optionsxx = {//省略xxx: columns: [{ checkbox: true}, { field: 'id', title: '主键', c ...

  3. vue安装与卸载

    一.安装最新版本 npm install -g @vue/cli 或 yarn global remove vue-cli 查看版本 vue --version 或 vue -V 二.vue-cli( ...

  4. List一边插入数据后又移除数据

    记录最简单的三种方法,直接上代码: List<String> list = new ArrayList<>(); list.add("1"); list.a ...

  5. js 实现全屏预览（F11功能）--转

    参考文档   http://t.zoukankan.com/ghfjj-p-6322415.html HTML代码 <body> <div id="content" ...

  6. spring-security-oauth2使用遇到的坑

    异常信息为 2021-08-22 14:24:11.086 WARN 17812 --- [ main] ConfigServletWebServerApplicationContext : Exce ...

  7. C语言初级阶段7——指针2——特殊指针

    C语言初级阶段7--指针2--特殊指针 指针函数:是一个函数,返回值类型是一个指针. #include<stdio.h> int* fun() { //a是一个局部变量 int a = 1 ...

  8. Linux用户管理2

    passwd给用户修改密码 用户自己给自己设置密码直接passwd root用户给普通用户设置密码passwd 用户名 --stdin从标准输入获取信息 echo "1" | pa ...

  9. 11、jmeter配置元件--计数器

    前面学过csv和变量 csv里面的数据是固定的  如果里面的数据不够  线程要么就停止要么就需要重头再来 不太灵活 用到固定化的数据,比如说多少个用户等等 如果有一些是变动的 随着线程数增加   数据 ...

  10. 9.29 2020 实验 4：Open vSwitch 实验——Mininet 中使用 OVS 命令

    一.实验目的 Mininet 安装之后,会连带安装 Open vSwitch,可以直接通过 Python 脚本调用Open vSwitch 命令,从而直接控制 Open vSwitch,通过实验了解调 ...