【学习笔记】HTML+CSS

HTML

HTML教程

简介

编辑器

基础

元素

属性

标题

段落

文本格式化

链接

头部

CSS

图像

表格

列表

区块

布局

表单和输入

1、意义:

  • 用于收集用户的输入信息
  • 表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器
  • 一个文本字段的默认宽度是20个字符

2、form创建表单:

  • 格式:<form>input 元素</form>
  • 多数情况下被用到的表单标签是输入标签 <input>

3、type输入标签类型(针对input):

  • 文本域Text Fields:type="text",当用户要在表单中键入字母、数字等内容时

    • 表单本身并不可见
    • 在大多数浏览器中,文本域的默认宽度是 20 个字符
  • 密码字段:type="password",当用户要输入密码时

    • 密码字段字符不会明文显示,而是以星号 * 或圆点 . 替代。
  • 单选按钮Radio Buttons:type="radio",当用户需要选择单选框选项时

  • 复选框Checkboxes:type="checkbox",当用户可以选取一个或多个选项时

  • 提交按钮(Submit):type="submit",当用户需要单击确认按钮从而上传表单内容时

  • type:类型

  • 文本输入:text="text";

  • 密码输入:type="password";

  • 数字输入:type="number";

  • 按钮:type="button";

  • 提交:type="submit";

4、textarea文本区域:

  • rows和cols:可见的行数和宽度,如<textarea rows="10" cols="30"></textarea>
  • placeholder:可见的提示内容
  • name:名称
  • maxlength:最大字符数
  • required:规定必填

框架

颜色

1、#

  • ccc 灰色

颜色名

颜色值

脚本

字符实体

URL

速查列表

标签简写及全称

总结

HTML5

CSS

教程

简介

1、什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示HTML元素
  • 样式通常存储在样式表中
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个

语法

1、实例

  • 规则:选择器+声明,即选择器h1
    • 如p
    • 注释:/这是个注释/

Id和Class选择器

1、

创建

background背景

1、background-color背景颜色:

  • 页面的背景颜色:body {background-color:#b0c4de;};
  • 对象:h1、p、div

2、background-image背景图像:

  • 增加背景图像:background-image:url('https://static.runoob.com/images/mix/paper.gif');
  • 默认情况下,背景图像进行水平方向和垂直方向平铺重复显示,以覆盖整个元素实体

3、background-repeat平铺(重复)方向:

  • 水平方向:background-repeat:repeat-x;
  • 只显示一次:background-repeat:no-repeat;

4、background-position背景位置:

  • 关键词:
    • left top
    • left center
    • left bottom
    • right top
    • right center
    • right bottom
    • center top
    • center center
    • center bottom
  • xpos ypos:对应x轴位置和y轴位置[1]

5、background-attachment固定还是滚动:

  • scroll:背景图片随着页面的滚动而滚动,这是默认的。
  • fixed:背景图片不会随着页面的滚动而滚动。
  • local:背景图片会随着元素内容的滚动而滚动。
  • initial:设置该属性的默认值。

text文本

fonts字体

列表

table表格

盒子模型

1、所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

  • Margin(外边距):清除边框外的区域,外边距是透明的。
  • Border(边框):围绕在内边距和内容外的边框。
  • Padding(内边距):清除内容周围的区域,内边距是透明的。
  • Content(内容):盒子的内容,显示文本和图像。

2、当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和外边距。

  • 举例width: 300px;border: 25px solid green;padding: 25px;margin: 25px;
  • 错误:300px内容+25px边框+25px内边距+25px外边距=375px总宽
  • 正确:300px内容+50px左右边框+50px左右内边距+50px左右外边距=450px

3、总元素宽度或高度:

  • 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距=width+padding+border
  • 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距=height+padding+border

4、【补充】box-sizing 属性:

  • 设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)
    • 元素宽度=width
    • 元素高度=height
  • 添加:box-sizing: border-box;

border边框

1、border-style边框类型

  • none:无边框
  • dotted:点线边框
  • dashed:虚线边框
  • solid:实线边框
  • double:双边框,宽度与border-width 的值相同
  • groove:3D沟槽边框,效果取决于边框的颜色值
  • ridge:3D脊边框,同上
  • inset:3D嵌入边框,同上
  • outset:3D突出边框,同上
  • hidden:隐藏边框
  • 混合边框:
    • 上、右、底、左:border-style: dotted dashed solid double;
    • 上底、左右:border-style:dotted solid;
    • 上、左右、底:border-style:dotted solid double;

2、border-width边框宽度

  • 指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
  • 关键词:thick 、medium(默认值)和 thin,对应5px、3px 和 2px或者3px、2px 和 1px

3、border-color边框颜色

  • name:指定颜色的名称,如 "red"
  • RGB:指定 RGB 值, 如 "rgb(255,0,0)"
  • Hex:指定16进制值, 如 "#ff0000"
  • transparent

4、单独设置边框:

  • border-top(单独设置+简写属性)
    • border-top-style(单独设置)
    • border-top-color
    • border-top-width
  • border-right
  • border-bottom
  • border-left

5、简写属性:

  • 宽度+类型(必)+颜色:border:5px solid red;

6、border-radius圆角:

  • 外边框圆角:当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆,这个(椭)圆与边框的交集形成圆角效果。
    • 左上、右上、右下、左下:border-radius: 15px 50px 30px 5px;
    • 左上、右上左下、右下:border-radius: 15px 50px 30px;
    • 左上右下、右上左下:border-radius: 50px 20px;
    • 四角:border-radius: 15px;
  • 椭圆角:[2]

outline轮廓

margin外边距

1、定义元素周围的空间。

  • 除周围的(边框外的)元素区域。
  • margin 没有背景颜色,是完全透明的。
  • 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。

2、margin外边距:

  • auto:设置浏览器边距,这样做的结果会依赖于浏览器
  • length:定义一个固定的margin(使用像素,pt,em等)
  • %:定义一个使用百分比的边距

3、设置单边:

  • 上:margin-top:100px;
  • 底:margin-bottom:100px;
  • 右:margin-right:50px;
  • 左:margin-left:50px;

4、简写属性:

  • 上、右、下、左:margin:25px 50px 75px 100px;
  • 上、左右、下:margin:25px 50px 75px;
  • 上下、左右:margin:100px 50px;
  • 四边:margin:25px;

5、意义:

  • 定义上下元素之间距离:margin:8px 0;
  • 定义左右元素之间距离:margin:0 8px;

padding填充

1、padding:定义元素边框与元素内容之间的空间,即上下左右的内边距。

  • padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充
  • 单独使用padding属性可以改变上下左右的填充
  • 填充内边距之后会自动调节内容的大小

2、padding填充:

  • length:定义一个固定的填充(像素, pt, em,等)
  • %:使用百分比值定义一个填充

3、设置单边:

  • 上内:padding-top:25px;
  • 右内:padding-bottom:25px;
  • 下内:padding-right:50px;
  • 左内:padding-left:50px;

4、简写属性:

  • 上右下左:padding:25px 50px 75px 100px;
  • 上、左右、下:padding:25px 50px 75px;
  • 上下、左右:padding:25px 50px;
  • 四边:padding:25px;

分组和嵌套

dimension尺寸

1、height高度:

  • auto:默认。浏览器会计算出实际的高度。
  • length:使用 px、cm 等单位定义高度。
  • %:基于包含它的块级对象的百分比高度,注意是原大小的百分比高度!!!
  • inherit:规定应该从父元素继承height属性的值。
  • 最大高度:max-height
  • 最小高度:min-height

2、width宽度:同上

  • max-width
  • min-width

3、行高:大多数浏览器的默认行高约为110%至120%

  • normal:默认。
  • number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距,默认行高为“1”。
  • length:设置固定的行间距,默认行高约20 px。
  • %:基于当前字体尺寸的百分比行间距,默认行高约为110%至120%
  • inherit:规定应该从父元素继承line-height 属性的值。

display显示

position定位

overflow

float浮动

对齐

组会选择符

伪类

伪元素

导航栏

下拉菜单

1、

提示工具

图片廊

图像透明/不透明

图像拼合技术

媒体类型

属性选择器

input表单元素

举例:<form><input type="text" name="search" placeholder="搜索.."></form>
1、属性选择器:设置指定类型的输入框

  • 选取文本输入框:input[type=text]
  • 选择密码的输入框:input[type=password]
  • 选择数字的输入框:input[type=number]

2、type=text输入框:在input上加border

  • width输入框宽度:
    • 叠加box-sizing: border-box;,即输入框的宽度,而不是文字的宽度
  • padding输入框内边距:
    • 叠加box-sizing: border-box;,即文字开始的位置
  • border边框:
    • border-style
    • border-color
    • border-radius
  • background-color背景颜色:
  • font-size文字大小:显示文字和输入文字
  • 无文字颜色选择

6、:focus选择器:设置输入框的聚焦效果

  • outline: none;:忽略浏览器自带的聚焦效果
  • 聚焦时改变边框颜色:input[type=text]:focus{border: 3px solid #555;}
  • 0.5s改变颜色:input[type=text] {-webkit-transition: 0.5s; transition: 0.5s;},叠加上面

7、type=textarea文本框:

  • 重置大小:
    禁止重置大小:resize: none;

8、type=select下拉菜单:

  • 举例:<form><select id="country" name="country"><option value="au">O1</option><option value="ca">O2</option></select>
  • 在select上修改:
    • width宽度:菜单框的宽度
    • padding填充:内文字选项初始位置
    • border边框:设置菜单框的样式
    • background背景:菜单框的背景
  • 在form上修改:
    • width宽度:包裹菜单栏的一个框的宽度
    • padding填充:菜单栏在框的初始位置

9、'type=button'按钮样式:

  • background背景:
  • border边框:
  • color字体颜色:
  • padding填充:字体居中,按钮大小
  • margin边缘:两个元素间的间隔更大
  • cursor: pointer;改变光标形状

计数器

网页布局

1、网页包括:头部区域、菜单导航区域、内容区域、底部区域。

2、头部区域

!important

总结

实例


  1. https://www.runoob.com/cssref/pr-background-position.html ↩︎

  2. https://apis.bestapis.net/api/v1/client/836e9dc3ad0c5ae814860821ca270cfb ↩︎

热门相关:超武穿梭   继母2   公关女孩儿   豪门闪婚:帝少的神秘冷妻   寂静王冠