标签(空格分隔): css
元素1 元素2 { 样式声明 }
空格隔开
儿子 孙子 重孙子···
div a{}
选择div的后代所有的a
<div class="nav">
<a href="#">儿子</a>
<p><a href="#">孙子</a></p>
</div>
元素1>元素2 { 样式声明 }
>大于号隔开
亲儿子选择器
div a{}
最终选择a 不会选择p下的a
<div class="nav">
<a href="#">儿子</a>
<p><a href="#">孙子</a></p>
</div>
元素1,元素2 { 样式声明 }
,逗号隔开
多个选择器
任何形式的选择器都可以作为并集选择器的一部分
div,
p {
color: pink;
}
div与p被选中
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
:
给选择器添加特殊效果
:冒号
按LVHA顺序,确保生效
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接(鼠标按下未弹起时)
用于选取获取焦点的表单元素
焦点就是光标 一般才能获取,该选择器主要针对表单元素来说
input:focus{
background-color:yellow;
}
HTML元素一般分为块元素与行内元素
注意
一个模式需要另一种模式的特性
比如想要增加链接<a>的触发范围
###背景颜色
background-color : transparent | 颜色值;
一般情况下元素背景颜色默认值是transparent(透明)
background-image : none | url(url)
常用于logo或装饰性小图片或超大的背景图片
优点是便于控制位置
background-repeat : repeat | no-repeat | repeat-x | repeat-y
对背景图像进行平铺
background-size
图片大小 宽
background-position : x y
控制图片位置 xy可使用方位名词(center bottom left right)或精确单位
1.方位名词 xy与yx等价
只写一个另一个默认为居中(水平|垂直)
2.精确单位x y有严格的顺序
只写一个一定为x 另一个y默认居中(垂直)
3.混合使用 xy顺序严格
background-attachment : scroll | fixed
控制背景图滚动|固定
CCS三大特性:层叠 继承 优先级
| 选择器 | 权重 |
| - | -: |
| 继承 或* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择权,伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important 重要的 | 无穷大 |
border可以设置元素的边框
边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色
border : border-width | border-style | border-color
边框简写:border : 1px solid red;
没有顺序
border-collapse : collapse
相邻边框合并
设置内边距 即边框与内容之间的距离
简写属性
| 值的个数 | 表达意思 |
| - | - |
| padding: 5px ; | 1个值,代表上下左右都有5像素的内边距 |
| padding: 5px 10px ; | 2个值,代表上下内边距是5像素 左右内边距是10px |
| padding: 5px 10px 20px ; | 3个值,代表上内边距5像素 左右内边距10像素 下内边距20像素 |
| padding: 5px 10px 20px 30px ; | 4个值,上是5像素 右10像素 下20像素 左30像素 顺时针 |
padding也会影响盒子实际大小
需要width/height减去边框宽度
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
用于设置外边距 控制盒子与盒子之间的距离
简写与padding格式相同
margin-left:auto;margin-right:auto; | margin:auto; | margin: 0 auto;
text-align:center
即可当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top。则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象称为相邻块元素垂直外边距的合并
对于两个嵌套关系(父子关系)的块元素,父元素上有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。转换为块级和行内块元素就可以了
border-radius : length;
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
border-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
| - | - |
| h-shadow | 必需。水平阴影的位置,允许负值 |
| v-shadow | 必需。垂直阴影的位置,允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 |
| inset | 可选。将外部阴影(outset)改为内部阴影 |
border-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
| - | - |
| h-shadow | 必需。水平阴影的位置,允许负值 |
| v-shadow | 必需。垂直阴影的位置,允许负值 |
| blur | 可选。模糊距离 |
| color | 可选。阴影的颜色 |
网页布局的本质————用CSS来摆放盒子。把盒子摆放到相应位置CSS提供了三种传统布局方式
多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
普通流(标准流/文档流)
浮动(float)
定位
- 有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。浮动可以改变元素标签默认的排列方式
- 可以让多个块级元素一行内排列显示
- float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
为了约束浮动元素位置,一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。符合网页布局第一准则
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子
选择器{clear:属性值;}
| 属性值 | 描述 |
| - | - |
| left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
| right | 不允许右侧有浮元素(清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
<div style="clear:both"></div>
或者其他标签(如<br/>等).clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7专有 */
*zoom: 1;
}
.test .a {
float: left;
width: 300px;
height: 300px;
background-color: red;
}
.test .b {
float: left;
width: 200px;
height: 200px;
background-color: green;
}
.test .c {
/* width: 300px; */
height: 300px;
background-color: blue;
}
//用after不会使c不在a,b下方
- 优点:没有增加标签,结构更简单
- 缺点:照顾低版本浏览器
父级添加双伪元素
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1
}
可以让盒子在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子
将盒子定在某个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式
| 值 | 语义 |
| - | - |
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移
| 边偏移属性 | 示例 | 描述 |
| - | - | - |
| top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
静态定位是元素的默认定位方式,无定位的意思
语法:选择器 {position:static;}
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)
语法:选择器 {position:relative;}
特点
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)
语法:选择器 {position:absolute;}
特点
top:50%;margin-top:自身(宽或高)一半
子级使用绝对定位,父级需要相对定位
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
语法:选择器 {position:fixed;}
特点
固定定位小技巧:固定在版心右侧
粘性定位可以被认为是相对定位和固定定位的混合
语法:选择器 {position:sticky;top:10px;}
特点
定位模式 | 是否脱标 | 移动位置 | 是否常用 |
---|---|---|---|
static静态定位 | 否 | 不能使用边偏移 | 很少 |
relative相对定位 | 否(占有位置) | 相对于自身位置移动 | 常用 |
absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
在使用定位布局时,可能出现盒子重叠的情况,此时可使用z-index来控制盒子的前后次序(z轴)
语法:选择器 {z-index:1;}
display显示隐藏
visibility显示隐藏 可视性
overflow溢出显示隐藏 溢出
| 属性值 | 描述 |
| - | - |
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
| scroll | 不管超出内容否,总是显示滚动条 |
| auto | 超出自动显示滚动条,不超出不显示滚动条 |
为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度 出现了CSS精灵技术
核心原理:将网页中一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了
缺点:图片文件较大、图片本身放大缩小会失真 图片制作完成更换复杂
主要用于显示网页中通用、常用的一些小图标
展示的是图标,本质属于字体优点
轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了。图标就会马上渲染出来,减少了服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有浏览器,请放心使用
字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化
icomoon字库阿里iconfont字库
定义一个盒子 宽高为0 边框设置
border:10px solid transparent; boder-top-color:red
强化
width:0;
heiht:0;
border-color:transparent red transparent transparent;
border-style:solid;
border-width:22px 8px 0 0;
li{cursor:pointer;}
| 属性值 | 描述 |
| - | - |
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
用于设置一个元素的垂直对齐方式,只针对行内元素或行内块元素
vertical-align :baseline | top | middle | bottom
值 | 描述 |
---|---|
baseline | 默认,元素放置在父元素的基线上 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
middle | 把元素放置在父元素的中部 |
bottom | 把元素顶端与行中最低元素的顶端对齐 |
vertical-align:middle|top|bottom
提倡使用display:block;
单行文本溢出显示省略号--必须满足三个条件
white-space:nowrap;(默认 normal自动换行)
overflow:hidden;
text-overflow:ellipsis;
多行文本溢出显示省略号
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient:vertical;
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化
CSS初始化是指重设浏览器的样式(也称CSS reset)
每个网页都必须首先进行CSS初始化
box-sizing
filter: 函数(); 如 filter:blur(5px);
blur模糊处理 数值越大越模糊
` width:calc(100%-80px);
transtion:要过渡的属性 花费时间 运动曲线 何时开始;
transform-origin:x y;
动画(animation)可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果
相比较过渡 动画可以实现更多变化 更多控制,连续自动播放等效果
用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
transform: translateX(0);
}
100%{
transform: translateX(1024px);
}
}
元素使用动画
div {
width: 200px;
height: 200px;
background-color: #234;
animation-name: 动画名称;
animation-duration: 持续时间;
}
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画的名称(必须) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是0(必须) |
animation-timing-function | 规定动画的速度曲线,默认是"ease" |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1 还有infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认是"normal","alternate"逆播放 |
animation-play-state | 规定动画是否正在运行或暂停,默认是"running"还有"paused" |
animation-fill-mode | 规定动画结束后状态,保持forwards回到起始backwards |
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的,匀速 |
ease | 默认,动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长) |