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. 如何用CSS3来实现卡片的翻转特效

    CSS3实现翻转(Flip)效果 动画效果 效果分析 当鼠标滑过包含块时,元素整体翻转180度,以实现“正”“反”面的切换. HTML分析 分析:.container,.flip为了实现动画效果做准备 ...

  2. springboot之activemq安装与实践

    环境:腾讯云centos7 注意:activemq安装插件,可能会报错.本人是主机名的问题,所以修改了主机名. vim /etc/hosts vim /etc/hostname 修改这两个文件,并重启 ...

  3. Qt编写自定义控件35-GIF录屏控件

    一.前言 在平时的写作过程中,经常需要将一些操作动作和效果图截图成gif格式,使得涵盖的信息更全面更生动,有时候可以将整个操作过程和运行效果录制成MP4,但是文件体积比较大,而且很多网站不便于上传,基 ...

  4. double，float，BigDecimal类型数值的操作

    float四舍五入保留两位小数 /** * float四舍五入保留两位小数 * */ public static float formatDecimal(float n) { return (Math ...

  5. 常见MIME类型列表整理

    译者注:英文原文标题为 Incomplete list of MIME types,意为不完整的/未完成的 MIME 类型列表. 这是一份 MIME 类型列表,以及各个类型的文档类别,按照它们的常见扩 ...

  6. Java学习笔记-基础语法

    Java基础包含关键字,标识符,注释,常量和变量,运算符 关键字 关键字的定义和特点 定义:被Java语言赋予了特殊含义的单词 特点:关键字中所有字母都为小写 Java的关键字 用于定义数据类型的关键 ...

  7. ahk实现git图床自动预览以及转换markdown格式

    ahk实现git图床自动预览以及转换markdown格式 软件地址 https://gitee.com/layty/pic/tree/master/app 软件功能: 检测剪切板,如果剪切板有非文本信 ...

  8. Java编程思想（二）一切都是对象

    2.1用句柄操纵对象 尽管一切都看作是对象,但是操纵的标识符实际上是指向一个对象的“句柄”(handdle): 拥有一个句柄并不表示必须有一个对象同他连接: String  s:   这里创建的只是句 ...

  9. 生产环境中的 redis 是怎么部署的

    redis cluster,10 台机器,5 台机器部署了 redis 主实例,另外 5 台机器部署了 redis 的从实例,每个主实例挂了一个从实例,5 个节点对外提供读写服务,每个节点的读写高峰q ...

  10. #【Python】【demo实验23】【练习实例】【 三人比赛顺序问题 】

    原题: 两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定比赛名单.有人向队员打听比赛的名单.a说他不和x比,c说他不和x,z比,请编程序找出三队赛手的名单. 我的 ...