CSS
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
CSS存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点:
- 在标签中使用
style = 'key1:value1;key2:value2;' - 在页面中嵌入
<style type="text/css"> </style>块 - 引入外部css文件（或链接）
<link rel="stylesheet" href="css/common.css"/>
多class的优先级，标签上的style优先，然后按编写顺序优先
四种CSS引入方式的优先级:
- 就近原则
- 理论上：行内>内嵌>链接>导入
- 实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高
心得：
- 如果同一个css定义分布在两个css文件中，那么样式取后引入的css文件。
- 最好将第三方组件的css放在html靠前位置，自定义的css放到html后面位置。
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
编写css样式：
-
标签的style属性，代码重用
-
写在head里面 style标签中写样式
- id选择器（用得极少，因为id不重复）
#i1{} - class选择器 （最常用）******
.c1{} - 标签选择器 （选择所有类型标签）
div{} - 层级选择器（加空格） (c1下的div才应用)******
.c1 .c2 div{} - 组合选择器（加逗号） ******
#c1,.c2,div{} - 属性选择器（加[]）******
对选择到的标签再通过属性筛选
.c1[n='alex']{}
- id选择器（用得极少，因为id不重复）
-
注释
/* */ -
边框
- 宽度，样式，颜色 (
border: 4px dotted red;) (solid实线，dotted虚线) border-left只加左边框
- 宽度，样式，颜色 (
-
标签字体属性
height:48px高度 百分比10%(高度百分比需要受限于父级标签高度)width宽度 像素100px，百分比80%text-align:ceter水平居中line-height:48px垂直居中，根据标签高度color字体颜色font-size字体大小font-weight:bold字体加粗
-
float******应用非常广泛float:left向左浮float:right向右浮- 让标签浮起来，块级标签也可以堆叠，自动往下换行
- 有时子级标签浮动时，父级不随着变，需要在最后加一行，撑起父级标签：
<div style="clear: both;"></div>
-
display****常用display: none;-- 让标签消失（隐藏）display: inline;#让块级标签成为行内标签display: block;#让行内标签成为块级标签display: inline-block;#结合块级与行内标签属性
具有inline属性,默认自己有多少占多少
具有block属性，可以设置无法设置高度，宽度，padding margin
重要
行内标签：无法设置高度，宽度，padding margin
块级标签：可以设置高度，宽度，padding margin -
padding margin (0,auto)- 外边距
margin-top:10px;
默认情况下有边距，取消边距<body style="margin: 0 auto;">上下0，左右自动居中 - 内边距
padding-top:10px;
- 外边距
-
垂直外边距合并问题
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己父元素、祖先元素的麻烦。只要给父元素设置个有效的 border或者padding就可以解决。
CSS进阶
-
css重用
-
自适应 和 改变大小自动变形
左右滚动条的出现
宽度，百分比
页面最外层：像素的宽度 => 在最外层先设置绝对宽度，内层设置百分比自适应：media
-
默认img标签有一个1px的边框
img{ border: 0; } -
position:
-
position:fixed;固定在页面的某个位置,层叠分层，堆叠成行内标签 # 遮罩层bottom:0;30% right:0;20% -
position:relative + absolute配合使用做相对定位，固定在父级div某一位置<div style='position:relative;'> #relative单独无用 absolute单独用只按第一次定位 <div style='position:absolute;top:0;left:0;'></div> </div>
-
-
opcity: 0.5# 透明度 -
z-index: 9;# 层级顺序，大的在上层 -
overflow: hidden, auto # 超过范围隐藏或出现滚动条 -
:hover# 加在样式后面，当鼠标在标签上时才应用该样式 -
background放置图片background-image:url('image/4.gif');# 默认，div比图片大时，图片不断重复放置
background-repeat:repeat-y竖着堆叠;no-repeat不重复;
background-position-x:#设置图片偏移
background-position-y:
background-position:10px 10px; -
cursor:pointer光标样式 -
让背景半透明只有一个办法，就是用rgba颜色
background: rgba(0, 0, 0, 0.5)