HTML5和CSS常用标签

HTML和CSS

• 必选
  <input type="text" required>

• 输入框提示(占位符，预定值)
  <input type="text" placeholder="cat photo URL">

• 设置字体大小
  
h1 {
font-size: 30px;
}


• 引入字体
  在编辑器顶部引入即可使用

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!-- 使用 -->
h1 {
font-family: Monospace;
}

• 处理多个字体降级(顺序降级)
  p {
font-family: Helvetica, Sans-Serif;
}

• 多样式的使用

<img class="smaller-image thick-green-border" src="">

• 为图片添加alt描述
  <img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

• 单选框
  checked为默认选中

  <label><input type="radio" name="indoor-outdoor" checked> indoor</label>
  <label><input type="radio" name="indoor-outdoor"> outdoor</label>

• 复选框
  checked为默认选中

    <label><input type="checkbox" name="personality" checked>1</label>
    <label><input type="checkbox" name="personality">2</label>
    <label><input type="checkbox" name="personality">3</label>

• 背景色
  .green-background {
background-color: green;
}

• class用法

  • .className{}

• id用法

  • id的优先级大于class
  • #idName{}

• padding，margin简写

  除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们

  • padding: 10px 20px 10px 20px;
  • 这四个值以顺时针方式排列：上右下左。

• 多重class叠加

  • 在 HTML 中这些 class 如何排序是无所谓的。
  • 在发生冲突时，浏览器会使用最后的 CSS 声明。
  • 和id同时调用时，优先使用id
  • class="class1 class2"

• 保证CSS效果!important
  color: pink !important;

RGB

RGB采用十六进制表示，RGB对应 红绿蓝 的英语首字母

• RGB值

  • 0123456789ABCDEF
  • 字母大小写均可

• RGB值分布

  • 0最小，f最大
  • #RRGGBB

• RGB缩写
  #FF0000等同于#F00

• RGB简写

  • rgb(0,0,0)
  • 范围是0-255
  • 3个参数对应RGB