HTML常用元素
区块：div
区分：span
文本：
p、h1~h6、em、dt、dd
表格：
table、tbody、thead、tr、td、tfoot、caption
表单：
form、input、label、textarea、select
链接：a
图片：img
文档：
html、head、title、body、meta
列表：
ul、ol、li、dlside、footer、nav
其他：
br、hr、iframe、nav
结构：
header、section、a、strong、pre、address、q、blockquote、ciue、code
快捷键
- tab:增加选中行的缩进
- tab+shift:减少选中行的缩进
- alt+b:快速在浏览器中浏览网页
- ctrl+c:复制
- ctrl+v:粘贴
- ctrl+x:剪切
- ctrl+ . :让输入法在中英文标点符号之间来回行切换
- ctrl+ / :在代码中快速打出注释
- ctrl+enter:跳到下一行
- alt+shift+向下：复制当前行
- alt+鼠标点击:一次选中多个内容
- alt+shift+鼠标拖动:一次选中多个内容
- alt+shift+f:代码格式化
HTML元素介绍
html的lang属性：
<html lang=""></html>
lang="en"告诉浏览器:这个HTML文档的语言是英文；
lang="zh"表示这个HTML文档的语言是中文。
字符实体：
空格<小于&&>大于"双引号'单引号
head元素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东（JD）</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
</head>
- head元素里的内容是一些“元数据”
一般用于描述网页的各种消息，比如字符编码、网页标题、网页图标 - title元素
网页的标题 - meta元素
可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码
<meta charset="UTF-8">
- charset->字符编码
作用：将文字存储到计算机中，之后解析出来
应用：所有的网页目前都采用UTF-8编码 - Unicode->规则
- UTF-16/UTF-32/UTF-8
body元素
- h元素
h1~h6:标题大小 - p元素
段落(paragraph) - string元素
强壮->加粗 - code元素
代码 等宽字体 - br元素
break->换行 - hr元素
分割线 - span元素
作用:对普通的文本归类 - div元素
outline属性： (相当于边框)可以看到结构如何划分
div {
outline: 2px solid green !important;
}
一般作为其他元素的父容器，把其他元素包住，代表一个整体
用于把网页分割为多个独立的部分
img元素
<img src="" alt="">
src属性 图片地址
- 远程图片地址
- 本地图片地址
- 绝对路径
- 特点：从根目录下面开始找
- 缺点：一旦位置发生改变，那么就有可能出现文件（图片）找不到的情况
- 相对路径
- 规则：
- . 当前路径(目录)
- . . 上一层路径(目录)
- 规则：
- 绝对路径
- web中常用图片格式
- png:静态图片，支持透明
- jpg:静态图片，不支持透明
- gif:动态图片，静态图片，支持透明
- alt属性
- 当图片失效(加载失败)时显示文本
- width属性(不常用)
- 改变宽度(默认单位:px->pixel 像素)
a元素
<a href="" target="">文本</a>
- href属性
- Hypertext Reference 超链接
- target
- _self(默认值):自己
- _blank:空白(在新标签页打开)
- _parent:在父窗口打开
- _top:在顶层窗口打开
- a元素与base元素结合使用
<base href="https://www.baidu.com">
</head>
<body>
<a href="">百度一下</a>
<a href="/img/bd_logo1.png">百度logo</a>
<a href="/s?wd=vue">搜索abc</a>
</body>
- 锚点链接
<a href="#title1">标题1</a>
<a href="#title2">标题2</a>
<a href="#title3">标题3</a>
<h2 id="title1">标题1</h2>
- a元素与img元素一起使用,可以实现图片链接
<body>
<a href="https://www.baidu.com">
<img src="../img/bd_logo1.png" alt="">
</a>
</body>
列表
- 有序列表：ol、li
- ol (ordered list ):有序列表，直接子元素只能是li
- li (list item) :列表中的每一项
- 无序列表：ul、li
- ul (unordered list) :无序列表，直接子元素只能是li
- li (list item) :列表中的每一项
- 定义列表：dl、dt、dd
- dl（definition list）:定义列表，直接子元素只能是dt、dd
- dt（definition term）:列表中每一项的项目名
- dd（definition description）:列表中每一项的具体描述，是对 dt 的描述、解释、补充一个dt后面一般紧跟着1个或者多个dd
- 列表相关的CSS属性
- list-style-type:设置li元素前面标记的样式
- disc（实心圆）、circle（空心圆）、square（实心方块）
- decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）
- lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
- none（什么也没有）
- list-style-image:设置某张图片为li元素前面的标记，会覆盖list-style-type的设置
- list-style-position:设置li元素前面标记的位置，可以取outside、inside2个值
- list-style:是list-style-type、list-style-image、list-style-position的缩写属性
- 一般最常用的还是设置为none，去掉li元素前面的默认标记 list-style: none
- list-style-type:设置li元素前面标记的样式
表格
- table:表格
- tr:表格中的行
- td:行中的单元格
- 细线表格的实现
table {
border-collapse: collapse;
}
td {
border: 1px solid #000;
}
-
table { //合并单元格的边框 border-collapse: collapse; } - table的居中显示
-
table{ margin: 100px auto; }
-
- tbody:表格的主体
- caption:表格的标题
- thead:表格的表头
- tfoot:表格的页脚
- th:表格的表头单元格
- 单元格的合并
- 合并要领
- 合并方向是向右、向下
- 删掉被覆盖掉的td元素
- 合并要领
<td rowspan="4"> 上午</td>
- border-spacing:用于设置单元格之间的水平、垂直间距，
table { border-spacing: 10px 20px; }
表单
- form:表单:一般情况下，其他表单相关元素都是它的后代元素
- form的常用属性
- action:用于提交表单数据的请求URL
- method:请求方法（get和post），默认是get
- get
- 在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如http://ww.test.com/login?phone=123&password=234&sex=1
- 由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB
- post
- 发给服务器的参数全部放在请求体中
- 理论上，post传递的数据量没有限制（具体还得看服务器的处理能力
- get
- target:在什么地方打开URL（参考a元素的target）
- enctype:规定了在向服务器发送表单数据之前如何对数据进行编码
- 取值有3种
- application/x-www-form-urlencoded：默认的编码方式
- multipart/form-data：文件上传时必须为这个值，并且method必须是post
- text/plain：普通文本传输
- accept-charset：规定表单提交时使用的字符编码（默认值UNKNOWN，和文档相同的编码）
- form的常用属性
- input:单行文本输入框、单选框、复选框、按钮等元素
- type：input的类型
- text：文本输入框（明文输入）
- password：文本输入框（密文输入）
- radio：单选框
- name值相同的radio才具备单选功能
- name值相同的radio才具备单选功能
- checkbox：复选框
- 属于同一种类型的checkbox，name值要保持一致
- 属于同一种类型的checkbox，name值要保持一致
- button：按钮
- 普通按钮（type=button）：使用value属性设置按钮文字
- 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
- 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
- reset：重置
- submit：提交表单数据给服务器
- file：文件上传
- maxlength：允许输入的最大字数
- placeholder：占位文字
- readonly：只读
- disabled：禁用
- checked：默认被选中
- 只有当type为radio或checkbox时可用
- autofocus：当页面加载时，自动聚焦
- name：名字
- 在提交数据给服务器时，可用于区分数据类型
- value：取值
- form：设置所属的form元素（填写form元素的id）
- 一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器
- type：input的类型
- textarea:多行文本框
- textarea的常用属性
- cols：列数
- rows：行数
- 缩放的CSS设置
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal;
- 垂直缩放：resize: vertical;
- 水平垂直缩放：resize: both;
- textarea的常用属性
- select、option:下拉选择框
- option是select的子元素，一个option代表一个选项
- select常用属性
- multiple：可以多选
- size：显示多少项
- option常用属性
- selected：默认被选中
- option是select的子元素，一个option代表一个选项
- button:按钮
- 默认type值是submit
- 默认type值是submit
- label:表单元素的标题
- label元素一般跟input配合使用，用来表示input的标题
- labe可以跟某个input绑定，点击label就可以激活对应的input
- fieldset:表单元素组
- legend:fieldset的标题
CSS
- Cascading Style Sheets 层叠样式表
- 常用CSS属性:
CSS应用到元素的方法:
- 内联(行内)样式(inline style)
<h1 style="属性名：属性值；"></h1>- 例:
- 文档样式表(document style shee)、内嵌样式表(embed style sheet)
- 例：
- 例：
- 外部样式表(external style sheet)
- 在外部引入CSS
- 在外部引入CSS
CSS文件编码和import引入
- 在外部指定css文件的编码
-
@charset "utf-8"
-
- import引入
- 将css引入html文件,相当于link
-
@import url(路径)
CSS选择器(selector)
- 统配选择器
- 所有的元素
-
* { color: red; }
- 元素选择器
-
<style> p{ color:red; } </style>
-
- 类选择器
-
<style> .abc{ color:red; } </style> <div class="abc"></div> - 一个元素可以有多个类,多个类以空格进行分割
- 类的名字规范:
1.尽量见名之意
2.当多个单词时- -连接:large-font
- _连接:large_font
- 驼峰连接:largeFont
-
- id选择器
-
<style> #header .title{ color:red; } </style> <div id="header"> <div class="title">文字</div> </div> <div id="concent"> <div class="title">文字</div> </div>
-
其他选择器
-
属性选择器
-
//属性包含title [title] { color: red; } //title属性值恰好等于one的元素 [title="one"] { font-size: 25px; }
-
-
后代选择器
- div元素里面的span元素(包括直接、间接子元素)
-
div span { color: red; }
-
<p>里面不能加<div>
- div元素里面的span元素(包括直接、间接子元素)
-
子选择器
- div元素里面的直接span子元素(不包括间接子元素)
-
div>span { color: red; }
-
相邻兄弟选择器:
- div元素后面紧挨着的p元素(且div p元素必须是兄弟关系)
-
div+p { color: red; } - div元素后面的p元素(且div p元素必须是兄弟关系)
-
div~p { color: red; }
-
选择器组
- 交集选择器
- 同时符合两个条件的元素:div元素 、class值有one
-
div.one{ color:red; } - 同时符合3个条件的元素:div元素 、class值有one、title属性值等于test
-
div.one[title="test"]{ color:red; }
- 并集选择器
- 所有的div元素+所有的class值有one的元素+所有title属性值等于test的元素
-
div,.one,[title="test"]{ color:red; }
- 交集选择器
CSS常见属性
- color:前景色(文字颜色)
- border
- text-decoration
- font-size:文字大小
- background-color:背景色
- width:宽度
- height:高度
- display:修改元素的显示类型，有4个常用值
- block：让元素显示为块级元素
- inline：让元素显示为行内级元素
- none：隐藏元素
- inline-block：让元素同时具备行内级、块级元素的特征
- 可以让元素同时具备块级、行内级元素的特征
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高
- 宽高默认由内容决定
- 可以理解为
- 对外来说，它是一个行内级元素
- 对内来说，它是一个块级元素
- 常见用途
- 让行内级非替换元素（比如a、span等）能够随时设置宽高让块
- 级元素（比如div、p等）能够跟其他元素在同一行显示
- 可以让元素同时具备块级、行内级元素的特征
- visibility:能控制元素的可见性，有2个常用值
- visible：显示元素
- hidden：隐藏元素
- visibility: hidden; 和 display: none; 的区别
- visibility: hidden;虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
- display: none;不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置
- overflow:用于控制内容溢出时的行为
- visible：溢出的内容照样可见
- hidden：溢出的内容直接裁剪
- scroll：溢出的内容被裁剪，但可以通过滚动机制查看
- 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
- auto：自动根据内容是否溢出来决定是否提供滚动机制
- 还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向（
- 建议还是直接使用overflow，因为目前overflow-x、overflow-y还没有成为标准，浏览器可能不支持）
- outline：表示元素的外轮廓
- 不占用空间，默认显示在border的外面
- outline相关属性有：
- outline-width
- outline-style：取值跟border的样式一样，比如solid、dotted等
- outline-color
- outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似
- 应用实例：去除a元素、input元素的focus轮廓效果
- box-shadow：属性可以设置一个或者多个阴影
- 每个阴影用表示
- 多个阴影之间用逗号,隔开，从前到后叠加
<shadow>的常见格式如下
- 第1个
<length>：水平方向的偏移，正数往右偏移 - 第2个
<length>：垂直方向的偏移，正数往下偏移 - 第3个
<length>：模糊半径（blur radius） - 第4个
<length>：延伸距离 <color>：阴影的颜色，如果没有设置，就跟随color属性的颜色- inset：外框阴影变成内框阴影
- 第1个
- text-shadow：用法类似于box-shadow，用于给文字添加阴影效果
- text-shadow同样适用于::first-line、::first-letter
- box-sizing：用来设置盒子模型中宽高的行为
- content-box
- padding、border都布置在width、height外边
- padding、border都布置在width、height外边
- border-box
- padding、border都布置在width、height里边
- padding、border都布置在width、height里边
- content-box
- 元素的水平居中显示：
- 行内级元素、inline-block元素
- 水平居中：在父元素中设置text-align: center
- 块级元素
- 水平居中：margin: 0 auto
- 行内级元素、inline-block元素
- background-image：用于设置元素的背景图片
- 会盖在(不是覆盖)background-color的上面
- 如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
- 注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
- background-repeat：用于设置背景图片是否要平铺
- 常见的设值有：
- repeat：平铺
- no-repeat：不平铺
- repeat-x：只在水平方向平铺
- repeat-y：只在垂直平方向平铺
- 常见的设值有：
- background-size:用于设置背景图片的大小
- auto：以背景图本身大小显示
- cover：缩放背景图，以完全覆盖铺满元素
- contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
<percentage>：百分比，相对于背景区（background positioning area）- length：具体的大小，比如100px
- background-position:用于设置背景图片在水平、垂直方向上的具体位置
- 水平方向还可以设值：left、center、right
- 垂直方向还可以设值：top、center、bottom
- 如果只设置了1个方向，另一个方向默认是center
- 比如background-position: 80px; 等价于 background-position: 80px center;
- CSS Sprite
- 什么是CSS Sprite:
- 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
- 有人翻译为：CSS雪碧、CSS精灵使用
- CSS Sprite的好处
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小解决了图片命名的困扰，只需要针对一张集合的图片命名
- Sprite图片制作（雪碧图、精灵图）
- 方法1：Photoshop
- 方法2：https://www.toptal.com/developers/css/sprite-generator
- CSS Sprite编写建议
- 什么是CSS Sprite:
- background-attachment可以设置以下3个值
- scroll：背景图片跟随元素一起滚动（默认值）
- local：背景图片跟随元素以及元素内容一起滚动
- fixed：背景图片相对于浏览器窗口固定
- background:是一系列背景相关属性的简写属性，常用格式是
- image position/size repeat attachment color
- background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
- 其他属性也都可以省略，而且顺序任意
- background-image和img的选择:
- 总结:
- img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
- background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息
- 总结:
- cursor:可以设置鼠标指针（光标）在元素上面时的显示样式
- cursor常见的设值有
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
- default：由操作系统决定，一般就是一个小箭头
- pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none：没有任何指针显示在元素上面
- cursor常见的设值有
- position:可以对元素进行定位，常用取值有4个
- static：静态定位
- position属性的默认值
- 元素按照normal flow布局
- left 、right、top、bottom没有任何作用
- relative：相对定位
- 元素按照normal flow布局
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是元素自己原来的位置
- left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
- 相对定位的应用场景
- 在不影响其他元素位置的前提下，对当前元素位置进行微调
- absolute：绝对定位
- 元素脱离normal flow（脱离标准流、脱标）
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
- 定位元素（positioned element）
- position值不为static的元素
- 也就是position值为relative、absolute、fixed的元素
- fixed：固定定位
- 元素脱离normal flow（脱离标准流、脱标）
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是视口（viewport）
- 当画布滚动时，固定不动
- static：静态定位
盒子模型
- 内容（content）：盒子里面装的东西
- width：宽度
- min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
- max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
- height：高度
- min-height：最小高度，无论内容多少，高度都大于或等于min-height
- max-height：最大高度，无论内容多少，高度都小于或等于max-height
- width：宽度
- 内边距（padding）：盒子边缘和里面装的东西之间的间距
- padding-left：左内边距
- padding-right：右内边距
- padding-top：上内边距
- padding-bottom：下内边距
- padding：是padding-top、padding-right、padding-bottom、padding-left的简写属性
- 取值规律
- 按照顺时针方向设值：top、right、bottom、left
- 如果缺少left, 那么left就使用right的值
- 如果缺少bottom, 那么bottom就使用top的
- 边框（border）：就是盒子的边框，边缘部分
- 边框宽度:border-top-width、border-right-width、border-bottom-width、border-left-width
- border-width是上面4个属性的简写属性
- 边框颜色:border-top-color、border-right-color、border-bottom-color、border-left-color
- border-color是上面4个属性的简写属性
- 边框样式:border-top-style、border-right-style、border-bottom-style、border-left-style
- border-style是上面4个属性的简写属性
- 边框样式的取值:
- none：没有边框，边框颜色、边框宽度会被忽略
- dotted：边框是一系列的点
- dashed：边框是一条虚线
- solid：边框是一条实线
- double：边框有两条实线。两条线宽和其中的空白的宽度之和等于border-width的值
- groove：边框看上去好象是雕刻在画布之内
- ridge：和grove相反，边框看上去好象是从画布中凸出来
- inset：该边框使整个框看上去好象是嵌在画布中
- outset：和inset相反，该边框使整个框看上去好象是从画布中凸出来
- 边框的形状:
- 矩形、梯形、三角形等形状
- 边框妙用-实现三角形：
- 矩形、梯形、三角形等形状
- 边框宽度:border-top-width、border-right-width、border-bottom-width、border-left-width
- 外边距（margin）：盒子和其他盒子之间的间距
- margin-left：左外边距
- margin-right：右外边距
- margin-top：上外边距
- margin-bottom：下外边距
- margin：是margin-top、margin-right、margin-bottom、margin-left的简写属性
- 上下margin传递:
- margin-top传递:如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
- margin-bottom传递:如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
- 上下margin折叠:
- 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）水
- 平方向上的margin（margin-left、margin-right）永远不会collapse
- 折叠后最终值的计算规则:两个值进行比较，取较大的值
- margin一般是用来设置兄弟元素之间的间距
- padding一般是用来设置父子元素之间的间距
- 行内级非替换元素的注意点：
- 以下属性对行内级非替换元素不起作用
- width、height、margin-top、margin-bottom
- 以下属性对行内级非替换元素的效果比较特殊
- padding-top、padding-bottom、上下方向的border
- 以下属性对行内级非替换元素不起作用
- 圆角：
- 圆角半径相关的属性有
- border—radius定义的是四分之一椭圆的半径
- 第1个值是水平半径
- 第2个值是垂直半径（如果不设置，就跟随水平半径的值）
- border-radius是一个缩写属性：
- 斜线/前面是水平半径，后面是垂直半径
- 4个值的顺序是top-left、top-right、bottom-right、bottom-left（顺时针方向）
- 如果bottom-left没设置，就跟随top-right
- 如果bottom-right没设置，就跟随top-left
- 如果top-right没设置，就跟随top-left
- 圆角半径相关的属性有
颜色设置的其他方式
- rgb颜色规律
- rgb颜色值越大,越靠近白色,越浅色
- rgb颜色值越小,越靠近黑色,越深色
- rgb颜色值一样的,一般为灰色
- 颜色空间rgb
- red:
0~255->0~ff - green:
0~255->0~ff - blue:
0~255->0~ff -
background-color:rgb(0,0,0);(黑色) background-color:rgb(255,255,255);(白色
- red:
- rgba
- red:
0~255->0~ff - green:
0~255->0~ff - blue:
0~255->0~ff - alpha:0~1(0:完全透明 1:不透明)
- red:
- 十六进制写法
-
background-color:#ff0000(红色) background-color:#0f0
-
文本属性
- text-decoration:装饰线
- none:无任何装饰线(可去除a元素默认的下划线)
- underline:下划线
- overline:上划线
- line-through:中划线(删除线)
-
text-decoration: none;
- text-transform:用于设置文字的大小写转换
- capitalize:将每个单词的首字符变为大写
- uppercase:将每个单词的所有字符变为大写
- lowercase:将每个单词的所有字符变为小写
-
text-transform:capitalize;
- text-indent:用于设置第一行内容的缩进
-
text-indent:32px; -
text-indent:2em;/*em->1em*10px=20px */ font-size:20px;
-
- text-align:用于设置元素内容在元素中的水平对齐方式
-
text-align:center; - left:左对齐
- right:右对齐
- center:正中间显示
- justify:左右两端对齐(对最后一行没有效果)
-
text-align-last:justify;(最后一行对齐)
-
-
文字属性
- font-size:决定字符大小
- em:1em代表100%,2em代表200%,0.5em代表50%
- %:百分比
- font-family:用于设置文字的字体
-
font-family: '宋体'; - 可以设置11个或多个字体名称
- 一般情况下,英文字体只适用于英文,中文字体同时适用于英文和中文
-
- font-weight:用于设置文字的粗细
-
font-weight: bold; - 100|200|300|400|500|600|700|800|900:每个数字表示一个重量
- normal:等于400
- bold:等于700
-
- font-style:用于设置文字的常规、斜体显示
-
font-style: italic; - normal:常规显示
- italic:用字体的斜体显示(前提:font-family这种字体本身是支持斜体)
- oblique:文本倾斜显示(让文字倾斜)
-
- line-height:用于设置文本的最小行高
- 行高:两行文字基线(baseline)之间的间距
- 基线(baseline):与小写字母x最底部对齐的线
- height与line-height的区别
- height:元素的整体高度
- line-height:元素每一行文字所占据的高度
- 应用实例:假设div中只有一行文字,如何让这行文字在div内部垂直居中
-
div { height: 50px; line-height: 50px; }
-
- font:缩写属性
-
div { font: italic small-caps bold 30px/50px "宋体"; } - font-style font-variant font-weight font-size/line-height font-family
- font-style font-variant font-weight可以任意调换顺序,也可以省略
- /line-height可以省略,如果不省略,必须跟在font-size后面
- font-size font-family不可以调换顺序,不可以省略
-
元素类型
- 块级、行内级元素
- 根据元素的显示（能不能在同一行显示）类型
- 块级元素（block-level elements）:独占父元素一行
- 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等
- 行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示
- 比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio等
- 替换、非替换元素
- 根据元素的内容（是否浏览器会替换掉元素）类型
- 替换元素（replaced elements）:元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
- 比如img、input、iframe、video、embed、canvas、audio、object等
- 非替换元素（non-replaced elements）:和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
- 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等
- 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等
伪类(pseudo-classes)
动态伪类(dynamic pseudo-classes)：
- :link、 :visited、 :hover 、:cctive、 :focus
- 使用举例
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标挪动到链接上
- a:active 激活的链接（鼠标在链接上长按住未松开
- 使用注意
- :hover必须放在:link和:visited后面才能完全生效
- :active必须放在:hover后面才能完全生效
- 所以建议的编写顺序是 :link、:visited、:hover、:active
- 记忆：女朋友看到LV后，ha ha大笑
- 除了a元素，:hover、:active也能用在其他元素上
- :focus指当前拥有输入焦点的元素（能接收键盘输入)
- 文本输入框一聚焦后，背景就会变红色
-
input:focus{ background:red; }
- 动态伪类编写顺序建议为
- :link、:visited、:focus、:hover、:active
- 去除a元素默认的:focus效果
- 或者将tabindex属性设置为-1
目标伪类(target pseudo-classes)：
-
:target {//用鼠标点击哪个就变红色 color:red; } - :target
- 语言伪类(languange pseudo-classes)
- :lang()
- 元素状态伪类(UI element states pseudo-classes)
-
:disabled {//表示按钮不可用 color:red; } - :enabled 、:disabled、 :checked
-
结构伪类（structural pseudo-classes）：
- :nth-child()
-
:nth-child(1){//只要是第1个子元素都会变红色 color:red; } - :nth-child(2n):是父元素中的第偶数个子元素（第2、4、6、8…个）,跟:nth-child(even)同义
- :nth-child(2n + 1):是父元素中的第奇数个子元素（第1、3、5、7…个）,跟:nth-child(odd)同义
- :nth-child(-n+3):前三个
-
- :nth-last-child( ):从最后一个子元素开始往前计数
- :nth-last-child(1)，代表倒数第一个子元素
- :nth-last-child(-n + 2)，代表最后2个子元素
- :nth-of-type( ):计数时只计算同种类型的元素
- :nth-last-of-type( ):从最后一个这种类型的子元素开始往前计数
- 其他伪类:
- :first-child，等同于:nth-child(1)
- :last-child，等同于:nth-last-child(1)
- :first-of-type，等同于:nth-of-type(1)
- :last-of-type，等同于:nth-last-of-type(1)
- :only-child，是父元素中唯一的子元素
- :only-of-type，是父元素中唯一的这种类型的子元素
- :root，根元素，就是HTML元素
- :empty:代表里面完全空白的元素
-
:empty{ height:20px; background-color: #f00; }
-
- 否定伪类（negation pseudo-classes）
- :not(x)
- x是一个简单选择器
- 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
- :not(x)表示除x以外的元素
- :not(x)
伪元素(pseudo-elements)
常用伪元素
- ::first-line :可以针对首行文本设置属性
- 字体属性、颜色属性、背景属性
- word-spacing、letter-spacing、text-decoration、text-transform、line-height
- ::first-letter :可以针对首字母设置属性
- 字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
- text-decoration、text-transform、letter-spacing、word-spacing（适当的时候）、line-height、float、vertical-align（只有当float是none时）
- ::before 、::after ：用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）
- content:" 内容"（不可省）
- 在CSS属性值中，使用url(图片的URL)来引用图片
- url(dot.png);/url(‘dot.png’);/url(“dot.png”);
- content:" 内容"（不可省）
EMMET语法
!和html:5
- :可以快速生成完整结构的html5代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
> (子代) 和 + (兄弟)
- div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
- div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
- div+div>p>span+em
<div></div>
<div>
<p><span></span><em></em></p>
</div>
*(多个) 和 ^ (上一级)
- ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
- div+div>p>span+em^h1
<div></div>
<div>
<p><span></span><em></em></p>
<h1></h1>
</div>
- div+div>p>span+em^^^^h1
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<h1></h1>
<!-- ^再多，最终也是更低一个元素同级 -->
() (分组)
- div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
- 属性(id属性、class属性、普通属性)
- div#header+div.page+div#footer.class1.class2.class3
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
- td[title=hello]
<td title="hello"></td>
$ (数字)
- ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
- ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
{} (内容)
- a{click}
<a href="">click</a>
- a{click}+span{here}
<a href="">click</a><span>here</span>
- p{click}+a{here}+{to continue}
<p>click</p>
<a href="">here</a>to continue
隐式标签
1.
<div>
.wrap>.content
</div>
<div>
<div class="wrap">
<div class="content"></div>
</div>
</div>
ul>.item*3
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
table>#row$*4>[colspan=2]
<table>
<tr id="row1">
<td colspan="2"></td>
</tr>
<tr id="row2">
<td colspan="2"></td>
</tr>
<tr id="row3">
<td colspan="2"></td>
</tr>
<tr id="row4">
<td colspan="2"></td>
</tr>
</table>
<table>
.item
</table>
<table>
<div class="item"></div>
</table>
<table>
<tr>
.next
</tr>
</table>
<table>
<tr>
<div class="next"></div>
</tr>
</table>
CSS
CSS属性
继承
- 一个元素如果没有设置某属性的值，就会跟随父元素的值
- 当然，一个元素如果有设置某属性的值，就使用自己设置的值
- 能继承的属性，一般可以使用inherit值强制继承
- CSS属性继承的是计算值，并不是当初编写属性时的指定值（字面值）
<div class="div1">div1
<div class="div2">div2
<div class="div3">div3</div>
</div>
</div>
.div1 {
font-size:50px;
}
.div2 {
font-size:50%;
}
.div3 {
font-size:inherit;
}
层叠
- CSS允许多个相同名字的CSS属性层叠同在一个元素上
- 基本层叠:前提:在相同选择器下
CSS属性优先级
- 按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
- !important：10000
- 内联样式：1000
- id选择器：100
- 类选择器、属性选择器、伪类：10
- 元素选择器、伪元素：1
- 通配符：0
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
