网易微专业 学习测试总结
<PhotoShop>
ctrl + + 放大画布
ctrl+ R 网络标尺
<html5>
table 不具有src 属性
列表标签
dl
ul
ol
meta
针对搜索引擎的关键词
定义了与文档相关联的名值对 charset = ‘utf-8’
colspan 可以实现跨列显示的效果
<css>
border-box:content-box padding-box border-box 三个属性最外围即边框标准的盒子模型 content-box
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
box-shadow: -10px
0 10px red, /*左边阴影*/ 10px 0 10px yellow, /*右边阴影*/ 0 -10px 10px blue, /*顶部阴影*/ 0 10px 10px green;
//支持扩展
如果前面的阴影模糊值小于后面的阴影模糊值，那么前面的显示在后面之上，如果前面阴影的模糊值大于后面的阴影模糊值，那么前面的阴影将遮住后面的阴影效果。
text-shadow:
padding:5px 10px 15px; 上5px 右10px 下15px 左因为缺省与右相等，则为10px
1.text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。 内联元素 display:inline-block;
2.margin:0 auto 设置块元素（或与之类似的元素）的居中。
选择器中的一些常见的错误
.a.b{color:red;}//连在一起写对应的类是 <p
class="b c">HelloWorld</p>
p.a{color:red;} //顺序是有关系的
background-position: 默认值是 0% 0%
background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
如果您仅规定了一个值，另一个值将是 50%。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
常用的：
translateX(x) 定义转换，只是用 X 轴的值。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
在颜色值中transparent和rgba(0,0,0,0)最终的表现是一样的
block:父元素宽度 可设置宽高 换行
inline：内容宽度 不可设置宽高 同行
语法怎么看
- * 代表出现0次或以上。
- + 代表出现1次或以上。
- ? 代表是可选的，即出现0次或1次。
- {A} 代表出现A次。
- {A,B} 代表出现 A 次以上 B 次以下，其中B可以省略为 {A,}，代表至少出现A次，无上限。
- # 代表出现1次以上，以逗号隔开，可以选择后面跟大括号的形式，精确表示重复多少次，如<length>#{1,4}。
- ! 代表出现产生一个值，即使组内的值都可以省略，但至少有一个值不能呗省略，如[ A? B? C? ]!。
|
0个或更多 |
A? B? C? |
A? || B? || C? |
|
1个或更多 |
[ A? B? C? ]! |
A || B || C |
|
1个 |
A | B | C |
|
|
所有 |
A B C |
A && B && C |
- 兼容性：
font-size:<length>|<percentage> 这两个有一个
font-family:[<family-name>|<generic-family>]#
#可以用逗号分隔来写多个值
font：[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ] | caption | icon | menu | message-box | small-caption | status-bar
[ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ] ? [ / <' line-height '> ] ? 可选值 而且有line-height的时候前面要有一个斜杠
font-size 和font-family 是两个必填项 如果少了就不起作用了
伪类
a:link {color:#FF0000;} /* 未访问的链接
*/
a:visited
{color:#00FF00;} /* 已访问的链接 */
a:hover
{color:#FF00FF;} /* 鼠标划过链接 */
a:active
{color:#0000FF;} /* 已选中的链接 */
您可以使用 :first-child 伪类来选择元素的第一个子元
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
元.tip{ color:red !important;} 提升优先级
已知这样一段HTML：<div class="a b"><em>Hello World</em></div>，应用了这样一段CSS：
em{ color:red; }
.a{ color:blue; }
.b{ color:green; }
.a.b{ color:yellow; }
请问，文字“Hello World”的颜色是（回答颜色的英文名称即可）___red_______
最接近的元素 em的优先级更大
外围的终究是外围的
.main h2{}后代选择器 main 后面所有的h2子元素被选中
.main>h2{} 对 main 下的第一个h2选中
h2+p h2后面第一个p元素被选中
