HTML+CSS

HTML+CSS

一、三种样式表

（1）行内样式/行间样式

• 写在标签上，作用域为当前标签，标签后面写:style=“样式”

• 语法：

• 优点：样式直接作用在当前标签上

• 缺点：

  1. 只能作用域当前标签，不能重复使用

  2. 后续代码维护比较麻烦

  3. 代码可读性较差（提倡html,css,js分离）

（2）内部样式

• 写在当前页面的head里面，作用域为当前页面

• 语法：

• 优点：

  1. 对于当前页面，相同标签的样式可以进行复用

  2. 对于当前页面，代码的后期维护更方便了

  3. 更符合规范，做到了html、css的分离，但是还不够彻底

• 缺点：只作用于当前页面

（3）外部样式

• 在当前文件中，引入外面的.css后缀的样式表文件，作用域为有关联的所有文件

• 语法：

• 优点：

  1. 作用于有关联的所有文件（多页面复用）
  2. 多页面进行维护
  3. html、css分离更彻底

• 缺点：增加请求

二、div标签

（1）divide分开

用来划分页面结构，把内容和内容区分开来，也是双标签

（2）div标签特性：

1. 是个双标签
2. 没有高度，但是可以被内容撑开，也可以用css进行设置
3. 不设置宽的情况下，默认撑满父级

三、标题标签

h1标签通常用于当前网站的名称或logo（在搜索的时候，这个标签的优先级非常高，所以不要在页面中随便使用喔~）

<h1>这是h1标签</h1>

h2标签通常是文章内的大标题或板块名称
<h2>这是h2标签</h2>

h3标签通常是文章内的小标题或板块下的栏目名称
<h3>这是h3标签</h3>

四、标题实现（选择器+css常用样式）

（1）标签选择器

• 特性：给当前网页中所有该标签增加相同的样式
• 书写方式：
  结构：不需要再标签上做任何事
  样式：标签名{这里方css样式}

（2）class选择器

• 特性：

  1. class命名可以在当前页面中多次出现
  2. 开头不可以使用数字
  3. 不允许出现特殊字符，-_除外
  4. 不使用中文

• 注意：一个元素可以添加多个class，以空格进行间隔

五、css属性

(1)width(宽)、height（高）

属性值为数值时，必须给属性值加上单位，px

(2)font-family（字体）:“字体1”,“字体2”;

1. 中文常用：微软雅黑（默认）、宋体（中文必须写在引号内）

2. 英文常用：Arial、Helvetica

3. 首选字体放在前面，备选字体放在后面

4. 字体为宋体时，文字右边有1px间距

(3)font-siz（字体大小）

1. 属性值为数值时，必须给属性值加上单位，属性值为0除外
2. 单位还可以为px、em、0.75pt=1px
3. 为了减少系统间的字体显示差异，共同确定16px/ppi为标准字体大小默认值，即1em，默认情况下1em=16px；
4. 谷歌最小显示字体为12px，小于12px的，按照12px显示
5. 解决方案：截图，作为图片显示

(4)color（文字颜色）

属性值：关键词、RGB、十六进制颜色值

(5)font-weight（字体加粗）

1. font-weight：（字体加粗）：normal/bold/bolder/100-900
2. bold和bolder都表示加粗，但一般浏览器对他们区别不明显
3. 在css规范中将字体分为9个等级，分别从100-900，其中100对应最轻的字体变形，而900对应最重的字体变形
4. normal正常字体，相当于number为400，bold加粗相当于number为700
5. 100-500常规字体，600-900加粗字体

(6)letter-spacing（字体间距）

1. letter-spaxing（字间距）：具体数值
2. 空格同样也是字符，所以也会有字间距

(7)text-align（文本对齐）

1. text-align(文本对齐)
2. left
3. right
4. center

六、列表类标签

(1)有序列表

有序列表，用在对顺序有要求的，但是结构类似的情况

• 语法：

  1. 我是有序列表
  2. 我是有序列表
  3. 我是有序列表

(2)无序列表

无序列表，对顺序没有要求的，但是结构类似的情况

• 语法：

  • 我是无序列表
  • 我是无序列表
  • 我是无序列表

• 去掉前面默认的小圆点：

(3)自定义列表

自定义列表：dt一般指标题展开的描述，一个dl只能包含一个dt，但可以包含多个dd

1. dl:定义列表
2. dt：列表标题
3. dd：对标题展开的描述

• 语法：

  你喜欢吃什么水果？

  苹果

  香蕉

  西瓜

六、img标签

(1)书写方式：

<img src=“图片地址” title=“鼠标停留的提示信息” alt=“图片不显示时候的备用文字”/>

(2)特性

1. 一行显示多个，父级宽度不够，元素换行
2. 支持宽高
3. 宽高等比缩放（宽高同时设定，不会等比缩放）
4. img标签底部存在空白间隙（vertical-align:top；可解决此问题）
5. 换行会被解析出一个空格

(3)换行产生间隙的解决方案

1. img标签不换行
2. 父级font-size设置为0
3. 利用margin-left：负值

七、相对、绝对路径

(1)绝对路径

1. 线上绝对路径：http://www.kaikeba.com/

2. 本地绝对路径:E:/轻巧入门前端课/课件/hg01.jpg

注：

1. 写本地绝对路径时，要把反斜杠（\）变为正斜杠(/)
2. 或把图片放到浏览器中，直接复制地址栏的地址

(2)相对路径

1. 当前文件与目标文件在同一目录下，写法如下:目标文件+后缀
2. 当前文件与目标文件所处的文件夹在同一目录下，写法如下：文件夹名称/目标文件
3. 当前文件和目标文件所处的在同一目录下，写法如下：…/目标文件
4. 如果在上上层文件夹：…/…/

八、超链接a标签

(1)书写方式：

<a href="#">没有跳转页面</a>

<a href="https://space.bilibili.com/">跳转到b战</a>
如果没有需要跳转的地方可以写#，但是超链接必须要有herf属性，否则只是一个占位标签

(2)特性

1. 一行可以显示多个，父级宽度不够会换行显示
2. 不支持宽高
3. 换行会产生空格
4. 父级字体颜色的设置对其无锡熬
5. 有下划线
6. 去掉下划线，属性：text-decoration:none;

(3)跳转页面

1. target属性
2. _blank在新窗口打开
3. _self在当前窗口打开

(4)伪类

• a标签的特征

1. :link 没有被访问过的
2. :visited 被访问过的
3. :hover 鼠标经过这个连接
4. :active 鼠标按下
5. 书写时注意顺序不能改变

• 语法：

九、浮动

• 浮动语法：
  float:left/right/none/inherit（继承）
• 浮动特性：
  1. 浮动的框可以向左或向右移动，直到它的边缘碰到“包含框”或“另一个浮动框”的边框为止
  2. 一行可以显示多个元素
  3. 支持宽高
  4. 宽高由内容撑开

(1)浮动的破坏性

脱离文档流

(2)什么是文档流

"nomal flow"文档流，也叫正常流、普通流，指页面中普通布局：元素从左至右、从上到下显示

(3)什么是脱离文档流

从正常流布局中脱离出来

(4)清除浮动

一般父亲的高度不设置，由儿子撑开，儿子使用了浮动，父亲要用overflow：hidden清除浮动

十、盒模型-margin边界（盒子与盒子的距离）

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有可像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区这就是何子模型。

在元素外边的空白区域，被称为边距（界），通常用来控制盒子与盒子之间的距离

(1)注意事项：

1. margin是在元素可视区以外区域，所以不会影响元素的可视高度
2. margin是在元素可是区以外区域，所以不会影响背景图片，背景从元素左上角开始

(2)margin属性值的四种方式：

1. 一个值：四个方向
2. 两个值：上下 左右
3. 三个值：上 左右 下
4. 四个值：上 右 下 左

(3)指定方向：

上边界：margin-top

下边界：margin-bottom

左边界：margin-left

右边界：margin-right

(4)margin可以接受正负值

margin-top：-30px
margin-left：-30px

只有top和left方向的值是有效的，因为元素的排列默认是靠左上的

(5)水平居中：

margin：0 auto；左右两边设置auto，可以让一个元素水平居中

十一、盒子模型-padding（内容到盒子的距离）

在设定页面中一个元素内容到元素的边缘（边框）之间的距离，也称补白，位于boder到content之间（浏览器选中的时候呈现绿色）

(1)用法：

1. 用来调整内容在容器中的位置关系
2. 用来调整子元素在父元素中的位置关系
3. 注：padding属性需要添加在父元素上
4. padding值是额外加载元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性

(2)注意事项

1. 添加padding后，会导致div元素的宽高发生变化
2. 背景图片依旧默认在盒子的左上角，而不是content区域的左上角，padding不影响背景图片的默认位置

(3)padding属性值的四种方式：

1. 一个值：四个方向
2. 两个值：上下 左右
3. 三个值：上 左右 下
4. 四个值：上 右 下 左

(4)指定方向：

上边界：padding-top

下边界：padding-bottom

左边界：padding-left

右边界：padding-right

十二、行高line-height

设置行与行之间的距离

(1)单位：

具体数值：px

倍数：该倍数是根据具体字体大小来进行计算的，例如：line-height：2；

(2)说明：

1. 当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐
2. 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；
3. 当单行文本的行高大于容器时，可实现单行文本在容器中垂直中齐以下任意位置的定位

(3)行高的测量：

1. 单行文本：如果高是奇数，文字的下方比文字上方多1px（宋体）
2. 多上文本：
   1. 确认字体大
   2. 从一行文字的最顶端量到第二行文字的最顶端
   3. 得出的值即为行高

十三、overflow溢出

1. overflow:visible;默认
2. overflow:hidden;隐藏
3. overflow:auto;超出才显示滚动条
4. overflow:scroll;强制出现滚动条
5. text-overflow:clip;剪裁
6. text-overflow:ellipsis;省略号
7. 省略号使用的时候，结合overflow:hidden(隐藏)和white-space:nowrap（强制不换行）两个属性

十四、border边框

(1)边框宽度

border-width边框宽度（单位：px）

(2)边框样式

border-style边框样式（5种）

1. solid直线

2. dotted点虚线

3. dashed方虚线

4. double双线

5. none无

6. 双线的宽度等于border-width的值（以浏览器解析为准，我们没有办法改变默认样式）

(3)边框颜色

border-color边框颜色（3种）

1. 关键词（英文颜色单词，如：red，green，blue）
2. rgb（三原色，利用ps工具获取这些数值，例如：rgb（255，0，0））
3. 十六进制颜色（利用ps工具获取数值，一般是3位或者6位，例如：#ff0000）
4. 如果1和2、3和4、4和6位都是一样的，就可以简写为3为，例如：#ff0000->#f00是一样的

(4)复合样式

border：宽度 样式 颜色；属性值与属性值之间用空格隔开

十五、background背景

(1)background-color(背景颜色)

取值有三种形式：关键词、RGB、十六进制颜色

(2)background-image(背景图片)：url（背景图片地址：相对路径）

背景图显示原则：

1. 容器尺寸等于图片尺寸，背景图片正好显示在容器中
2. 容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素
3. 容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图

(3)background-repeat（背景重复）：repeat、repeat-x、repeat-y、no-repeat

(4)background-position(背景定位)：水平方向 垂直方向

类型值：

1. px（正负值）

2. left、right、top、bottom、center

3. 百分比（正负值）
   百分比的计算是基于：盒子的宽\高-背景图片的宽高得到的结果，来计算的

4. 注：如果只写一个值，另外一个值默认为50%

5. 注：子元素水平和垂直居中，可以只写一个center，即background-position：center；

6. 配合关键词可以更好的指定背景的位置：background-position: right 20px bottom 50px;

(5)background-attachment（背景滚动）：fixed/scroll

1. scroll背景图像会随着滚动条的滚动而滚动
2. fixed滚动条滚动的时候，背景图固定子啊当前位置
3. 注：这个值会影响到背景定位，从基于当前元素，变成基于可视区

(6)background：背景颜色 背景图 背景重复 背景定位 背景跟随滚动

十六、标签类型

(1)块标签

根据表亲啊独占一行的这个特性，我们跳出来的块标签如下：

1. <h1><\h1>
2. <div></div>
3. <ul></ul>
4. <dl></dl>
5. <p></p>

块标签特性：

1. 独占一行，两个相邻块元素不会出现并列显示的现象，块状元素会按顺序自上而下排列
2. 支持宽高，不设置宽度，默认撑满父级
3. 支持所有css样式的设置
4. 块状元素一般作为其他元素的容器，它可以容纳其他行内元素和其它块元素

(2)行内标签

根据一行可以显示多个，不可以进行宽高设置这个特性，我们挑出如下标签：

1. <span></span>
2. <strong></strong>
3. <b></b>
4. <em></em>
5. <i></i>
6. <a herf="#"></a>

行内标签特性：

1. 一行可以显示多个
2. 不支持宽高的设置
3. 代码换行会解析空格
4. 上下margin、上下padding、上下border会收到影响

(3)非置换/置换元素

非置换元素：

内容包含在将文档中的元素，比如段落p是非置换元素，因为段落中的文本内容在元素自身中。大部分元素都是非置换元素，内容直接展示给浏览器

置换元素：

为其他内容占位的元素，浏览器根据元素的标签和属性，来决定元素的具体显示内容，典型的是img标签（具体行内块元素的特性）

(4)行内块元素

根据一行可以显示多个，可以进行宽高设置的这个特性，我们挑出一下标签：

<input type=" "/>

行内块标签：

1. 一行可以显示多个
2. 支持宽高的设置
3. 代码换行会自动解析空格
4. 需要设置对齐方式为顶部：vertival：top

(5)标签转换

display属性：

1. -block块标签
2. -inline行内标签
3. -inline-block行内块标签
4. -list-item（将元素转换为列表，li的默认类型）
5. none无（该元素会隐藏起来，经常可以用来做下拉菜单）

注意：我们改变的元素的显示方式，而不是元素的本性

例如：p可以包含span标签，但是反过来不行，即便改变元素的类型

十七、position定位

(1)属性书写

position：static/relative/absolute/fixed;

(2)属性详情

1. position:static;默认:静态(没有定位)
2. position:relative;相对定位
3. 特性：
   1. 可以利用top、bottom、left、right设置偏移值
   2. 位移方向参照自己当前位置
   3. 不设置偏移方向，元素不发生位置变化
   4. 元素移动后，原始位置会被保留（不脱离文档流）
   5. 提升层级

(3)层级z-index

1. 同级元素情况

   1. 定位会提高层级，除了static
   2. 后面的定位元素层级，高于前面的定位元素层级

2. 嵌套元素情况

子级的层级高于父级的层级

3. 改变层级的属性

z-index：1；默认0

4. 特性
   1. 只能加给定位元素
   2. 数值越大层级越高，可以接受负数
   3. 建议同级元素之间比较层级

(4)position：absolute绝对定位

position:absolute;绝对定位

特性：

1. 元素脱离文档流
2. 内联标签可以支持宽高
3. 块标签不设置宽高的情况下，宽高内容撑开
4. 可以利用top、bottom、left、right设置偏移值
5. 位移方向参照定位父级的位置，没有定位父级，根据document位置
6. 一般我们用相对定位作为绝对定位的定位父级，子绝父相
7. 提升层级

(5)position：fixed固定定位

position:fixed固定定位

固定在页面可视区的某个位置，类似于background-attachment：fixed

特性：

1. 针对块元素，不支持宽高的时候，宽高由内容撑开
2. 使内联/行内元素支持宽高
3. 元素定位参照：页面可视区（即使滚动条滚动，也影响不到可视区）
4. 提升层级
5. 脱离文档流

十八、表单元素及属性

<form action=“提交地址” method=“提交方式” target="_blank"></form>

1. action表单信息提交地址，信息提交成功会跳转去该地址

2. method提交方式

   1. get默认
   2. post

3. target信息提交成功打开页面的方式

   1. blank
   2. self

4. 注意：想要了解这个的差别需要学习js的前后端数据交互的内容，除了通过form，在js中我们还可以通过其他方式对表单数据进行提交

(1)input表单元素<input type=""/>

1. 单标签

2. 用于手机用户信息，根据不同的type值，可以让input表单元素具备不一样的功能

3. type类型：

   1. text单行文本输入框<input type=“text” value=“单行文本内的默认文字”/>
   2. 另：placeholder属性提供可描述输入字段预期的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失
   3. submit提交<input type=“submit” value=“提交按钮上的文字设置”>
   4. password密码框<input type=“password”/>
   5. rest重置按钮<input type=“rest”/>
   6. button按钮/<input type=“button”> 、<button>按钮</button>

十九、圆角

border-radius数值有三种标识方法：px、%、em

border-radius可以设置水平和垂直方向的半径，若省略垂直方向的值，则标识垂直和水平方向的半径值一样，半径(x/y)

例如：border-radius:10px;border-radius:30px 15px;border-radius:10px 30px 50px 70px

圆角多值书写：

1. 一个值：四个角一样
2. 两个值：上角 下角
3. 三个值：左上角 右上角&左下角 右下角
4. 四个值：左上角 右上角 右下角 左下角

指定其中一个角变圆：

1. border-top-left-radius：10px；
2. border-bottom-right：20px；
3. 注意先上下，后左右，如果不想要圆角，半径全部为0就可以，border-radius：0；

二十、边框三角形

实际上，元素的border是由四个三角形组合而成的，我们可以赠酒啊border的宽度，并为各个边框设置不同的颜色。

元素是由上右下左四个三角形“拼接”而成的，我们想要得到某一个方向的三角形，只需要把其它border边的颜色设置成为透明（transparent）即可

border-color：read transparent transparent transparent;

二十一、伪元素

元素：利用css给标签创建出来的子级元素，该元素在页面中真实存在，但是html中并不存在

before：往指定的标签内部的 前端 添加内容

after：往指定的标签的内部的 后端 添加内容

before和after都需要利用content添加内容，所有样式针对该内容进行设置

content可以添加的内容：文字、调用当前元素的属性、url（）引用媒体文件、添加图标

添加图标：http://fontawesome.dashgame.com/ 借助现有的图标库，通过content添加