【学习笔记】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元素，它包括：边距，边框，填充，和实际内容。
image

  • 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、定义元素周围的空间。
image

  • 除周围的（边框外的）元素区域。
  • 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：定义元素边框与元素内容之间的空间，即上下左右的内边距。
image

  • 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、网页包括：头部区域、菜单导航区域、内容区域、底部区域。
image

2、头部区域

!important

总结

实例

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

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

posted @ 2023-04-11 14:29  来人间凑数  阅读(133)  评论(0)  编辑  收藏  举报