基本格式:
<!DOCTYPE html>
<html lang = "en">
<head>
<meat charset = "UTF-8">
<title></title>
//外部css
<link rel="stylesheet" type="text/css" href="路径">
//内部css
<style>
选择器 {
属性名称;属性对应值;
}
</style>
</head>
<body>
//行内css
<h1 style="color:red;">行内css</h1>
</body>
</html>
0x001:文字属性相关
文字样式
font-style:样式
文字粗细
font-weight:粗细
文字大小
font-size:大小
文字字体
font-family:字体,备选字体
合并简写:
font: 样式 粗细 大小 字体
0x002:文本属性相关
文本缩进
text-indent:缩进距离
文本对齐
text-align:对齐方向
文本居中
text-align: center
文本划线
text-decoration:划线
文本颜色
color:颜色
0x003:图片边框属性相关
边框宽度
border-width: 宽度px
边框样式
border-style: 样式
边框颜色
color: 颜色
边框圆角
border-radius:大小px
0x004:选择器相关
- 标签选择器
标签{ 属性:值; }
- ID选择器
#ID名称{ 属性:值; //配合id = "xxx"使用 }
- 类选择器
.类名{ 属性:值; //配合class = "xxx"使用 }
- 后代选择器
#ID名称 .类名1 .类名2··· { 属性:值; //同上 }
- 子元素选择器
div>标签>标签>··· { 属性:值; //">"是指地址 }
- 交集选择器
标签名.类名 { 属性:值; }
- 并集选择器
ID名称,.类名 { 属性:值; }
- 相邻兄弟选择器
标签1 + 标签2 { 属性:值; }
- 通用兄弟选择器
标签1 ~ 标签2 { 属性:值; }
0x005:序选择器相关
- 选中同级别中的第一个标签
标签:first-child { 属性:值; }
- 选中同级别中的最后个标签
标签:last-child { 属性:值; }
- 选中同级别中的第n个标签
标签:nth-child(n) { 属性:值; }
- 选中同级别中的倒数第n个标签
标签:nth-last-child(n) { 属性:值; }
- 选中父元素中唯一的元素
标签:only-child { 属性:值; }
- 选中父元素中唯一类型的某个标签
标签:conly-of-type { 属性:值; }
- 选中同级别中同类型的第一个标签
标签:first-of-type { 属性:值; }
- 选中同级别中同类型的最后一个标签
标签:last-of-type { 属性:值; }
- 选中同级别中同类型的第n个标签
标签:nth-of-type(n) { 属性:值; }
- 选中同级别中同类型的倒数第n个标签
标签:nth-last-of-type(n) { 属性:值; }
- 选中同级别中的所以奇数
标签:nth-child(odd) { 属性:值; }
- 选中同级别中的所以偶数
标签:nth-child(oven) { 属性:值; }
- 选中自定义的标签
标签:nth-child(xn+y) { 属性:值; }
0x006:属性选择器相关
- 根据指定属性找到对应的标签
标签[id] { 属性:值; }
- 根据class标签找到指定的属性
标签[class ="xxx"] { 标签:值; }
- 属性的值是以什么开头的
标签[alt ^="xxx"] { 属性:值; }
- 属性取值是以什么结尾的
标签[alt $="xxx"] { 属性:值; }
- 属性取值是否包含某个特定的值
标签[alt *="xxx"] { 属性:值; }
- 选中全文的标签设置属性
* {
属性:值;
}
0x007:优先级相关
- 提升直接选中标签的优先性
直接选中的标签 { 属性:值!important; }
- 直接选中标签的权重问题
- 优先级:
id> 类> 标签> 继承> 默认
- 计算优先级得权重
- 只有
font color text line
开头的属性才可以继承
- 优先级:
0x008:div和span标签
div标签 – 容器级标签(可以嵌套所有的标签)
- 作用:完成网页的基本布局
- 注意点:
div标签独占一行
- 格式:
<div class="xxx"> 标签属性 </div>
span标签 – 文本级标签(只能嵌套文字,图片和超链接)
- 作用:修改文本的局部信息
- 注意点:
span标签不会独占一行
- 格式:
<span>内容</span>
0x009:显示模式的转换
- 转换为块级元素
- 块级元素是在容器级标签的基础上多了p标签
- 注意点:块级元素独占一行,可以控制宽高
- 格式:
display:block;
- 转换为行内元素
- 行内级元素是在文本级标签的基础上少了p标签
- 注意点:行内元素不会独占一行,不能控制宽高
- 格式:
display:inline;
- 转换为块级行内元素
- 不独占一行,并且可以控制宽高
- 格式:
display:inline-block;
0x010:背景属性
- 设置背景颜色
background-color: 颜色;
- 设置背景图片
background-image: url(图片地址);
- 页面背景图片
body { background-image: url(图片地址); }
- 图片平铺属性
background-repeat: repeat-x; //x轴平铺 background-repeat: repeat-y; //y轴平铺 background-repeat: no-repeat; //不平铺
- 图片关联方式
background-attachment: fixed; //页面动图不动
- 背景图片定位
background-position: 方向 方向; 水平方向:left,center,right 垂直方向:top,center,bottom
- 背景属性缩写
background: 颜色 图片 平铺 关联 定位;
0x011:盒模型属性css
边框属性
- 格式:
border-top: 宽度 样式 颜色; //上边框 border-left: 宽度 样式 颜色; //左边框 border-right: 宽度 样式 颜色; //右边框 border-botom: 宽度 样式 颜色; //下边框 border: 宽度 样式 颜色; //四条边都相等 例:border: 1px solid #000; //虚线样式:dashed border-width: 上 右 下 左; border-style: 上 右 下 左; //一步设置四条边 border-color: 上 右 下 左;
- 格式:
内边距属性
padding-top: 宽度; padding-left: 宽度; padding-right: 宽度; padding-bottom: 宽度; padding: 上,右,下,左; //四条边的内边距宽度
外边距属性
margin-top: 宽度; margin-left: 宽度; margin-right: 宽度; margin-bottom: 宽度; margin: 上,右,下,左; //四条边的外边距宽度 margin: 上 auto; //auto:只可水平方向居中
盒子模型计算
内容宽高 = width或height 外边距:margin 内边距:padding 元素宽高 = 边框 + 内边距 + `内容高度`或`宽度` 边框:border 元素空间宽高 = 外边框 + 边框 + 内边距 + `内容高度`或`宽度`
盒子box-sizing属性
- 作用:
- 保证元素宽高不变的情况下,添加
padding和margin
属性时超过了元素宽高的值时,自动改变内容的宽高
- 保证元素宽高不变的情况下,添加
- 格式:
box-sizing: border-box;
- 作用:
水平居中
text-align: center; 和 margin: 0 auto; 的区别 text-align: center; -> 边框内部的内容居中 margin: 0 auto; -> 盒子边框整体居中
清空默认的外边距
//范围太广比较不实用
* {
padding: 0;
margin: 0;
}
//用于大项目的开发时
body, div, dl, dt, dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, tex tarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
- 边框内的行高
- 作用:
- 设置行高的高度等于边框的高度时,可以使单行文字在边框中垂直居中显示(只适用于一行文字),如果有多行文字则应使用
padding
来垂直居中
- 设置行高的高度等于边框的高度时,可以使单行文字在边框中垂直居中显示(只适用于一行文字),如果有多行文字则应使用
- 格式:
line-height: 高度;
- 作用:
0x012:浮动流
- 浮动流的基本概念
- 注意点:
- float中不能使用center居中,也不能使用margin: 0 auto进行距中
- 好处:
- 无论是块级元素/行内元素/块级行内元素
都可以进行水平排版
、都可以进行设置宽高
- 无论是块级元素/行内元素/块级行内元素
- 格式:
- 注意点:
float: left; //左对齐
float: right; //右对齐
浮动的排版规则
- 从外向内,从上向下;
- 在浮动流中,浮动的元素不能撑起父元素的高度。
清除浮动
- 注意点:
- 当使用clean后margin将会失效。
- 格式:
clean: both; //清除左右浮动
- 格式:
overflow: hidden;
- 作用:
- 可将超出标签范围的内容截剪掉;
- 如果在盒子里设置了margin-top,则可以让外面的盒子不会掉下来
- 注意点:
伪元素选择器
格式(div内容之前):
div::before { content: "内容"; //添加子元素内容 width: 宽度; //添加内容的宽度 height: 高度; //添加内容的高度 background-color: 背景颜色; display: block; //转换为块级元素 visibility: hidden; //隐藏添加的内容 }
格式(div内容之后):
div::after { content: "内容"; //添加子元素内容 width: 宽度; //添加内容的宽度 height: 高度; //添加内容的高度 background-color: 背景颜色; display: block; //转换为块级元素 visibility: hidden; //隐藏添加的内容 }
0x013:定位流
标准定位
注意点:
- 标准定位流不会脱离标准流的空间,只能在标准流内进行上右下左的移动
格式:
position: relative; top: 大小px; //相当于上外边距 right: 大小px; //相当于右外边距 bottom: 大小px; //相当于下外边距 left: 大小px; //相当于左外边距
绝对定位
注意点:
- 主要是祖先关系的定位流都可以实现绝对定位,那个定位流离它最近就在那里定位
格式:
position: absolute; top: 大小px; //相当于上外边距 right: 大小px; //相当于右外边距 bottom: 大小px; //相当于下外边距 left: 大小px; //相当于左外边距
子绝父相:
将子元素是绝对定位,将父元素是相对定位
水平居中:
left: 50%; margin-left: 元素宽度的一半;
a标签伪类选择器
//修改从来被访问过状态下的样式 选择器标签:link { color: 颜色; } //修改被访问过的状态下的样式 选择器标签:visited { color: 颜色; } //修改鼠标悬停状态下的样式 选择器标签:hover { color: 颜色; } //修改鼠标长按状态下的样式 选择器标签:aetive { color: 颜色; }
注意点:
- 如果四种同时出现,则必须按照爱恨原则排序
love hate
,如果需要修改访问过和未访问过的颜色一样时,则可以简写为:
a { color: 颜色; }
- 如果四种同时出现,则必须按照爱恨原则排序
0x014:过度模块
基本格式
transition-property: 变化的标签,变化的标签; transition-duration: 秒数,秒数; transition-delay: 延时时间s; 选择器标签:hover { //变化的宽度,高度,内外边距大小,颜色 例:margin: 100px; 例:width: 100px; 例:background-color: red; }
控制模块移动速度
格式:
选择器标签:nth-child(序数) 标签 { transition-timing-function: 速度; linear:匀速 ease:慢慢变慢 ease-in:由慢变快 ease-out:由快变慢 ease-in-out:由慢变快再变慢 }
合并连写
transition:过渡属性 过渡时长 运动速度 延时时间;
0x015:2D转换模式
- 2D图形旋转
transform: rotate(度数deg);
- 2D图形移动
transform: translate(水平px,垂直px);
- 2D图形缩放
transform: scale(水平,垂直);
- 形变中心点
transform: origin(xxx%,xxx%);
- 旋转轴向.默认是X
transform: rotate X/ Y/ Z(度数deg);
- 透视属性.近大远小
perspective: 大小px;
0x016:动画模块
- 动画三要素
animation-name: xxx; animation-duration: 时间; @keyframs xxx { from { 属性: 值; } to { 属性: 值; } }
- 动画延时
animation-delay: 延迟;
- 动画速度
animation-timing-function: 同上;
- 动画次数
animation-iteration-count: 次数;
- 动画往返
animation-direction: alternate;
- 悬停暂停
animation-play-start: paused;
- 连写格式
animation: 动画名字 动画时长 运动速度 延时时间 执行次数 是否往返;
文章作者:Torres-圣君
文章链接:http://www.cjlblog.vip/posts/f8a3898b.html
版权声明:本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Torres-圣君