块级元素和行内元素
块级元素（<h1>~<h6>,<div><ul><ol><li>）特点
1.总是从新行开始
2.高度、行高、外边距、内边距都可控制
3.默认宽度是容器的100%
4.可容纳内联元素和其他块元素
行内元素（<a><strong><b><em><i><del><s><ins><u><span>）特点
1.和相邻行内元素在一行
2.宽、高无效，但水平方向padding和margin可以设置，垂直方向无效
3.默认宽度为本身内容宽度
4.行内元素只能容纳文本或其他行内元素
行内块元素(<img/><input/><td>)
1.和相邻行内元素在一行，但是之间有空隙
2.默认宽度是她本身宽度
3.高度、行高、外边距、内边距都可控制
标签显示模式转换display
块转行内:display:inline
行内转块:display:block
转为行内块:display:inline_block
CSS复合选择器
交集选择器
标签选择器.类别选择器(h1.red)
并集选择器
选择器之间用逗号隔开
后代选择器
中间用空格隔开(选择儿子、孙子、重孙子)
子元素原则器
用">"相连(只选择儿子)
属性选择器
选取标签带有某些特殊属性的选择器
选择器 | 含义 |
E[attr] | 存在attr属性既可 |
E[atte=val] | 属性值等于val |
E[attr*=val] | 属性值包含val在任意位置 |
E[attr^=val] | 属性值包含val在开始位置 |
E[attr$=val] | 属性值包含val在结束位置 |
E::first-letter文本中第一个单词或字
E::first-line文本第一行
E::selection可改变选中文本的样式
E::befor E::after在div内部前面/后面插入
CSS书写规范
空格规范
选择器与"{"之间必须包含空格
属性名与之后的":"之间不包含空格额，":"与之后的值包含空格
选择器规范
多个选择器时，每个选择器独占一行
选择器嵌套层级不大于三级
CSS背景
background-color | 背景颜色 |
background-image | 背景图片 |
background-repeat | 是否平铺(repeat-x横向平铺repeat-y纵向平铺) |
background-position | 位置(默认background-position：left top) |
background-attachment | 固定还是滚动 |
背景颜色 图片 平铺 滚动 位置
background: traparent url repeat-y scroll 0;
背景透明
background: rgba(0,0,0,0.3);
背景缩放
background-size
1.设置长度px或百分比
2.设置为cover时自动调整缩放比例充满盒子，有溢出部分被隐藏
3.设置为contain时自动调整缩放比例，图片始终完整显示在盒子内
多背景图片
图片之间","隔开，前面图片可能覆盖后面，避免背景覆盖颜色，通常将背景颜色设置在最后一张图片
凹凸文字
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-color: #ccc;
}
div {
color: #ccc;
font: 700 80px "微软雅黑";
}
div:first-child {
text-shadow: 1px 1px 1px #000,
-1px -1px 1px white;
}
div:last-child {
text-shadow: 1px 1px 1px white,
-1px -1px 1px #000;
}
</style>
</head>
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>
</html>
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
