1. classes 和 IDs 的不同

    • class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
  2. HTML 元素 elements
    • 从开始标签（start tag）到结束标签（end tag）的所有代码。

    • 例子

      <title>peculiarly</title>
  3. What are tags?
    • The basic structure of an HTML document includes tags, which surround content and apply meaning to it.
    • demo: opening tag <head> and closing tag </head>
  4. What are forms?
    • <form> 标签用于创建供用户输入的 HTML 表单。
  5. What is a div?
    • <div> 可定义文档中的分区或节（division/section）。
  6. What is the difference between "pixels" and "ems"?
    • px像素（Pixel），相对长度单位。px 是相对于显示器屏幕分辨率而言的。

      • IE无法调整那些使用 px 作为单位的字体大小；
    • em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
      • em 的值并不是固定的；
      • em 会继承父级元素的字体大小。
  7. CSS 继承
    • inherit

    • 例子

      div{color: red;} .extra div{color: inderit;}
  8. 移动页面元素的两种 CSS 属性
    • float
    • position
  9. CSS 插入样式表的三种方法
    • 外部样式表(External style sheet)

      • 例子

        <head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
    • 内部样式表(Internal style sheet)

      • 例子

        <head>
<style>
    p {
        color: blue;
        margin-right: 20px;
        }
</style>
</head>

    • 内联样式(Inline style)

      • 例子

        <p style="color: blue; margin-right: 20px;">A paragraph.</p>

HTML and CSS basis的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS 弹性盒子 flex的三个属性：grow、shrink、basis

    flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...

  3. CSS 继承深度解析

    FROM ME: 之前在研究前端性能优化的时候,就有学习关于CSS中“善用CSS中的继承”. 原文:CSS Inheritance, The Cascade And Global Scope: You ...

  4. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  5. CSS弹性盒子的基本用法

    .container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...

  6. CSS（六）- 内容布局 - Flexbox

    Flexbox是CSS3提供的用于布局的一套新属性,是为了应对行内块.浮动和表格格式产生的问题而生的.其包含针对容器(弹性容器,flex container)和针对其直接子元素(弹性项,flex it ...

  7. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

随机推荐

  1. 如何在国内使用google

    而Google却一直坚持“机器算法”至上,让信息以公正的排序结果呈现,对于IT人员来说国内不能用google进行搜索是很痛苦的. 公司邮件介绍了一些方法,mark一下还是很有用的. http://ww ...

  2. Flask之加载静态资源

    Flask之加载静态资源 1.加载css样式 <link rel="stylesheet" href="{{ url_for('static',filename=' ...

  3. Queue class

    #pragma once#include <iostream>#include <iomanip> using namespace std; class Queue{ stru ...

  4. Build Telemetry for Distributed Services之Open Telemetry来历

    官网:https://opentelemetry.io/ github:https://github.com/open-telemetry/ Effective observability requi ...

  5. linux---学习3

    1.free命令可以显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区. //-m:以MB为单位显示内存使用情况: free -m 2.vmstat命令的含义为显示虚拟内存状态, ...

  6. Vue学习笔记（三）组件间如何通信传递参数

    一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...

  7. swift 第七课 xib 约束的优先级

    前期要实现 一个自适应的label 的时候,就知到xib 约束是有优先级的,一直为深入研究: 乘写这个 博客的机会 ,试验下xib 约束的等级 …… 抱歉要查资料,在重新实践,先把主要浏览的网页 连接 ...

  8. Nginx-windows

    1.下载 http://nginx.org/ 选择最新稳定版本,例如nginx-1.15.5 mainline version has been released. 点击后,跳转页面,选择Stable ...

  9. EPP状态码

    服务器状态代码由您的域的注册表设置 EPP状态码 RDAP状态映射 这是什么意思? 你应该做点什么吗? addPeriod 加期 该宽限期是在域名初始注册后提供的.如果注册服务商在此期间删除了域名,则 ...

  10. 【miscellaneous】软件加密方法

    原文:http://www.jiamisoft.com/blog/3471-ruanjianjiamifangfa.html 软件行业的加密是软件厂商为了保护软件开发的利润而采取的一种软件保护方式.当 ...