牢固下CSS，CSS太庞大~
css是什么
SS 指层叠样式表 (Cascading Style Sheets)
样式界说如何显示 HTML 元素
样式凡是存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表示疏散的问题
外部样式表可以极大提高事情效率
外部样式表凡是存储在 CSS 文件中
多个样式界说可层叠为一个
语法
CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:
选择器
id 用#， class用. 选择器
创建
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
优先级 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
css配景background
可以简写
background-color 颜色值
background-image url
background-repeat 共同image 默认无 repeat-x 程度标的目的平铺，-y是垂直标的目的平铺， no-repeat不服铺
background-attachment 配景图像是否固定或者跟着页面的其余部分滚动。默认scoll滚动 fixed不滚动
background-position 9个位置，或百分比
css文本
h1 p
color颜色 还需要界说配景色
text-align 对齐 3个对齐左中右+justify：实现两端对齐文本效果
text-decoration 修饰下划线效果 none; 删除下划线
text-indent 缩进
text-transform 文本转换 uppercase大写 lowercase小写 capitalize首字符大写
css字体
px像素 16px
em 1em=16px 转换公式em=px/16
css链接
a:link - 正常，未访谒过的链接
a:visited - 用户已访谒过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
css列表
list-style-type
css表格
bolder 表格边框
border-collapse 折叠边框collapse属性设置表格的边框是否被折叠成一个单一的边框或离隔：
宽度和高度 文字对齐 表格填充 padding 表格颜色
css盒子模型
margin 外边距 border 边框 padding 内边距 content 内容
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
考虑浏览器兼容问题
css边框
border 简写
border-width 边框宽度
border-sytle:none 默认无边框 soild 实线边框 border-位置-style 单独边样式
border-color 边框颜色
css四边简写挨次
属性1，属性2，属性3，属性4 上->右->下->左
属性1，属性2，属性3
上->摆布->下
属性1，属性2
上下->摆布
属性1
上下摆布属性不异
css轮廓
位于border外边的线 outline
css margin（外边距）
css padding（内边距）
css分组和嵌套
css尺寸
css显示
隐藏元素 - display:none //不会占用空间
visibility:hidden //仍然占用空间
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
如<h1>/<p>/<div> 用display:block;
内联元素只需要须要的宽度，不强制换行
如<span>/<a> 用display:inline;
CSS Position(定位)
static 没有定位
relative 相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会转变。
fixed 固定 不占用空间 可与其他元素叠
absolute 绝对定位的元素的位置相对付比来的已定位父元素，，如果元素没有已定位的父元素，那么它的位置相对付<html>
sticky; 基于用户的滚动位置来定位。
CSS 构造 - Overflow
overflow: visible
默认情况下，overflow 的值为 visible， 意思是内容溢出元素框：
CSS Float（浮动）
float：left 左浮动 float：right 右浮动 clear ：both 断根浮动
CSS对齐方法
元素居中对齐 margin: auto
文本居中对齐 text-align: center;
图片居中对齐 margin: auto; 并display: block;
CSS 组合选择符
儿女选择器(以空格分隔断绝分手) div p
子元素选择器(以大于号分隔断绝分手）div>p
相邻兄弟选择器（以加号分隔断绝分手）div+p
普通兄弟选择器（以破折号分隔断绝分手）div~p
CSS伪类和CSS 伪元素
a:link {color:#FF0000;} /* 未访谒的链接 */
a:visited {color:#00FF00;} /* 已访谒的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
语法 selector:pseudo-element {property:value;}
牢固下CSS，CSS太庞大~
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32701.html
- 上一篇： * setCapture该法是IE浏览器专有
- 下一篇：没有最好的技术
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")