1. CSS样式使用
- 内部样式(嵌入样式)
<style type="text/css"></style>
要放head中间 - 行内样式
<p style="color:red;"></p>
- 外部样式
<link href="1.css" rel="stylesheet" type="text/css"/>
放head中 - 导入式 写在style内
@import "1.css";
or@import url(1.css);
2. 文本样式
font-family:"宋体","黑体";
- 多个字体浏览器依次查找。若没有,浏览器使用默认样式
- 可以是具体字体名也可以是字体集(Serif Sans-serif Monospace Cursive Fantasy)
font-size:20px;
- 绝对字体大小
- in cm mm pt pc
- xx-small x-small small medium large x-large xx-large
- 相对字体大小
- px
- em
- 绝对字体大小
color:red;
color:#008800
color:rgb(0,0,0)
- rgb 0 ~ 255 或 0% ~ 100%
- 超出的数值自己变成 0或255或0%或100%
font-weight:bold;
- 100 ~ 900
- lighter normal(400) bold(700) bolder
font-style:normal;
- normal
- italic 斜体 一般表示引用
- oblique 斜体
font-variant:small-caps
小型的大写字母font:font-style font-variant font-weight font-size/line-height font-family
- 前3顺序可换 但总体保持不变
text-align:center
使块内的文本相对于其父元素居中- 行高技巧(相对于font-size)
div{font-size: 20px;text-indent: 1em;line-height:2em} p{font-size: 30px} <div> <p>行高技巧</p> </div>
- text-indent 缩进 - em和10%都是相对于font-size - line-height的值为20px * 2计算的值而不是30px * 2
vertical-align:baseline;
对块元素无效 行内元素有效- super/sub 上标 下标
- top/bottom/middle 行最高/低/中线处对齐
- text-top/text-bottom 文本最高/最低处对齐
- ±15px 相对于基线上移/下移15px
- ±100% 相对于基线上移/下移100%
- 单行水平垂直居中
.content{ width:400px; height:400px; line-height: 400px; text-align: center; } <div class="content"> <p>website</p> </div>
- 多项水平垂直居中
.out{ width:400px; height:400px; display: table; } .in{ vertical-align: middle; display: table-cell; text-align: center; } <div class="out"> <div class="in"> <h1>122</h1> <h2>999</h2> </div> </div>
word-spacing:1em;
单词之间间隙letter-spacing:-0.5em;
字母之间间隙text-transform:capitalize;
- capitalize/none 无样式
- uppercase/lowercase 大写/小写
text-decoration:underline overline line-through none;
-
下划线 上划线 贯穿线
- 样式可同时存在 none在最后所有样式无效
-
3. 盒子模型
max-width:300px;min-width:400px;
如果max-width小于min-width那么会显示min-width- 可设置宽高的元素
- 块级元素 p div h1 ul ol li dl dt dd
- 替换元素 img input textarea 等
- 盒子宽高 = 内容 + padding + border-width +margin
- 背景颜色区域 = 内容 + padding + border
- margin可为负值 padding不能为负值
-
.content{ width:200px; height:200px; padding: 20px; background: red; border:10px solid green; } .one{ width:100%; height:100%; background: aqua; border:5px solid green; } <div class="content"> <div class="one"></div> </div>
- one的宽高为200px 再加上5px border 为 210px
- 默认情况下块元素都有margin
-
.content{ width:200px; height:200px; margin-right: 30px; float:left; } .ct{ margin-left: 20px; float:left; } <div class="content"></div> <div class="content ct"></div>
- 水平方向上两个块float布局,添加margin后两个块的margin都会生效 - 垂直方向两个块 添加margin后 两个margin会合并 结果为值较大的margin
- 边框默认和里面的文本颜色一致
4. 背景图片
background-attachment:scroll
图片随着滚动而滚动- fixed 图片固定在一处
-
background-position:10% 10%; background-position:left;
- left/right 靠左/右 垂直居中 - top bottom 靠顶/底 水平居中 - center 水平垂直都居中
- background不分先后顺序
5. 列表样式
- 无序列表
list-style-type:circle;
- circle 空心圆 disc实心圆 square 实心正方形
- 有序列表
list-style-type:decimal;
- decimal 从1开始的整数
- lower-roman 小写罗马数字
- upper-roman 大写罗马数字
- lower-alpha 小写英文字母
- upper-alpha 大写英文字母
- 列表图片标记
list-style-image:url(img.png);
- 列表标记位置
list-style-position:outside;
文本不环绕图标- inside 文本环绕图标
list-style:
顺序不固定 list-style-image会覆盖list-style-type
6. float定位
- css三种定位机制 普通流 浮动 绝对定位
- float浮动
- float浮动不影响前面元素 影响后面元素(环绕)
.bg{ width:300px; height:300px; border:1px solid green; } .sm{ width:50px; height:50px; background-color: aqua; border:1px solid green; float: left; } <div class="bg" > <p>11111111111111</p> <div class="sm"></div> <p>1. 无序列表`list-style-type:circle;` - circle 空心圆 disc实心圆 square 实心正方形 </p> </div>
- 第一个元素左浮动 后面元素未浮动 未浮动的第一个元素会被覆盖
.big{ width:300px; height:300px; border:2px solid black; } .sm{ width:50px; height:50px; } .one{ background-color: aqua; float:left; } .two{ background-color: yellow; } .three{ background-color: green; } <div class="big"> <div class="sm one"></div> <div class="sm two"></div> <div class="sm three"></div> </div>
- clear清除浮动
- left/right 清除左/右一个浮动,不会全部清除
.big{ width:300px; height:300px; border:2px solid black; } .sm{ width:50px; height:50px; float:left; } .one{ background-color: aqua; } .two{ background-color: yellow; } .three{ background-color: green; clear:left; } <div class="big"> <div class="sm one"></div> <div class="sm two"></div> <div class="sm three"></div> </div>
- both 若有左/右浮动则清除左/右浮动
7. 清除浮动常用方法
- 在浮动元素后使用一个空元素
<div style="clear:both"></div>
把浮动撑起来 - 给浮动元素父容器添加
overflow:hidden;
- 使用
:afrer
伪元素(也是给浮动元素父容器).clearfix:after{ content:""; display: block; height: 0; visibility: hidden; clear: both; } .clearfix{zoom:1}
- zoom兼容IE
- 给父元素设定height,只适用于高度固定布局
- 父元素也一起浮动,会有新问题,不推荐
8. position
- static(常规定位 常规流)
- 会忽略top bottom left right(不是margin) z-index声明
- 上下两相邻都设置了外边距,则外边距为两者中最大的
- 有固定width和height的元素,左右外边距设为auto,则会水平居中
- relative(不脱离常规流)
- 可以用top bottom left right z-index 进行相对定位(相对于自己在static常规流中的位置)
- 任何元素都可以设置为relative,其后代相对于他进行绝对定位absolute
- 使浮动元素发生偏移
.big{ width:300px; height:300px; border:2px solid black; top:30px; position: relative; float:left; } <div class="big"></div>
- 可以使用z-index
- absolute(脱离常规流)
- 宽高百分比 相对于 最近的relative祖先元素
- lrtb均为0且没有设置width和height时 将填充relative父元素
.parent{position:relative} .child{ position:absolute; top:0; bottom:0; left:0; right:0; }
- lrtb均为0且设置了width和height时 将居中
.parent{ position: relative; width:200px; height:200px; background: blue; } .child{ position: absolute; width:40px; height:40px; background: black; left:0; right:0; top:0; bottom:0; margin:auto auto; } <div class="parent"> <div class="child"></div> </div>
- lrtb为auto时 没有变化
- 没有relative的祖先元素,会相对于body操作
- fixed
- 继承absolute特点
- 随着滚动而滚动,视窗位置不变
- sticky(想象有个定位矩形 捕获块后 块变成固定定位)
.logo{ background: blue; border: 1px solid red; width:100%; height:50px; } .nav{ width:100%; height:50px; top:0; background: aqua; position: sticky; border: 1px solid green; } <div class="logo">logo</div> <div class="content"> <div class="nav">nav</div> <p style="font-size:30px">一大段文字</p> </div>
- 没有relative则参照body - 如果最近的relative元素有滚动(块移出视窗)则偏移标尺是最近的祖先元素;若祖先元素没有滚动 则偏移标尺是视窗 - top一定要有 top值为几就相对偏移多少