2/28
1.文本标签和容器标签
文本标签:p a span b s del sub sup u i em
含义:放文本,图片
容器标签:div h1-h6 ul li ol dl dt dd header nav section article aside footer
含义:放任何东西
1.单位 px
2.字体
font-size:20px;
line-height:20px;
font-family: 幼圆,黑体;
英文字体在前中文字体在后
font-style: italic;
font-weight: bold;// 400 700
行高和容器等高,字体默认垂直居中
font: 加粗 字号/行高 字体;
例如:font:400 14px/24px '微软雅黑';
3.vertical-align: middle;
用户图文混排垂直居中
4.文本属性
text-decoration:none;去除下划线
text-decoration:underline;加下划线text-align:center;//水平居中
color:red; //颜色
5.列表属性ul li
list-style:none;
6.overflow属性
visible默认值
hidden 超出隐藏
auto 超出显示滚动条
7.鼠标的属性 cursor
cursor:pointer;//鼠标手
8.background 的常见背景属性
background-color:#fff99s;背景颜色
值:
red,bule,
#fffaaa;
rgb(255,0,0),
rgba(0, 0, 255, 0.3);
#000 黑
#fff 白
#f00 红
#222 深灰
#333 灰
#ccc 浅灰
background-image:url(1.png)背景图片
background-repeat:no-repeat;不要平铺
background-position:center top;图片从哪个位置加载 坐标
简写:
background:red url(1.jpg) no-repeat 100px 109px;
background-size:200px 200px;背景图尺寸
值:cover contain
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
background-image: linear-gradient(to right, yellow, green);
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
background-image: radial-gradient(100px at center,yellow ,green);
9.注释/*
具体的注释
*/
10.css引入方式
行内,内嵌,外部引入
11.基本选择器
标签选择器
所有的标签,都可以是选择器
id选择器
规定用`#`来定义
类选择器
规定用圆点`.`来定义
类上样式,id 上行为
通用选择器
*{
margin:0px;
padding:0px;
}
1.高级选择器
后代选择器
div div p {//只要有层级关系
color: red;
}
交集选择器
h3.special.zhongyao {
color: red;
}
并集选择器
p,
h1,
#mytitle,
.one {
color: red;
}
伪类选择器
子代选择器[用符号`>`表示] 父子关系
div > p {
color: red;
}
序选择器
ul li:first-child {//第一个li标签
color: red;
}
ul li:last-child {//最后一个li标签
color: blue;
}
下一个兄弟选择器
h3 + p {//h3标签后面的第一个p标签
color: red;
}
3/1
1.定位
脱标:浮动,绝对定位,固定定位
绝对定位
注意:原点在父容器的左上角或左下角
注意2:top 参照左上角 bottom左下角
首屏:刷新出来的第一个的效果图
注意3:子元素以含有定位的父元素为基点
注意4:子绝父相【常用】
子绝父相优点:父元素没脱标,更容易在页面中使用,子元素忽略父元素的padding,
相对定位:相对于自己原来的位置
注意:相对定位不脱标
position: relative;
left:50px;
top:50px;
作用:微调元素位置,子绝父相
固定定位
相对浏览器窗口进行定位
position: fixed;
z-index属性
注意:1.大的在上小的在下
2.默认是0没有单位
3.后面代码压前面代码,有定位压没定位
4.只有定位的元素z-index才生效
浮动元素不能用
5.父亲怂了儿子在牛也没用
居中总结:
a.margin:0 auto;//水平居中
b.子绝父相居中 left:50%;margin-left:100px;
伪类选择器
作用:根据其**不同的种状态,有不同的样式
a标签
:link 点击前样式
:visited 点击后样式
:hover 悬停样式
:active 激活样式
:focus input框获取焦点状态样式
2.继承性和层叠性
关于文字样式的属性,都具有继承性。这些属性包括:color、 text-开头的、line-开头的、font-开头的
关于盒子、定位、布局的属性,都不能继承。
层叠性:就是css处理冲突的能力
规则1:比较权重大小 id=100 class=10 p=1
规则2:权重相同 就近原则
规则3:class多个值,css后面覆盖前面
css属性!important>内联样式 > ID选择器(#id) > 类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等] > 元素选择器(p等) = 伪元素选择器(:after/:before/::selection等) > 通用选择器(*) > 继承的样式
注意:!imporant少用,最好不用;
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是绿色*/
a:visited{
color:orange;
}
/*鼠标悬停,放到标签上的时候*/
a:hover{
color:green;
}
/*鼠标点击链接,但是不松手的时候*/
a:active{
color:black;
}
盒子模型
width、height、padding、border、margin
padding也有背景色
padding:30px 20px 40px 100px; 上右下左
padding:30px 上右下左全部30px
padding:20px 30px; 上下20px 左右30px
padding:30px 20px 40px;上30 下40左右20px;
盒子真实占有宽高包括content padding border margin
border三要素:像素(粗细)、线型、颜色。
例如:border:2px solid red;
标准文档流
从上到下,从左到右
特征1:空白折行
特征2:高矮不齐,底边对齐
行元素,块元素,行内块元素
行内元素:
- 与其他行内元素并排;
- 不能设置宽、高。默认的宽度,就是文字的宽度。
块级元素:
- 霸占一行,不能与其他任何元素并列;
- 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。
行内块元素:
行元素可以设置宽和高
行:b span u a em i sub sup s del
块:p div h ul li dl dt dd ol
display: inline;块转行
display: block;行转块
display: inline-block;行块转行内块
脱离标准流
方法:浮动,绝对定位,固定定位
浮动性质1:脱标【脱离标准流】
浮动性质2:浮动的元素互相贴靠【类似于行内块】
浮动性质3:浮动的元素有“字围”效果
浮动性质4:收缩
零基础作业:浮动实现一个页面
浮动的清除
a.方法1:给浮动元素的祖先元素加高度[不常用]
祖先高度大于浮动元素高度
b.方法2:clear:both;
c.方法3:隔墙法[不常用]
d:方法4:内墙在浮动标签后面加清除浮动;
e.清除浮动方法5:overflow:hidden; 父元素高度是子元素撑开的高度
兼容性问题【了解】
第一条:IE6不支持小于12px的盒子
解决:_font-size: 0px; ie6专用
第二条:**IE6不支持用`overflow:hidden;`来清除浮动。
解决:_zoom:1;
3/2
(1)css注意点:
图片设置宽高/不用设置100%(特殊情况外)
文本设行高
logo正确写法:
Title
(2) 背景图片要写宽高
.logo a{
text-indent:-9999px;
display:block;
宽;
height:高;(宽,高为了覆盖整个页面)
(另外背景放在里层a标签里,放在外面会影响padding)
}
(3)清除页面默认bug内边距和外边距
个别or*(全部)
(4)全局版心定义:
.content{
font:#000 14px '微软雅黑';
width"1000px;
margin: 0 auto;
}
(5)父元素浮动是为了排列,子元素也是如此。
(6)背景图加点击效果都适用a标签转块元素覆盖背景图片。
3/3
优雅降级:一开始就构建站点的完整功能,然后正对浏览器测试和修复。比如css3构建应用。
渐进的增强:一开始正对低版本浏览器进行构建页面,完成基本功能,然后高版本用户体验好。
知识点:
1.css3选择器
div.box 交集选择器
div p 后代
div>p 子代
div+p div后第一个p
div~p div后全部p
e[attr~=val] 其中一个等于val元素
e[attr|= val] class = 'a b'
2.结构伪类 :hover :link :visited :active
e:nth-child(n)
:first-child
:last-child
:nth-child(even)
:nth-child(odd)
3.伪元素 ::before ::after
配合content使用
::before
就在当前标签内容前面添加内容
::after
就是在当前标签内容后面添加内容,
1.CSS3属性
文本阴影
text-shadow: 20px 27px 22px pink;
盒模型中的 box-sizing 属性
box-sizing: content-box;标准盒模型
实际宽度=内容宽+padding+border
box-sizing: border-box;ie盒模型
实际宽 = 设置的宽的
2.css3解决兼容性问题:私有前缀
3.边框
圆角border-radius: 60px; 或50%
边框阴影:box-shadow
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
box-shadow: 15px 21px 48px -2px #666;
inset 内阴影
边框图片
border-image: url("images/border.png") 27/20px round;
3/4
1.动画
过渡:transition
不同状态间的平滑过渡(补间动画)
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
注意:a.样式的变化前和变化后 b.触发
2.2D 转换
缩放--> transform: scale(2, 0.5); 水平放大2倍,垂直缩小50%
位移:translate--->
transform: translate(-50%, -50%); 左上位移
绝】对定位水平垂直居中【重要
旋转:rotate-->
transform: rotate(-405deg); 逆时针旋转405度
3.3D 转换
4.透视:perspective 模拟3d
5.3D呈现(transform-style)
transform-style: preserve-3d来使其变成一个真正的3D图形 6.动画animation ### 定义动画的步骤 (1)通过@keyframes定义动画; (2)将这段动画通过百分比,分割成多个节点;然后各节点中分别定义各属性; (3)在指定元素里,通过
animation` 属性调用动画。
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)