HTML&CSS学习笔记及其HTML5和CSS3特性

最新推荐文章于 2024-07-16 15:41:31 发布

置顶抹茶星魚

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量544

点赞数 6

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/mryjf/article/details/106153884

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

HTML

概念：HTML是最基础的网页开发语言，不是编程语言
Hyper Text Markup Language：超文本标记语言
HTML中包括：标签名称、标签内容、标签属性
语义化：通过标签名称就能判断标签内容

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：由标签构成的语言。<标签名称> 如 html，xml，标记语言不是编程语言

快速入门

html文件名的命名规范
- 不能以数字开头
- 在项目中不可用汉子命名
- 不能出现除 _ 和 - 外其它特殊字符
html文档后缀名 .html 或者 .htm
标签分为
1. 围堵标签：有开始标签和结束标签。如 <html> </html>
2. 自闭和标签：开始标签和结束标签在一起。如<br/>
标签可以嵌套：
- 需要正确嵌套，不能你中有我，我中有你
  - 错误：<a><b></a></b>
  - 正确：<a><b></b></a>
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
html的标签不区分大小写，但是建议使用小写

<!DOCTYPE html>
<html lang="ch">
	<head>
        <meta charset="UTF-8">
		<title>title</title>
	</head>
			
	<body>
		<FONT color='red'>Hello World</font><br/>
		<font color='green'>Hello World</font>
	</body>
</html>

不写<!DOCTYPE html>，HTML页面会呈现怪异模式
<title>标签不能省略

标签学习

文件标签：构成html最基本的标签
- <html></html>：html文档的根标签
- <head></head>：头标签。用于指定html文档的一些属性，引入外部的资源
- <title></title>：标题标签
- <body></body>：体标签
- <!DOCTYPE html>：html5中定义该文档是html文档
文本标签
- 注释：

单标签

水平线：<hr/>
换行：<br/>
图像：<img/>
- src：指定图片的地址
- alt：图像无法显示时替换图像显示的文本消息
- title：鼠标悬停在图像上时的显示文本
- width：图像宽度
- height：图像高度（宽高不要同时设置，可能会变形）
- border：边框

双标签

标签：h1—h6（h1标签在每个页面中通常只出现一次）
段落：<p></p>
无语义标签：
- <div></div>：每一个div占满一整行。块级标签
- <span></span>：文本信息在一行展示。行内标签（内联标签）
语义化标签：html5中为了提高程序的可读性，提供了一些标签
- <header></header>：页眉
- <footer></footer>：页脚
- <nav></nav>：导航栏
粗体：<strong></strong>（强调文本）和 <b></b>
斜体：<em></em>（强调文字的重要性）和<i></i>
下划线：<ins></ins>
删除线：<del></del>
链接：<a href="#" target="_self"></a>
- 创建超级链接：链接本地文件、链接外部文件
- 查看同一页面的指定位置：href="#名称" name="名称"
- 在新的浏览器窗口打开：target="_blank"
- href：指定访问资源的URL(统一资源定位符)
- target：指定打开资源的方式
  - "_self"：默认值，在当前页面打开链接
  - "_blank"：在新建的空白页面打开链接
- 设置整体链接的打开状态：base
  1. 放在<head></head>之间
  2. target="_blank"
  3. <base target="_block">：所有链接默认都是在新标签页中打开

<a href="http://www.baidu.com" target="_blank">在新标签中打开百度</a>
<a href="#main">跳到此页id为main的位置</a>
<a href="mailto:123@163.com">打开邮箱</a>
<a href="笔记1.html#footer">跳转到笔记1的底部</a>

列表

无序列表：<ul>和<li> (type：disc，square，circle)
- css中list-style-type值：disc实心圆，circle空心圆，square实心正方形
有序列表：<ol>和<li> (type：1，a，A，i，I)
自定义列表：<dl>和<dt>和<dd>
- <dl>标签用于结合<dt>（定义列表中的项目）和<dd>（描述列表中的项目）。

表格

<table></table>
- width：宽度
- height：高度
- border：表格边框
- cellspacing：单元格与单元格之间的间隙（一般设置为0，单元格边框不会重叠）
- collspadding：单元格内容与边框之间的间隙（一般设置为0）
- align：表格的对齐方式
标题：<caption></caption>
表示表格的头部分：<thead></thead>
表示表格的体部分：<tbody></tbody>
表示表格的脚部分：<tfoot></tfoot>
定义行：<tr></tr>
定义单元格：<td></td>
- 合并竖行(Y)：rowspan=“合并个数”
- 合并横列(X)：colspan=“合并个数”
定义表头单元格：<th></th>
表头：thead-tr-th
表格主体：tbody-tr-td

表单标签

概念：用于采集用户输入的数据的，用于和服务器进行交互。

<form action="" method=""></form>
- action：指定提交数据的URL
- method：指定提交方式（一共7种，2种比较常用）
  - get
    1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
    2. 请求参数大小是有限制的。
    3. 不太安全。
  - post
    1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
    2. 请求参数的大小没有限制。
    3. 较为安全。
- 注意：表单项中的数据要想被提交，必须指定其name属性

表单项标签

<input type="text" value="">：通过type属性值，改变元素展示的样式
- type属性值
  - text：文本输入框，默认值
  - placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
  - password：密码输入框
  - radio：单选框
    1. 注意：要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
    2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    3. checked属性，可以指定默认值
  - checkbox：复选框
    1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    2. checked属性，可以指定默认值
  - file：文件选择框
  - hidden：隐藏域，用于提交一些信息。
  - button：普通按钮
  - submit：提交按钮。可以提交表单
  - image：图片提交按钮（src属性指定图片的路径）
  - reset：重置按钮
- value：标签里显示的值，可选中
- placeholder：标签的提示信息，不可选中（常用于：请输入用户名）
<label>：指定输入项的文字描述信息
- 注意：label的for属性一般会和 input 的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

<form>
	<label for="male">Male</label>
	<input type="radio" name="sex" id="male" />
	<br />
	<label for="female">Female</label>
	<input type="radio" name="sex" id="female" />
</form>

<select>: 下拉列表
- <option>：子元素，指定列表项
  - selected="selected"：选中当前子元素

<select>
	<option value="1">a</option>
	<option value="2">b</option>
	<option value="3">c</option>
	<option value="4">d</option>
</select>

<textarea>：文本域
- cols：指定列数，每一行有多少个字符
- rows：指定行数。

CSS

概念： Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
css样式由选择器（符）和声明组成，声明由属性和值组成
css放置的位置：行内式（内联式）、内部式、外联式
盒子样式一般不继承，文本样式一般都继承

好处：
1. 功能强大
2. 将内容展示和样式控制分离
  - 降低耦合度。解耦
  - 让分工协作更容易
  - 提高开发效率

CSS的使用：CSS与HTML结合方式

内联(行内)样式：在标签内使用style属性指定CSS代码
- <div style="color:red;">hello css</div>
内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码

<style>
	div{
		color:blue;
	}
</style>

<div>hello css</div>

外部样式：首先定义css资源文件，再在head标签内定义link标签，引入外部的资源文件
- <link rel="stylesheet" type="text/css" href="css文件地址" />

<!--a.css文件-->
div{
	color:green;
}
<!--链接使用-->
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

<!--外部样式还可以写为-->
<style>
	@import "css/a.css";
</style>

注意：
- 三种方式css的作用范围越来越大
- 后期常用：内部样式、外部样式
link和 @import 的区别（无样式闪烁问题FOUC）
- @import是 CSS 提供的语法规则，只有导入样式表的作用
- link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
- 加载页面时，link标签引入的CSS被同时加载
- @import引入的 CSS 将在页面加载完毕后被加载
- @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别
- link标签作为 HTML 元素，不存在兼容性问题

CSS语法

选择器 {
	属性名1:属性值1;
	属性名2:属性值2;
	...
}

选择器：筛选具有相似特征的元素（div、span…）
注意：每一对属性需要使用 ; 隔开，最后一对属性可以不加

CSS三大特性

层叠性：样式冲突时，遵循就近原则；样式不冲突时，则互不影响
继承性：子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
优先级：通配符选择器(*) < 标签选择器 < 类选择器(.) < id选择器(#) < !important

选择器：筛选具有相似特征的元素

基础选择器
1. id选择器：选择具体的id属性值的元素（建议在一个html页面中id值唯一）
  - 语法：#id属性值{}
2. 元素选择器：选择具有相同标签名称的元素
  - 语法：标签名称{}
  - id选择器优先级 > 元素选择器
3. 类选择器：选择具有相同的class属性值的元素。
  - 语法：.class属性值{}
  - 类选择器优先级 > 元素选择器
扩展选择器
1. 通配符选择器（选择所有元素）
  - 语法：*{}
2. 交集选择器
  - h2.ab{ } (类名为ab的h2标签)
3. 并集选择器
  - 语法：选择器1,选择器2{}
  - div,p, .ab{ }（多个选择器一起选中）
4. 父选择器：筛选选择器2的父元素选择器1
  - 语法：选择器1 > 选择器2{}
  - div>p { }（div标签的亲儿子p标签）
5. 后代选择器
  - div p{ }（div中包裹的p标签。可以是父子关系，可以是爷孙关系）
6. 属性选择器：选择元素名称，属性名=属性值的元素
  - 语法：元素名称[属性名="属性值"]{}
7. 伪类选择器：选择一些元素具有的状态
  - 语法：元素:状态{}
  - 如<a></a>状态
  - -:link：初始化的状态
  - -:visited：被访问过的状态
  - -:active：正在访问状态
  - -:hover：鼠标悬浮状态
优先级：行内式1000、id选择器100、class选择器10、标签选择器1、通用选择器0.5（选择器权重可以累加，但不可逾越）

CSS字体

样式属性

font: font-style font-weight font-size/line-height font-family;

font: normal bolder 20px/40px "微软雅黑";：字体风格无，加粗，字体大小20px，行高40px，字体样式微软雅黑
font-size：字体大小【默认16px，单位 em rem（倍数，em是父元素大小的倍数，rem是根元素大小的倍数）】
font-family：字体样式（“微软雅黑”）
font-weight：字体粗细（normal=400，bold=700，bolder，lighter）
font-style：字体风格（normal正常，italic斜体，oblique倾斜）
color：字的颜色

文本属性

line-height：行高（可用于单行文字垂直居中）
text-indent：首行缩进（em）
text-aligh: center;：水平对齐方式（x里的内容在x里面位置）【left，center，right，justify（两端对齐，文本紧贴两端，不包括最后一行）】
text-decoration：文本修饰（none，underline下划线，overline上划线，line-through删除线）（通常用于a标签去掉下划线）
letter-spacing：字符间距
word-spacing：空格/词间距（仅对英文字母有效，英文单词附近的空格）
text-transform: capitalize;：英文大小写（capitalize首字母大写，uppercase全部大写，lowercase全部小写）
vertical-align：文本所在行高垂直对齐方式（文本框对齐）

背景

background-color：背景颜色
background-img: url(图片地址)：背景图片
background-repeat: repeat：背景图片是否平铺
- repeat：默认平铺
- no-repeat：不平铺
- repeat-x：水平平铺
- repeat-y：垂直平铺
background-position: 10px：背景图像方位
- length 数值、top、bottom、left、right、center
- 后面可以跟方位名词，之间没有顺序
- 如果只写一个值，另一个默认居中
- 后面也可以跟值px，但是必须有顺序，x在前，y在后
background-size: width, height：背景图尺寸设置
background-attachment: scroll：背景附着
- scroll：默认随对象内容滚动
- fixed：背景图像固定
background: rgba（0,0,0,0~1）：背景透明
background: 颜色图片地址平铺滚动位置：背景的简写

盒子模型

盒子模型由元素内容、内边距（padding）、外边距（margin）、边框（border）构成

border: border-width border-style border-color：盒子边框

例如：border: 1px solid red;

border
- border：边框
- border-top：上边框
- border-bottom：下边框
- border-left：左边框
- border-right：右边框
border-style
- solid：单实线
- dashed：虚线
- dotted：点线
- double：双实线
border-width（其它属性值也可以以此类推，顺时针）
- 20px：上下左右均为20像素
- 20px 30px：上下为20像素，左右为30像素
- 20px 30px 40px：上为20像素，左右为30像素，下为40像素
- 20px 30px 40px 50px：上为20像素，右为30像素，下为40像素，左为50像素
border-radius: 50%;：圆角边框（也可以取数值，如块级元素高为50px，可以设置25px的圆角边框）
table{border-collapse: collapse;}：表格细线边框，用于除去单元格于单元格之间的间隙（单元格边框重叠）
box-shadow: 水平阴影垂直阴影模糊距离阴影尺寸阴影颜色(支持rgba方式) inset(内/外阴影默认);：盒子阴影
padding：设置内边距后会撑开盒子
margin：外边距
- margin: 0 auto;：盒子外边距水平居中
- 外边距塌陷原因
  - 相邻块元素垂直外边距合并，选取较大的外边距，避免即可
  - 嵌套块元素垂直外边距合并
- 外边距塌陷的解决方法
  - 父级元素定义1px上边框或上内边距
  - 为父级元素添加 overflow: hidden;
盒子默认宽度
- 当父盒子有宽度定值时，则父盒子padding会撑开父盒子
- 如果盒子没有给定宽度，用的是默认父盒子宽度，则给予的padding值不会撑开盒子

块级元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>、<address><blockquote>、<form>等，其中<div>标签是最典型的块元素

总是从新行开始，并且其后的元素也另起一行
高度，行高、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>、<label>等，其中<span>标签是最典型的行内元素

和相邻行内元素在一行上
高、宽无效，但水平方向的 padding 和 margin 可以设置，垂直反向的无效
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素。（a 特殊： a里面可以放块级元素）

行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>

和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙
默认宽度就是它本身内容的宽度
高度，行高、外边距以及内边距都可以控制

显示模式的转换

块级元素转换为行内元素：display: inline
行内元素的转换为块级元素：display: block
块级元素/行内元素转换为行内元素：display: inline-block
元素隐藏：display: none;

注意点

div中不能放一个有宽度的块级标签
文本类标签（p，h1~h6，dt）中只能放文本，不能放块级标签
链接里面不能再放链接

浮动：float

float: left;：左(右)浮动
浮动特性：
1. 浮动是指脱离本身的位置，把原先自己的位置让出来了
2. 父级没有高度，则子级浮动不会再撑开父级盒子
3. 浮动其实就是隐藏的模式转换，浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么
4. 浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。

清除浮动的方法

.clear{clear: both;}：额外标签法，在浮动的标签后面加一个类名为clear的空标签

<style>
/* 省略 */
	.clear{
		clear: both;
	}
</style>
<div class="box">
	<div class="con">1</div>
	<div class="con">2</div>
	<div class="con">3</div>
	<!--新添加的clear标签-->
	<div class="clear"></div>
</div>

给浮动的元素父级添加 overflow: hidden;
使用:after伪元素清除浮动, 在浮动的元素的父级元素添加属性 class="clearfix"

.clearfix:after {
	content="";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{
	*zoom: 1;
}

使用:after和:before双伪元素清除浮动，在浮动的元素的父级元素添加class="clearfix"

.clearfix:after,
.clearfix:before {
	content="";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}

定位 position

position: static;：静态定位
- 静态位置就是各个元素在HTML文档流中默认的位置。
position: relative;：相对定位
- 相对定位通过边偏移移动位置，但 原来所占据的位置继续占有
- 每次移动位置，以自己的左上角基点移动
position: absolute;：绝对定位
- 通过边偏移移动位置，但 完全不占据位置
- 若写定绝对定位的子元素的所有父级元素都没有定位的时候，以浏览器为准进行偏移，若父元素有定位，则以父元素位置。
绝对定位盒子居中
- left: 50%;：父盒子的一半
- 子盒子自己外边距负一半的值
position: fixed;：固定定位
- 固定定位元素与父级元素无关，只认浏览器
- 固定定位完全脱标，不占有位置，不随着滚动条滚动
z-index：叠放顺序
- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有相对定位，绝对定位，固定定位有此属性。

CSS高级技巧

元素的显示和隐藏

display: none;：隐藏之后，不再保留位置
display: block;：显示元素
visibility: hidden;：隐藏之后保留原有位置
visibility: visible;：元素可见
opacity: 0;：透明度为0

溢出显示与隐藏

overflow: visible;：默认不剪切内容也不添加滚动条
overflow: auto;：超出自动显示滚动条
overflow: hidden;：超出部分隐藏
overflow：scroll;：不管是否超出内容，总是显示滚动条

鼠标样式

cursor: default：小白（一般状态）
cursor: pointer：小手
cursor: move：移动（十字）
cursor: text：文本（I 字型）

取消input 等的轮廓线

outline: none;

防止文本域拖拽

resize: none;

去掉li的样式

list-style: none;

垂直对齐

vertical-align: baseline;：默认图片与文字基线对齐
vertical-align: middle;：图片与文字垂直居中
vertical-align: top;：图片与文字顶部对齐

去除图片底部空白缝隙

给img添加 vertical-align: top / middle
将img转为块级元素display: block;

溢出的文字隐藏（步骤）

white-space: nowrap;强制在一行内显示所有文本直到文本结束或遭遇br标签对象来才换行
overflow: hidden;溢出隐藏
text-overflow: clip;：文字溢出（clip不显示省略标记直接裁剪、ellipsis当对象内文本溢出是显示省略标记）

页面布局

布局思路

从外向里
从上至下
从左至右

样式编写顺序

定位（float、position、left、right、bottom、top、z-index）
宽、高、边距
文字样式
背景样式
过渡动画

样式书写规范

0.5可以写.5，0可以省略
对于可以简写的属性尽量简写 background、margin、padding、border
给子元素添加样式前写父级类名
布局是尽量使用类，不要使用id

问题

乱码问题：编码<meta charset="utf-8">
样式引入无效问题（属性丢失，路径错误）<link rel="stylesheet" type="text/css" href="">
清除浮动问题
定位乱的问题：找绝对定位的父级添加相对定位
a标签鼠标经过无效问题：a:link、a:visited、a:hover、a:active（顺序问题）

兼容性问题(CSS HACK)

概念：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号
CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
1. 属性级Hack：
  - IE6能识别下划线 _ 和星号 *，
  - IE7能识别星号 *，但不能识别下划线 _，
  - 而firefox两个都不能认识。
2. 选择符级Hack：
  - IE6能识别*html .class{}，
  - IE7能识别*+html .class{}或者*:first-child+html .class{}。
3. IE条件注释Hack：
  - IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。
  - 针对所有IE：<!–[if IE]> <script>您的代码</script> <![endif]->，
  - 针对IE6及以下版本：<!-[if it IE 7]> <script>您的代码</script> <![endif]->，
  - 这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

HTML5

2014 年 10 月 28 日，W3C 组织公开发布 HTML5 标准规范。HTML5 针对大量不规范的 HTML 文档，做到了良好的兼容性。

HTML5 和 HTML4 的区别

DTD 的变化：因为HTML4.01基于SGML，HTML5不基于SGML
HTML5 的语法变化
- 某些元素可以省略结束标签（<p> <li> <dt> <dd> 等）
- 没有结束标签的元素 (<br> 等）
属性值可以不用引号括起来
标签不再区分大小写
某些标志性的属性可以省略属性值，通常为 boolean 类型

HTML5 的优势

解决跨浏览器，跨平台问题
2.增强了 web 的应用程序（比如以前用 Flash 来播放视频，现在直接使用 HTML5 来播放视频，使得手机网页也能看视频）

HTML5废弃的标签

big center font frame frameset noframes

HTML5新增的元素

<header>：页眉
<footer>：页脚
<article>：文章
<section>：定义文档中的一个区域（或节）
<aside>：用于定义与当前页面或当前文章的内容几乎无关的附属信息
<nav>：导航链接部分
<audio>：声音，比如音乐或其他音频流
<video>：视频，比如电影片段或其他视频流
<mark>：高亮文本
<time>：显示被标注的内容是日期或时间（24 小时制）
<progress>：表示一个进度条
<hgroup>：用于对多个<h1>~<h6>元素进行组合
<figure>：一段独立的引用，经常与说明(caption)<figcaption>配合使用，通常用在主文中的图片，代码，表格等。
- <figcaption>：用于表示是与其相关联的引用的说明/标题，用于描述其父节点
- <figure>：元素里的其他数据。

低版本的浏览器兼容新标签

<!--低版本的浏览器兼容新标签-->
<!–[if lt IE9]> 
	<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

HTML5新增的type类型

color
number
email
time：生成一个时间选择器
datetime：生成一个 UTC 的日期时间选择器
datetimelocal：生成一个本地化的日期时间选择器
date：显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。谷歌识别

HTML5新增的表单属性

placeholder：主要用在文本框，规定可描述输入字段预期值的简短的提示信息
autofocus：当为某个表单控件增加该属性后，当浏览器打开这个页面，这个表单控件会自动获得焦点
list：为文本框指定一个可用的选项列表，当用户在文本框中输入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择

<input type="text" list="list">
<datalist id="list">
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="山西">山西</option>
</datalist>

pattern：用于验证表单输入的内容，通常 HTML5 的 type 属性，比如email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后，验证会更加高效
required：必需在提交之前填写输入字段
spellcheck：拼写检查，为<input>、<textarea>等元素新增属性
multiple：一次上传多个文件
maxlength：用于规定文本区域最大字符数。
wrap：是否包含换号符（soft/ hard） -->

CSS3

~：兄弟选择器（向后查找兄弟元素）

属性选择器

E[attribute^=value]：选取带有以指定值开头的属性值的元素
E[attribute$=value]：选取属性值以指定值结尾的元素
E[attribute*=value]：选取属性值中包含指定值的元素，位置不限，也不限制整个单词

伪类选择器

:root：选择文档的根元素，HTML 里，永远是<html>元素
:last-child：向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n)：向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n)：向元素添加样式，且该元素是它的父元素的倒数第 n 个子元素
:only-child：向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type：向元素添加样式，且该元素是同级同类型元素中第一个元素
:last-of-type：向元素添加样式，且该元素是同级同类型元素中最后一个元素
:nth-of-type(n)：向元素添加样式，且该元素是同级同类型元素中第 n 个元素
:nth-last-oftype(n)：向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type：向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty：向没有子元素（包括文本内容）的元素添加样式

伪元素选择器

:enabled：向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:disabled：向当前处于不可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样
:not(selector)：向不是 selector 元素的元素添加样式
:target：向正在访问的锚点目标元素添加样式

background

background-clip：背景覆盖范围
- border-box：将边框外的全部剪切掉
- padding-box：将padding外的全部剪切掉
- content-box：将内容外的全部剪切掉
background-origin：背景覆盖的起点（简写background时候第一个值为起始位置）
- border-box：从左上角边框开始显示图片
- padding-box
- content-box
box-sizing
- border-box
- content-box
background-size：设置背景的大小
- cover
- contain
- 长度\百分比

文字

text-overflow：设置当文本溢出元素框时处理方式
- clip：剪切掉溢出的文字
- ellipsis：显示3个小圆点
word-break：只对英文起作用以字母作为换行依据
- normal
- break-word
word-wrap：只对英文起作用以单词作为换行依据
- normal
- break-all
- keep-all
white-space:pre-wrap：只对中文起作用，强制换行

变形

transform：变形

transform: translate(x,y);：元素水平方向移动 x，垂直方向移动 y，其中 y 可以省略，表示垂直方向没有位移
- translateX(x)：元素水平方向移动 x。
- translateY(y)：元素垂直方向移动 y。
transform: rotate(angle);：元素默认绕中心点顺时针旋转 angle 角度，angle 的单位通常为 deg
- rotateX(angle)：元素默认绕X中心轴顺时针旋转 angle 角度
- rotateY(angle)：元素默认绕Y中心轴顺时针旋转 angle 角度
transform: scale(x,y);：元素水平方向缩放(拉伸)比为 x，垂直方向上缩放(拉伸)比为y，其中y可以省略，表示y和x相同，以保持缩放(拉伸)比。（正方形->长方形）
- scaleX(x)：元素水平方向缩放比为 x。
- scaleY(y)：元素垂直方向上缩放比为 y。
transform: skew(angleX ,angleY);：元素沿着 x 轴方向倾斜angleX角度，沿着y轴方向倾斜angleY角度，其中 angleY可以省略，表示 Y 轴方向不倾斜。（正方形->平行四边形）
- skewX(angleX)：元素沿着 x 轴方向倾斜angleX 角度。
- skewY(angleY)：元素沿着 y 轴方向倾斜 angleY 角度。
transform-origin：表示元素旋转的中心点，默认值为 50% 50%。
- 第一个值表示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比；
- 第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、 center、长度、百分比。
CSS3 的 3D 变形属性
- transform 增加了三个变形函数：
  - rotateX：表示元素沿着 x 轴旋转。
  - rotateY：表示元素沿着 y 轴旋转。
  - rotateZ：表示元素沿着 z 轴旋转。
transform-style：用来设置嵌套的子元素在 3D 空间中显示效果。它可以设置两个属性值，flat（子元素不保留其 3D 位置，默认值）和 preserve-3d（子元素保留它的 3D 位置）。
perspective：设置成透视效果，透视效果为近大远小。该属性值用来设置 3D 元素距离视图的距离，单位为像素，已经内置了，我们只需要写具体数值即可，默认值为 0。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective-origin
- 设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值同transform-origin，默认值为 50% 50%。

transition：变形过渡（动画效果）

transition: property duration delay timing-function
- transition-delay：过渡的延迟时间
- transition-duration：过渡的过渡时间
- transition-timing-function：过渡的时间曲线
  - linear：匀速
  - ease：慢速开始，然后变快，然后慢速结束
  - ease-in：慢速开始
  - easeout：慢速结束
  - ease-in-out：慢速开始和结束
- transition-property：设置哪条CSS 使用过渡none、all、CSS 属性名称列表

<style>
	div{
		transition: 2s; /* 2秒为执行时间 */
		transition: 1s 2s; /* 1秒为执行时间，2秒为延时时间 */
		transition: top 1s 2s; /* 只有top执行过渡效果 */
		transition: top 1s 2s linear; /* linear匀速执行过渡动画 */
	}
	
</style>

animation：动画

animation:name duration delay count state
animation-name：使用@keyframes 定义的动画
animation-delay：动画的延迟时间
animation-timing-function：动画的时间曲线
- linear、ease、ease-in、easeout、ease-in-out
animation-iteration-count：设置动画播放次数
- 数字
- infinite：无限大
animation-direction：动画反向播放 normal/alternate;
animation-play-state：动画播放状态
- paused：暂停
- running：播放
animation-fill-mode：forwards动画保持最终状态

<style>
	/**/
	-moz-@keyframes name{
		0%{

		}
		50%{

		}
		100%{

		}
	}
	
	-webkit-@keyframes name{
		0%{

		}
		50%{

		}
		100%{

		}
	}
	
	/* 例如 */
	@keyframes translate{
		0%{
			transform: translateX(0) translateY(0);
		}
		25%{
			transform: translateX(500px) translateY(0);
		}
		50%{
			transform: translateX(500px) translateY(300px);
		}
		75%{
			transform: translateX(0) translateY(300px);
		}
		100%{
			transform: translateX(0) translateY(300px);
		}
	}
</style>

弹性盒子

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒模型的语法基础概念
- 任何一个容器都可以指定弹性布
- 设置 flex 布局以后，子元素的 float、clear、vertical-align 等样式全部失效
- display:flex; 或 display:inline-flex;
弹性父元素属性
- display:flex;
- flex-direction：指定了弹性子元素在父容器中的位置。
  - row：横向顺序排列（左->右）
  - row-reverse：横向逆序排列（右->左）
  - column：纵向顺序排列
  - column-reverse：纵向逆序排列
- juestify-content：水平对齐方式
  - flex-start：左端对齐
  - flex-end：右端对齐
  - center：横向位于容器的中心
  - space-between：两端对齐（挨着边对齐+margin）
  - space-around：两边都空等于中间元素间距的一半
- align-items：垂直对齐方式
  - flex-start：顶部对齐
  - flex-end：底部对齐
  - center：纵向位于容器中心
  - baseline
  - stretch
- flex-wrap：换行
  - nowrap
  - wrap：换行
  - wrap-reverse
  - initial
  - inherit
- align-content
  - 当 flex-wrap 起作用发生换行时，该属性控制每行的对齐方式
弹性子元素属性
- order: num：数值小的排在前面。（可以为负值）
- flex：属性用于指定弹性子元素如何分配空间

自定义字体

<style>
	@font-face {
		font-family: 'iconfont';
		src: url('font/iconfont.eot');
		src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
			url('font/iconfont.woff2') format('woff2'),
			url('font/iconfont.woff') format('woff'),
			url('font/iconfont.ttf') format('truetype'),
			url('font/iconfont.svg#iconfont') format('svg');
		}
	.iconfont{
		/*
		font-family: 'iconfont';
		font-size: 40px;
		font-style: normal;
		*/
		font:normal 40px/80px "iconfont";
	}
	.close:before{
		content:"\e603";
	}
</style>
<body>
	<!-- <i class="iconfont close">&#xe603</i> -->
	<i class="iconfont close"></i>
	<button type="button" onclick="window.history.back()">返回上一页</button>
</body>

抹茶星魚

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS学习笔记及其HTML5和CSS3特性

HTML&CSS知识点HTML概念：HTML是最基础的网页开发语言Hyper Text Markup Language：超文本标记语言超文本:超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本标记语言:由标签构成的语言。<标签名称> 如 html，xml标记语言不是编程语言快速入门：html文档后缀名 .html 或者 .htm标签分为围堵标签：有开始标签和结束标签。如 <html> </html>自闭
复制链接

扫一扫