文章目录
所谓css
CSS,是web的样式,主要用于修饰美化网页外观，放在网页的头部
语法如下：
选择器1,选择器2 {
属性： 值;
}
例子
<head>
<style type="text/css">
p {
font-size: 14px;
font-family: "微软雅黑";
font-weight: 700;
font-style: normal;
color: black;
}
等价于
p {
font: initial bold 14px "微软雅黑";
}
综合设置字体样式 格式固定，不能调换顺序且font-size,font-family必须要写，其他可以省略
选择器 {
  font: font-style font-weight font-size/height font-family;
}
选择器的语法及分类
选择器 想要将CSS样式应用于特定的HTML元素部分称之为选择器(选择符).
标签选择器 标签/元素名{属性1： 属性值1;属性2： 属性值2;}
类选择器 .类名{属性1： 属性值1;属性2: 属性值2;}
标签调用时class=类名
id选择器 #Id{属性1： 属性值1;属性2: 属性值2;}
标签调用时id=Id
id选择器只能被调用一次，而类选择器可以重复调用
伪类选择器 (链接伪类选择器，结果伪类选择器，目标伪类选择器)
链接伪类选择器,用于向某些选择器添加特殊的效果。主要用于<a>标签.(顺序不能乱调)
| 动作 | 说明 |
|---|---|
| E:link | 未访问的链接 |
| E:visited | 已访问的链接 |
| E:hover | 鼠标移动到链接上 |
| E:active | 选定的链接 |
链接伪类选择器简写
a {font-size: 18px;
color: gray;
}
a:hover{
color: red;
}
结构伪类选择器（用于<li>等列表标签)
| 用法 | 描述 |
|---|---|
| E:first-child | 选取首个子元素 |
| E:last-child | 选取最后一个子元素 |
| E:nth-child(n) | 匹配第n个选择器,n可为even或2n+1(奇数),odd或2n(偶数)等等 */ |
| E:nth-last-child(n) | 倒序的nth-child |
例子：
li:nth-child(3n){
font-size: 16px;
color: gray;
}
...
<ul>
<li>...</li>
<li>...</li>
</ul>
目标伪类选择器
| 用法 | 描述 |
|---|---|
| :target | 选取当前活动的目标元素 |
复合选择器 属性选择器 标签名[属性]{ ... } 属性值 | 描述 :-:|:-: E[attr] | 存在attr属性 E[attr=val] | 属性值等于val E[attr*=val] | 属性值含有val E[attr^=val] | 属性值以val开头 E[attr$=val] |属性值以val结束
伪元素选择器 相当于行内元素标签，
E::first-letter 文本第一个单词或字
E::first-line 文本第一行;
E::selection 鼠标筛选的文本样式
E::before content:“xxx” 元素前面或后面插入
E::afoter
文本属性
| 属性 | 属性名称 | 单位 | 说明 |
|---|---|---|---|
| line-height | 行间距 | px | 大约比字体大7，8像素 |
| text-aline | 水平对齐方式 | left center right | 文本的对齐方式 |
| text-indent | 首行缩进 | em | 1em为一个汉子的宽度 |
| letter-spacing | 字间距 | px | 通常默认2px够了 |
| word-spacing | 单词间距 | px | 用于英文单词，中文无效 px |
| color:rgba(r,g,b,a) | 颜色及透明度 | a(alpha)，取值0~1之间 | |
| text-shadow:h v m c | 阴影 | hvmc分别对应水平位置(必写)，垂直位置(必写)，模糊距离，阴影颜色(可为颜色透明度) | |
| text-decorate | 划线 | none underline overline linethrough | 分别对应无、下划线、上划线、删除线 |
样式表
外部样式表
<link rel="stylesheet" type="text/css" href="css文件">
文本溢出换行处理
work-break: normol|break-all|keep-all; /* 专门处理英文 */
| 属性 | 说明 |
|---|---|
| normol | 默认换行显示 |
| break-all | 允许单词拆开换行显示 |
| keep-all | 不允许…显示,连字符’-'特俗 |
white-space: normal|nowrap ; /*强制一行显示 */
| 属性 | 说明 |
|---|---|
| normal | 默认显示 |
| nowrap | 强制一行内显示，知道结束或遇到br标签 |
text-overflow:clip|ellipsis| /* 文字溢出处理 */
| 属性 | 说明 |
|---|---|
| clip | 不显示省略标志 |
| ellipsis | 溢出时显示省略标志 |
注意：必需基于强制一行内显示,并再与overflow搭配使用
行块元素区别
块级元素特点：
- 总是从新行开始
- 高度，行高、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素.
块级元素标签：div、h1、ul、ol、li…
行内元素特点：
- 和相邻内元素在一行上
- 高度，宽度无效，但可以用padding、margin设置水平方向，垂直方向无效
- 宽度默认为内容本身的宽度
- 行内元素只能容纳文本或其他行内元素
行内元素标签如：span、a、b、strong…
行内块元素特点： img、input、td…
1.和相邻内元素在一行上，但会有空白缝隙
2.宽度默认为内容本身
3.高度，行高，外内边距都可以控制
display: inline-block;同一行显示块级元素
转换
display: inline； 块状行
display: block; 行转块
css背景background
| 属性 | 说明 |
|---|---|
| background-color | 背景颜色 |
| background-repeat: repeat-x/repeat-y/no-repeat | 平铺，沿着x/y轴平铺或是不平铺 |
| background-position: left top; | 设置背景图片位置，默认左上角,没有顺序,bottom top left right center |
| background-position: 10px 20px; | 图片位置坐标(10px,20px) |
| background-attachment: scroll | fixed; |
| background: color url repeat scroll position | 简写，对应颜色 地址 平铺 滚动 位置，位置不固定 |
| background: rgba(r,g,b,a); | 背景透明 |
| background-size: width height; | 设置背景图片大小,属性；cover:自动调整比使得图片始终填充满背景区域;contain:图片完全显示在背景区域 |
| background:图片一,图片二; | 多背景图片，若位置重叠,前面的会覆盖后面之上的 |
放置图片块级后文字的位置处理方法：
vertical-align: baseline | top |middle|bottom
文字分别为：基线对齐，顶部，中央，图片底部
css三大特性
css三大特性：层叠性,继承性,优先级
层叠性
1,若样式冲突，执行最后的那个样式
2，不冲突部分不重叠
继承性
1.子标签会继承父标签的某些样式 如：text-,font-,line-开头以及color
优先级特殊性
计算公式 0,0,0,0 左边权重最大，向右逐渐减少
| 对应贡献值 | 权值 |
|---|---|
| 继承或*的贡献值 | 0,0,0,0 |
| 每个元素标签贡献值 | 0,0,0,1 |
| 每个类,伪类贡献值 | 0,0,1,0 |
| 每个id贡献值 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | ∞ |
css三大模块
盒子模块、浮动、定位
border 盒子模块
边框
| 语法 | 描述 |
|---|---|
| border-width: | 边框宽度 |
| border-color: | 边框颜色 |
| border-style: none solid dashed dottted double | 边框样式 无 单行线 虚线 点线 双实线 |
| boder: width style color; | 简写 |
| border-collapse:collapse; | 表格边框合并 |
| boder-radius: | 圆角边框 |
轮廓线 :包裹边框的线
| 用法 | 说明 |
|---|---|
| outline: 0 | none; |
| outline: 2px solid red; | 2像素的红线 |
内边距:边框与内容的距离
padding一般顺序 上 右 下 左 顺时针写
| 属性: | 值 | 对应的位置 |
|---|---|---|
| padding: | 一个值 | 上 右 下 左 都为xx |
| padding: | 两个值 | 上下 左右 |
| padding: | 三个值 | 上 左右 下 |
| padding: | 四个值 | 上 右 下 左 |
除此之外，还有单个设置的属性：padding-left、padding-right、padding-top、padding-bottom
外边距:margin，用法与内边距基本类似，省略大部分。。。
盒子居中的使用方法
margin: height auto;
注意：容易引发外边距合并（塌陷）问题
解决方法
- 为父元素定义1像素边框
- 为父元素添加overflow: hidden;
float 浮动
float: left|right|none; 浮动
清除浮动内部高度为0的影响
clear: left|right|both;
父级添加 overflow: hidden|auto|scroll; 触发BFC,但不会自动换行，可能导致内容溢出
伪元素法清除
.clearfix:after {
content: "xx";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
ie6,7的特殊方法
.clear {
*zoom: 1;
}
position 定位
position: 属性；
| 属性 | 描述 |
|---|---|
| static | 自动定位（默认方式） |
| relative | 相对定位，相对于原文档流的位置进行定位 |
| absolute | 绝对定位，相对于器上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
静态定位： 对于边偏移无效，一般用于清除定位。
相对定位：以自己原本的位置进行相对移动，且对原有的位置继续占有（通常子绝父相方法组合）
绝对定位：如果父元素没有定位，将以浏览器为基准进行偏移，否则以父元素为基准进行偏移，元素转为行内块模式
固定定位：定位元素与父元素无关系，跟随浏览器，且完全脱标，不占有位置，不随滚动条滚动，元素转为行内块模式
绝对定位的盒子的水平/垂直居中步骤：
- 向左移动父盒子大小的一半值
- 向左和上移动负的自己外边外边距的一半值.即：
position: absolute;
left: 50%;
margin-left: -**px;
margin-top: -**px;
叠放次序 默认属性为0，且不能加单位，只有绝对、相对、固定定位有次属性
z-index: num; /num的数字越大，元素位置越上/
定位总结
| 模式 | 是否脱标 | 是否可以使用偏移 | 移动基准 |
|---|---|---|---|
| static | 不脱标 | 不可以 | 正常模式（默认） |
| relative | 不脱标 | 可以 | 以自身默认位置为准 |
| absolute | 脱标 | 可以 | 父级或浏览器 |
| fix | 脱标 | 可以 | 浏览器 |
元素的显示和隐藏
display、visibility、overflow
dispaly
| 用法 | 描述 |
|---|---|
| display: none; | 隐藏且不保留原来位置*/隐藏且不保留原来位置 |
| display: block; | 转为块级元素且显示*/转为块级元素且显示 |
visible
| 用法 | 描述 |
|---|---|
| visibility:visible | 可视 |
| visibility:hidden | 隐藏 |
overflow
overflow: visible|auto|hidden|scroll;检索或设置当前对象内容超过指定高度时如何管理
| 属性 | 描述 |
|---|---|
| visible | 不处理，任由超出 |
| auto | 超出就加滚动条 |
| hidden | 隐藏超出部分(常用) |
| scroll | 不管内容是否超出都加滚动条 |
鼠标样式
cursor: default|pointer|text|move ;
| 属性 | 描述 |
|---|---|
| default | 默认 |
| pointer | 小手 |
| text | 文本 |
| move | 移动(十字箭头) |
文本域拖拽，一般用于取消：
resize: none;
行内元素居中 默认基线（底部的线）对齐：
vertical-align: top|middle|bottom; /* 常用语图片、表单和文字对齐，常用top取消底部图片基线缝隙*/
背景图片访问处理
css sprite 处理背景图片，统一为使用一张以至减少访问服务器的次数
字体图标 如果sprite处理少量图片时，可以使用将图片转化为字体显示，减少访问次数
过渡动画效果
transition: transition-property transition-duration transition-timing-function transition-delay
| 属性 | 描述 |
|---|---|
| transition-property | 需要过渡的属性如width,height,background,all等等 |
| transition-duration | 过渡需要花费的时间，单位s要写上去 |
| transition-timing-function | 过渡效果,ease(默认),ease-in,ease-out |
| transition-delay | 过渡开始的时间，默认0 |
例子
div {
width： 100px;
height: 100px;
background-color: skyblue;
transition: width 0.3s ease 0s; /* 或transition: all 0.3s; */
}
div:hover {
width： 200;
height: 200px;
}
transform 移动，一般搭配过渡使用，且写在动作之后
语法
transform： translate(x,y); /* translateX(x)或translateY(y)*/
如果移动距离是 % ,将是以自己盒子的宽度为标准，而不是父盒子。
所以用于居中时语法可为
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
| 用法 | 说明 |
|---|---|
| transform: scale(x,y); | 沿着xy轴的缩小或放大，如果一个参数则等比例… |
| transform: rotate(deg); | deg为度数的单位，需要旋转的度数*/ |
| transform-origin: center center; | 设置routate旋转时围绕的中心点，可以精确为像素,center为默认 |
| transform: skew(xdeg,ydeg); | 使元素向左右或上下倾斜 |
6665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
