层叠样式表(cascading style sheet)
层叠是指==将多个样式施加在一个元素(标签)上==
作用:
好处:
1、在HTML标签的style属性书写,这个属性的值,是由一些小的键值对构成
<div style="color:red; font-size:100px;">12345</div>
2、在页面head标签中添加style标签
<style> div { color:yellow; font-size:500px; }</style>
3、在head标签中添加link标签引入css文件
<link rel="stylesheet" href="css文件地址" />
对页面进行布局(div + css)
默认情况,如果我们设置内补丁,会影响到整个盒子的大小,那我们需要设置一个属性box-sizing: border-box
会打破默认的流式布局,一般建议,如果一个元素进行了浮动,其余的和该元素同级别的也进行浮动。
支持百分比或者像素
可以帮助我们快速定位到某一个或者某几个标签的,就称为选择器
格式:
选择器 { 小键值对; ... ... }
标签名{ 样式属性 key:value;}
#ID{ 样式属性 key:value;}
.类名{ 样式属性 key:value;}
优先级:id选择器 > 类选择器 > 元素选择器
选择器,选择器,选择器{ 样式属性 key:value;}
父标签 后代标签 { 样式属性 key:value;}
父标签>子标签 { 样式属性 key:value;}
/*同等级的,标签1后方的*/标签1~标签2{ 样式属性 key:value; }
/*同等级的,标签1后方的第一个标签*/标签1+标签2{ 样式属性 key:value;}
标签:link{ 标签未被访问前的样式属性 key:value;}标签:hover{ 鼠标悬停的标签样式属性 key:value;}标签:visited{ 标签已被访问后的样式属性 key:value;}标签:active{ 鼠标点击标签未释放的样式属性 key:value;}标签:last-child{ 最后一个该标签的子标签样式属性 key:value;}标签:first-child{ 第一个该标签的子标签样式属性 key:value;}标签:nth-child(n){ 该标签的父标签的第n个该类子标签的样式属性 key:value;}
标签[key='value']{ 样式属性 key:value; }标签[key*='a']{ 属性key的值包含a的标签的样式属性 key:value; }标签[key^='a']{ 属性key的值以a开头的标签的样式属性 key:value; }标签[key$='a']{ 属性key的值以a结尾的标签的样式属性 key:value; }标签[key~='hello']{ 属性key的值包含单词hello的标签的样式属性 key:value; }
/*从其当前位置移动元素*/transform: translate(横向, 纵向);/*旋转一定的角度*/transform:rotate(角度deg);/*增大或减小元素大小*/transform:scale(宽度增大倍数,高度增大倍数);
/*元素绕其 X 轴旋转给定角度*/transform: rotateX(角度deg);/*元素绕其 Y 轴旋转给定角度*/transform: rotateY(角度deg);/*元素绕其 Z 轴旋转给定角度*/transform: rotateZ(角度deg);
@keyframes 动画名{ from{开始样式} to{结束样式}}div{ animation:动画名 时间;}
原文出处:CSS样式