HTML and CSS
:spider_web: 学习HTML和CSS中的部分知识点，作摘要和记录
HTML一些点
字符集
GB3212 简体中文 包含6763个汉字
GBK全部汉字
UTF-8 全世界所有国家需要用到的字符。
文本格式化标签
<b></b> 和 <strong>
<i></i> 和 <em>
<s> 和 <del>
<u> 和 <ins>
CSS
全称：Cascding Style Sheets 的缩写
书写规则：h1 (选择器) {color（属性）:red（值）(声明)}
没有 html 标签
书写方式
- 嵌入式
1 | <style type="text/css"> |
html5中 type可不写。
- 外链式：单独以.css为扩展名的文件，然后再<head></head>中使用<link />将 css 链接到 html 中
1 | <link rel="stylesheet" herf="css地址1"> |
rel 指的是html和css是样式表关系
- 行内式
1 | <标签名 style="属性：值；属性：值；"></标签名> |
注释
1 | /* 注释 */ |
属性
文本属性
| 属性 | 值 | 含义 |
|---|---|---|
| color | #ff0000 / red / rgb(2,3,5) | 文本颜色 |
| text-align | left / right / center | 文本水平对齐方式 |
| text-decoration | none(去掉文本修饰线)、underline(下划线)、overline(上划线)、line-throught(删除线) | 文版修饰线 |
| text-transform | capitalize、uppercase、lowercase | 大小写转换、首字母大写 |
| Line-height | 固定值或百分比 | 设置行高 |
| text-indent | px 或 em | 设置首行缩进，允许负值 |
| letter-spacing | px | 设置字符间距 |
| word-spacing | px | 设置单词间距 |
字体属性
| 属性 | 值 | 功能 |
|---|---|---|
| font-style | normal、italic（斜体） | 字体样式 |
| font-weight | normal、bold（粗体） | 字体粗细 |
| font-size | 12px 记得加单位 | 字体大小 |
| font-family | 黑体、宋体 | 字体样式 |
| font | 例子：font:italic blod 14px “黑体” | 简写属性、空格区分、有顺序 |
列表样式选择器
| 属性 | 值 | 含义 |
|---|---|---|
| list-style-type | none(将列表前项目符号取掉)、disc(实心圆)、square(实心小方块)、circle(空心圆) | 列表类型 |
| list-style-position | inside(在里面)、outside(在外面) | 设置列表项标记。 |
| life-style-image | url | 图片路径 |
| list-style | square inside url(arrow.gif) | 在一个生命中设置所有列表属性，个数不定、位置不定 |
背景样式属性
| 属性 | 值 | 含义 |
|---|---|---|
| background-color | #ff0000 / red / rhb(0,0,0) | 背景颜色 |
| background-image | url | 背景图像 |
| background-repeat | repeat / repeat-x / repeat-y / no-repeat | 背景图像是否重复，repeat 平铺 / repeat-x 水平方向平铺/ repeat-y 垂直方向平铺/ no-repeat 不平铺 |
| background-position | center center / x% y% / xpos ypos | 背景图像起始位置 |
| background-attachment | scroll / fixed | 固定或随页面其余部分滚动 |
| background | url no-repeat center center | 设置背景的简写形式 |
注意：background-color 用给元素设置背景元素，但是前提这个元素要么有元素要么有内容、宽度、高度等
选择器
基本选择器
| 选择器 | 格式 | 含义 |
|---|---|---|
| 通用选择器 | *{属性:值；} | 不建议使用 |
| 标签选择器 | 标签名{属性:值；} | 对应标签 |
| 类选择器 | .class{属性:值；} | 所有指定class |
| id选择器 | #id值{属性:值；} | 指定id |
复合选择器
| 选择器 | 含义 |
|---|---|
| 选择器1，选择2{属性:值；} | 多元素选择器，同时匹配选择器1和选择器2，多选择器之前用逗号分隔，多 |
| E F{属性:值；} | 后代元素选择器，匹配所有属性E元素后代的F元素，E和F之间空格分隔 |
| E > F{属性:值；} | 子元素选择器，匹配所有E元素的子元素F |
| E + F{属性:值；} | 相邻元素选择器，匹配所有紧随E元素之后的同级元素F |
伪类选择器
| 选择器 | 含义 |
|---|---|
| :link | 向未被访问的链接添加样式。 |
| :visited | 向已被访问的链接添加样式。 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 |
| :active | 鼠标放在元素张，点击的一瞬间 |
结构伪类
| 选择器 | 功能 |
|---|---|
| E:frist-child | 匹配第一个孩子 |
| E:last-child | 匹配最后一个孩子 |
| E:nth-child(n) | 匹配第n个孩子 |
| E:nth-child(2n) / E:nth-child(even) | 匹配偶数的孩子 |
| E:nth-child(2n+1) / E:nth-child(odd) | 匹配奇数的孩子 |
| E:only-child | 匹配有且只有一个孩子 |
例子：
1 | .body ul li:nth-child(2){ |
属性选择器
- 是与标签的属性名和属性值有关系
- 是通过标签的属性名和属性值来匹配元素
| 选择器 | 含义 |
|---|---|
| [attr] | 匹配所有具有attr属性的元素，不考虑值 |
| [attr = “var”] | 匹配所有具有attr属性值为val的元素 |
| [attr^=”val”] | 匹配元素中attr属性指定值开头的所有元素 |
| [attr$=”val”] | 匹配元素中attr属性指定值结尾的所有元素 |
| [attr*=”val”] | 匹配元素中attr属性包含指定值的所有元素 |
继承性
1、外层元素身上的样式会呗内层元素所继承
2、如果内层元素与外层元素相同，外层会被内层覆盖。
只有文本和字体样式属性能够被继承，其他样式都不可以被继承
优先级
行内>ID>类>标签
一般：用以下方式表示
| 标签选择器 | 1 |
|---|---|
| 类选择器 | 10 |
| ID选择器 | 100 |
| 行内选择器 | 1000 |
值越大，优先级越高。
组合之前可用优先级计算，值为权重，越大优先级越高
!important
用于提升css属性权重，其权值无穷大
格式：属性：值 !important;
1 | /*只是提升了color属性权重*/ |
注意：
1、提升属性权值
2、不能提升继承过来的权重
标签可携带多个类名
<标签名 class=”值1 值2”></..>
优点：
1、减少css代码量
2、多个类名的样式会叠加到当前元素上
注意：如果一个标签内多个类名，它们设置的样式是一样的话，会存在样式冲突。
在CSS中的 先后顺序依次覆盖
标准文档流
在制作html网页的时候，遵循一个“流”的规则：从左向右，从上至下
注意：1、空白折叠现象。2、高矮不齐，底部对齐
浮动
实现让多个元素排列在同一行，并且给这些元素设置宽度和高度
同一行：行内元素特性，宽高：块级元素特特性
浮动可是其脱离标准文档流
float left(向左浮动) right(向右浮动)
特性：
- 浮动有元素脱离标准文档流，不再占用空间
- 向左、向右浮动
- 可将标准文档流中元素盖住
- 遇到父元素边框停止浮动
- 遇到上一个浮动元素停止浮动
- 浮动元素浮动以后，其父元素不在包裹着浮动元素
- 行内元素浮动变为块级元素
通用选择器去除所有标签中默认内填充与外边距
1 | *{ |
清除浮动
- 给浮动元素的 父元素 设置一个固定的高度。（不建议使用）
- 使用清楚浮动的样式属性 clear:left （清除左浮动） / right / both（一般使用这个），一般用于最后一个浮动元素后面，新建一个空白div
- 使用 overflow:hidden 这个属性来清除浮动，本意是隐藏溢出的部分
盒子模型
内容(content)+内填充(padding)+边框(border)+外边距(margin)
主要属性：width、height、padding、border、margin
顺时针方向
margin中的塌陷现象
标准文档流中，竖直方向的margin值不会叠加，会取较大的值
善用父元素 padding 而不是子元素的 margin
border
边框的意思，三要素：粗细、线型、颜色
border: 粗细 线型 颜色
颜色不写默认为黑
display
意为显示，用于 行内元素 与 块级元素 之间的相互转换！
将隐藏的元素显示 或 将显示的怨怒是隐藏
display 属性取值 inline(行内) block(块级) none(无)
position
意为位置，实现元素的定位
使用属性的时候，需要配合定位的坐标来使用
left: 表示距离左边有多远 right top bottom
position:fixed 固定定位
相对于浏览器窗口来定位
特点：
- 脱离标准文档流，会压盖
- 不占用空间
- 不随浏览器滚动而滚动
position:relative 相对定位
特点：
- 没有脱离标准文档流
- 如果没有设定定位坐标，则还在原来的位置
- 设置了定位，会再原来的地方留下一个坑
- 会将标准文档流的元素压住
- 定位坐标值可为负数
注意：一般很少单独使用，一般配合“绝对定位”来使用。
position:absolute: 绝对定位
是相对于“祖先定位元素”来定位
先查找父元素，再查找父元素的父元素是否有定位属性，有就相对与它，没有就查找父元素的父元素，直到根据浏览器定位。
z-index
表示谁压着谁，数值大的压着数值小的
只有定位元素才有，设置了position的元素才有
无单位，值为正整数，默认0
若多个，没有设置该属性，或者都一样，则 HTML 后面的定位元素会压住前面的
border-collapse
用于合并表格的边框线，值为：collapse
border-collapse:collapse’
伪元素
| 选择器 | 功能 |
|---|---|
| :frist-letter | 操作当前元素的第一个字 |
| :frist-line | 操作当前元素的第一行 |
| ::before | 在之前插入，在一个盒子内部的最前面 |
| ::after | 在之前插入，在一个盒子内部的最后面 |
文本阴影
text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色
属性是都好分隔的阴影列表，每个阴影有两个或三个长度值和一个可选颜色值进行规定，省略长度是0
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值（上方） |
| v-shadow | 必需。垂直阴影的位置，允许负值（上方） |
| blur | 可选。模糊距离 |
| color | 可选。阴影颜色。 |
例子：
1 | .box_two{ |
盒子阴影
box-shadow:水平方向阴影（必写） 垂直方向阴影（必写） 模糊距离 阴影尺寸 内/外阴影
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值（上方） |
| v-shadow | 必需。垂直阴影的位置，允许负值（上方） |
| blur | 可选。模糊距离 |
| spread | 可选。阴影尺寸 |
| color | 可选。阴影颜色 |
| inset | 可选。外部改为内部 |
多组逗号分隔。
圆角矩形
border-radius: 左上 右上 右下 左下
CSS透明度
只要是颜色，都可以用透明度
rgba (255,255,255,0.3)