目录
1. CSS基础
1.1 引入CSS样式表
行内式(内联样式)
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
内部样式表(内嵌样式表)
<style>
div {
color: red;
font-size: 12px;
}
</style>
外部样式表(外链式)
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
2.选择器
标签选择器
h1{
color: red;
}
类选择器
.xx {
height: 100px;
clear: both;
background-color: bisque;
}
类选择器 多类名
.xx w{
height: 100px;
clear: both;
background-color: bisque;
}
id选择器
#xx {
margin: 0;
padding: 0;
}
3.css 字体样式
font-size属性用于设置字号
ont-family属性用于设置哪一种字体
ont-weight:字体粗细 400 等同于 normal,而 700 等同于 bold
font-style:字体风格
text-align:文本水平对齐方式
line-height:行间距
text-indent:首行缩进
text-decoration 文本的装饰
值 | text-decoration描述 |
---|---|
none | 默认。定义标准的文本。 取消下划线(最常用) |
underline | 定义文本下的一条线。下划线 也是我们链接自带的(常用) |
overline | 定义文本上的一条线。(不用) |
line-through | 定义穿过文本下的一条线。(不常用) |
4.复合选择器:
4.1 后代选择器
特点:空格隔开,只要是后代就行,包括孙子
.demo h3{ font-size:22px} 代表选中的是demo类中 H3 元素
4.2 子元素选择器
特点:只能是孩子,最近一级的元素,使用>符号。
.class>H3 {font-size:22px}
4.3 并集选择器
可以选择多组标签,同时为它们设置样式,使用逗号,
可以为任意形式的语法
.class,H3,.pig li {font-size:22px}
4.4 链接伪类选择器
按照LVHA的顺序编写。
.class:hover{font-size:22px}
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接,鼠标按下未弹起 */
a:link{
color:#333;
}
4.5 focus 伪类选择器
焦点选择器,有光标的
获取光标就变色;
input:focus{
color:#ddd
}
5.元素显示模式
以何种方式进行显示。如块元素和行元素。
块元素占用一行。是一种容器。
行元素可以放多个元素。a元素里可以放块元素。
- 块级元素:block;独占一行
- 行内元素:inline ;相邻行内元素在一行上,一行可以显示多个,不可以直接设置宽度高度
- 行内块元素 inline-block
5.1模式转换:
display:
:inline
:block
:inline-block
6. 结构性伪类选择器
css3.0 新增的伪类选择器
<div>ttt</div>
<div>ttt</div>
<div>ttt</div>
<div>ttt</div>
/* 配置整个html标签*/
:root{
background-color: skyblue;
}
/*
first-child:第一个节点的元素
last-child最后一个节点的元素
nth-child(n),父元素的第n个元素.默认从1开始
nth-last_child(n)父元素的倒数第n个元素
only-child:该父元素的唯一子节点
first-of-type:同类型第一个元素
last-of-type :同类型最后一个元素
nth-child(n):n从0开始, even 偶数 odd 奇数
*/
div:nth-child(3){
background-color: #eb72a9;
}
7. 添加阴影
color:颜色
xoffset:横向上的偏移
yoffset:纵向上的偏移
radius:阴影的模糊半径,半径越大,阴影越模糊
8.CSS背景
css 背景
backgroud-color:默认透明
背景图片:
backgroud-image:url(path) path不加引号
图片显示样式
平铺:backgroud-repeat:
none
repeat 默认平铺
repeat-x
repeat-y
具体位置:backgroud-position: x y
背景附着:
backgroud-attachment:fixed/scroll
背景简写:
backgroud:transparent no-repeat url(path)
背景半透明:
backgroud:rgba(0,0,0,0.3)
9.三大特性:
- 层叠性
冲突的特点,使用最后声明的 - 继承性
内部元素可以继承外部元素的特性 - 优先性
继承
!important 最重要 样式属性后面添加 - 权重叠加
div ul li —> 0,0,0,3 权重值相加
10.盒子模型
盒子边框、盒子内边距、外边距
盒子边框(border)
border-width
border-style: dotted: 点状轮廓。 dashed: 虚线轮廓。 solid: 实线轮廓
border-color
内盒尺寸计算(元素实际大小)
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
外边距合并
- 相邻块元素垂直外边距的合并,会取最大值
- 嵌套块元素垂直外边距的合并(塌陷)会取最大值
盒子模型布局稳定性
根据稳定性来分,建议如下:
按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)
圆角边框
border-radius: 50%;
盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
11.浮动float
CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:
11.1什么是浮动
float:left/right
浮动脱离了普通流,让块级元素一行显示。
- 浮:脱离标准流
- 漏:把自己原来的位置漏给下面标准流的盒子,就是不占有原来位置
- 特:浮动——特性 float属性会改变元素display属性
overflow
当内容溢出元素时,如何显示
visible:默认值,显示到边框外
hidden:超出部分不可见
scroll:可以滑动查看
auto:类似scroll
11.2 清除浮动
父亲没有高度,所以高度为0,底部布局回向上挤压。
解决:
1.给父亲添加overflow元素,hidden auto
2.父级添加after元素
3.双伪元素
4.额外标签法:在父亲内部最后的位置添加一个块级元素
.clearPos{
cleart:both;
}
<div class=".clearPos"></div>
12.定位Position
- static 静态定位 默认
- absolute 绝对定位 如果父级有定位,以父级为准,如果没有,以屏幕左上角为准,不保留原来位置。
- relative 相对定位 相对于原来位置进行偏移 top right ,原来的位置还在
- fixed 固定定位 跟父级没有关系,不会跟随
定位在最上面 浮动在中间层 普通流在最底层
12.1 绝对定位的盒子水平居中对齐
left:50%
margin-left:-100px 自身宽度的一半
12.2 堆叠顺序
z-index : 1 数值越大,在顶层
只能运用于相对、绝对、固定定位里
13.css 精灵图
为了提高浏览器的响应速度(减少服务器接收和发送图片的次数),出现了精灵图。针对背景图片使用,把多个小背景组合成大背景。
精灵图:一张大图包含很多小图元素,通过坐标定位的方式显示里面的小图片。
字体图标:本质是文字,可以改变颜色,产生阴影,透明效果,旋转
下载:http://icomoon.io
阿里iconfont字库:
css 三角形
div{
width:0;
height:0;
border:10px solide white;
}
14、元素显示隐藏
14.1.display 显示
display: none 隐藏对象 隐藏之后,不再保留位置
display:block 除了转换为块级元素之外,同时还有显示元素的意思。
14.2 visibility 可见性
visibility:visible ; 对象可视
visibility:hidden; 对象隐藏;隐藏之后,继续保留原有位置
14.3 overflow 溢出(重点)
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 不管超出内容否,总是显示滚动条
auto 超出自动显示滚动条,不超出不显示滚动条
15.用户界面样式
15.1鼠标样式cursor
default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
15.2outline轮廓线
outline :
outline-color 规定边框的颜色。
outline-style 规定边框的样式。
outline-width 规定边框的宽度。
15.3防止拖拽文本域resize
<textarea style="resize: none;"></textarea>
15.4 vertical-align 垂直对齐
vertical-align : baseline |top |middle |bottom
baseline:中线
top:顶线
middle:中线
bottom:底线
15.5 去除图片空白缝隙
- 原因:
图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
解决: - 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐
- 给img 添加 display:block; 转换为块级元素就不会存在问题了。
15.6 溢出的文字省略号显示
white-space:normal ;默认处理方式
white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
text-overflow : clip ;不显示省略标记(...),而是简单的裁切
text-overflow:ellipsis ; 当对象内文本溢出时显示省略标记(...)