web发展历史
- ajax在当前页面加载数据
- HTML5 更新了部分方法和标签
- CSS3 3是版本号 是CSS2的升级版
css3兼容
- blink内核 大部分国产浏览器最新版
- -webkit-兼容Chrome和Safari （以chorme浏览器为主）
- -moz-兼容Firefox
- -ms-兼容IE
- -o-兼容opera
css3新增选择器
选择器
- 元素选择器
- 通配选择器 * 选定所有对象 eg：给所有对象的颜色设置为红色
*{
color:red;
}
- 类型选择器E 选定特定类型的元素
p{
font-size:20px;
}
- ID选择器 E#id 选择具有id属性且值为attr的元素
p#content{
dont-size=20px;
}
<p id="content">正文</p>
- 类选择器 E.class
.title {
font-size: 20px;
}
<h1 class="title">标题</h1>
- 多类选择器
.content.note {
font-size: 30px;
}
<p class="content note">多类选择符的使用</p>
-
关系选择器
-
相邻选择符 E+F
-
兄弟选择符 E~F
-
包含选择符 E F
-
子类选择符 E>F
-
属性选择器
-
E[attr]E 元素 attr属性
-
E[attr=‘val’] 选择带有attr属性并且值为val的元素
-
E[attr~=‘val’]选择具有attr属性并且属性的值符合val的元素
-
E[attr^=‘val’]选择具有attr属性并且属性值以val开头的元素
-
E[attr$=‘val’]选择具有attr属性并且属性值以val结尾的元素，属性有多个值，要求最后一个属性值以val截止
-
E[attr*=‘val’]选择带有attr属性并且属性值里包含val的元素
-
E[attr|=‘val’]选择必须以attr开头，或者以attr开头的并且用连接符-隔开的元素eg. attr-xxx
-
伪类：选择器
-
E:focus 当元素获取焦点时的样式
-
E:not(s) 选中E中不含有s选择器的元素
-
E:first-child 选中E 要求：E需要有一个父元素，并且E是父元素的第一个子元素 应用举例：给所有元素加上边框 去掉以一个元素的上边框
-
E:last-child 选中E 要求：E需要有一个父元素，并且E是父元素的最后一个子元素
-
E:only-child 选中E 要求： E是父元素中的唯一子元素
-
E:nth-child(n) 选择父元素中第n个子元素 选中奇数元素 (2n-1) 选中偶数(2n)
-
E:nth-last-child(n) 选择父元素中倒数第n个子元素
-
E:first-of-type 找到父元素中第一个E 元素
-
E:last-of-type 找到父元素中最后一个E 元素
-
E:only-of-type 找到父元素中唯一这种类型的元素
-
E:nth-of-type 找到父元素中第n个该类型的元素
-
E:empty 查找空的E元素
-
E:checked 用于表单元素被选中时的样式 仅用于单选框radio复选框checkbox disabled 该选项不可修改
-
E:enabled 可以修改的元素
-
E:disabled 不可以修改的元素
伪元素::选择器
- 用途 购物网站300元 的yuan
- E::after 在E 中插入最后一个子元素| content 设置元素内容| display 设置元素展示样式
- E::before 在E 的开头加入一个元素 |content设置元素内容| display 设置元素展示样式
- E::placeholder 表单中默认文案的样式 eg请输入用户名
- E::selection 设置对象被选中时的样式 仅包含background-color\color\text-shadow
p::selection{background:#000;color:#f00;}
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
字体
网络字体
- @font-face
单行文本溢出隐藏
- 强制所有文本在一行显示
- white-space:nowrap;
- 溢出隐藏
- overflow: hidden;
- 文本溢出显示…
- text-overflow:ellipsis
overflow
- overflow:hidden;溢出隐藏
white-space
- white-space:pre-line 与normal的值一致，但会保留文本输入使得换行
- white-space:pre 保留输入时的空格回车换行
- white-space:pre-wraper保留输入时的空格 回车换行 超出边界会换行显示
- white-space:nowrap强制文本一行显示
text-overflow
- 文本超出边界时的剪裁方式 需要配合white-space和overflow一起使用
- text-overflow:clip 剪裁
- text-overflow:ellipsis 显示…
text-shadow
- 给文字加阴影
- 第一个值：水平位置偏移程度 负数左移 正数右移
- 第二个值：垂直位置偏移程度 负数上移 正数下移
- 第三个值：阴影模糊程度 只能是正数 数值越大 阴影程度越大
- 第四个值：阴影颜色
颜色
colorname
- color:red;
- back-ground:blue;
- transparent透明
HEX
- #000000 黑
- #ffffff 白
RGB
- red green blue
- 0-255
RGBA
- red green blue alpha(透明度)
- RGB数值范围：0-255
- A数值范围：0-1
- background-color:rgba(0,0,255,0.5)
兄弟萌，觉得有用就点个赞叭