巩固下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太复杂~

相关推荐