文章目录
所谓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); | 使元素向左右或上下倾斜 |