css标签及属性
css标签及属性
HTML引入CSS的方法
1.嵌入式 <style type = “text/css”>要写的样式</style>
2.外联式 <link rel = “stylesheet” type = “text/css” href = “css/public.css” />
3.行内式(主要用于JS控制元素的样式)：style="color:red;"
九大选择器
1.通配符*{设置全局} 2.html标签选择器（多个标签时用，隔开）；
3.id #选择器; 4.class 选择器；(id,class声明是区分大小写的)
5.后代选择器(子子孙孙都选择) {选择器1 选择器2}
6.子选择器 选择器1>选择器2
7.相连兄弟 (同级相连的元素 一个) +
8.相连兄弟们(同级所有的元素) ~
9.伪类:link （未访问的样式） :visited 已访问的样式 :hover鼠标悬停的样式 :active 点击时的样式。
优先级：id> class > 标签
100 10 1（权重） 复合使用时，权重相加大的优先级高
font字体属性
font-size 字体大小
font-family 字体系列（宋体等）
font-weight 字体粗细 normal bold 100~900 400=normal 700=bold
font-style 字体风格 normal italic(倾斜)
font-variant 字体的变形 small-caps (小型大写字母)
font 简写(要求至少给出 字体大小/字体系列) 例如：font: 15px 微软雅黑;
font: [<字体加粗> | <字体风格> | <字体变形>] <字体大小>[/行高] <字体系列> 必须按顺序！！否则不会执行
background背景属性
background-color 背景颜色（三种方式,1.单词2.#fff000 3.rgb(255,255,255)4.rgba,a透明度（0-1）
background-image 背景图片 :url('./imgs...'); css引入文件，都是相对于css自己本身
background-repeat: 重复方式 no-repeat（不重复） | repeat-x | repeat-y | repeat
background-position 背景位置 （left center right 水平方向/// top center bottom 垂直方向）
例子： background-position:7px(X) -45px<Y> 浏览器为第四项限
background-attachment 背景固定 (fixed 固定 scroll默认滚动)
background-size 背景图片的尺寸 (像素 / % / cover 扩大至覆盖全部)
长度单位:px,em(倍数);% 颜色单位:单词;进制;rgb;rgba(a是透明度,0是透明，1不透明)
background 简写 (无顺序,随便写)
文本属性
letter-spacing 字间距 px color:颜色
word-spacing 词间距 px （只对有空格的起作用）
text-indent 首行缩进 px
text-align 文字对齐 left right center
line-height 行高 px em % （每行的间距）以字的中间为基线，是基线与间的距离
text-decoration 文字修饰(underline 下划线 / overline 上划线 / line-through 删除线 / none 隐藏下划线)
text-shadow 文字阴影(:5px 5px 5px #f00; 水平阴影位置 垂直阴影位置 模糊距离 阴影的颜色)
white-space:nowrap 强制不换行
word-wrap:break-word;word-break:normal 自动换行
（用边框属性绘制三角形，边框本质是梯形）
边框属性
border-width 边框四边的宽度 px
border-style 边框的样式 solid (单线)double(双线) dashed（虚线）
border-color 边框颜色
单独设置某条边的边框 需要加入-top 等关键字
border 简写形式 border:width style color; 例子：border: 1px solid #666
box-shadow 边框阴影 水平位置x / 垂直位置y / 模糊距离10px/阴影大小10px / 阴影颜色
border-radius 边框圆角 px / %
border-collapse: collapse; 合并表格内外边距
列表属性
list-style-type 设置列表的格式为none.也就是没有格式.
list-style 列表样式类型 none(无样式) 去列表的点
disc(默认值 实心点) circle 圆圈 decimal 数字
lower-roman 小写罗马..等
list-style-position 列表样式位置 inside(在内) outside(在外) 比如说圆点或者方点
list-style-image 列表样式图片 :url('./....');
盒子模型
1.盒子模型的组成： width 宽 / height高 / padding内边距 / border边框/ margin 外边距 {(left top right bottom可以控制单独的边} 例;margin-top:10px;
margin:上下左右 margin:上 左右 下 margin:上 右 下 左
2.浮动布局: float 浮动(left right ) clear 清除浮动(left right both 清除两侧浮动) {清除浮动才会把盒子撑起来}
2.1第二种清除浮动： .父元素标签::before, .父元素标签::after{content: '';display: table;}
.父元素标签::after{clear: both;}
3.position 定位:absolute 绝对定位 (以父元素为基点,脱离文档流不保留位置)
relative 相对定位(不脱离文档流，保留位置) / fixed 固定定位(网页广告) （这些都是非静态定位）
z-index 决定元素层的显示顺序（值越大,越在顶层显示.）
4.布局相关的属性:
4.1 display （规定如何显示，可以进行块与行的转化）
none(隐藏)、block(以块元素显示)、inline(以行内元素显示)
inline-block 以行级块元素的特点显示
4.2 visibility (规定元素是否可见)
:visible 可见,默认值 / hidden 隐藏 占位 / inherit 继承 子元素默认
4.3 overflow (溢出的内容该如何显示)
visible(可见)、hidden(隐藏)、scroll(出现滚动条)、auto(超出自动显示滚动条)
overflow:hidden(可用于清除浮动，在父元素中使用)
4.4 cursor：(网页中光标的类型) pointer(手形)，text(文本)，help(帮助)，wait(等待)，
5.特殊元素(内联块状元素/行内元素/内联元素...) 1.和其他元素都在一行之上 2.高/宽/行高/上下边距 都可以设置
布局技巧：
多盒浮动：1.父元素用相对定位，子元素用绝对定位
2.算好子元素的位置，让超出父元素的部分隐藏
3.当鼠标放上去时，所有距离移动过来
鼠标方上：出现（小辣椒）
父：width:220px;height:460px;position:absolute;left:234px;top:0px;display:none;
:hover{display:block;}
图片定位：
background:url('1.png') -381px -108px;}
.box1:hover{background-position:-247px -108px;}
以左上角为基准（0,0），向右向下为XY正
图标字体：
@font-face{font-family:'tbzt'; src:url('./zt/iconfont.ttf');}
.font{font-family:'tbzt';}
高级样式
transition(平滑过渡) : property (改变某个属性)
duration (转换过程的持续时间) (单位:s/ms)
timing-function(变换的速率)(ease逐渐变慢/ linear匀速/ease-in 加速/ease-out 减速/ ease-in-out加速然后减速)
例：.box2:hover{background: orange; transition:background 3s ease-out;}
transition: all .2s linear（平滑过渡）
transform(变形) :(单位:deg 角度) none (不变)
- rotate (旋转) rotateX rotateY
例:rotate(30deg) rotateX(30deg) rotateY(30deg)
.rotate{width:400px;margin:50px auto;transition:transform 0.5s linear; (把 transform当做属性值用)}
.rotate:hover{transform: rotate(60deg);}
- skew (扭曲)
例:skew(30deg); skewX(30deg); skewY(30deg);
- scale(num) 中心缩放 -1,-2,1,2,... 放大(缩小)倍数 /scale(X,Y)
例:scale(1.5); scale(2,1.5);
4.translate(移动)translateX / translateY / translate(X,Y)
例:translate(100px,20px)
5.matrix 矩阵变形
opacity: 0-1(透明-不透明);
两种渐变
1. background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
2. background-image:-webkit-gradient(
linear, /* 渐变类型：线性渐变 */
10% 10%, /* 分别对应X,Y 方向渐变起始位置 */
100% 100%, /* 分别对应X,Y 方向渐变终止位置 */
color-stop(0.14, rgb(255,0,0)), /* 渐变颜色位置，及颜色 */
color-stop(0.5, rgb(255,255,0)), /* 渐变颜色位置，及颜色 */
color-stop(1, rgb(0,0,255)) /* 渐变颜色位置，及颜色 */);
动画属性
需要@keyframes 配合 animation一起来使用
Animation：
Animation-name：动画的名称
Animation-duration：执行动画的时间
Animation-timing-function：动画的类型，类型与过渡的类型。
Animation-delay:延迟时间
animation-iteration-count：执行动画的次数，infinite,无限次
animation-direction：执行方向，奇数次向右执行，偶数次向前执行
@keyframs 动画的名称{
0%{
属性
}
100%{
属性
}
}
.div1:hover{ 名字 时间 方式 延迟时间 次数 执行方向
animation: changcolor 3s ease 1s 2 alternate;
}
@keyframes changcolor{
0%{
background:green;
}
50%{
background:blue;
}
100%{
background:pink;
}
}
浮动
浮动了就不是块级元素了，不占一行。只是改变了文档流的显示，没有脱离文档流（块浮起来了，文字却依然在外面）。
网页的层次是：定位 >浮动 > 块级元素，定位在最高层。
1.不要给父元素设height（宽一般设置，因为具体布局时需要考虑尺寸），只要设置了，子元素是无法改变父元素设置好的宽高的。
2.父、子元素都浮动或者都不浮动，在第一条的前提下，都可以撑开父元素。
3.父元素浮动，子元素不浮动，可以撑开（但是子依然是块）。
4.父元素不浮动，子元素浮动，不可以撑开（虽然子元素还在父里，但一种是块，一种是浮动了，不属于同类）。要想撑开，必须清除浮动。
定位：绝对定位，脱离文档流，不保留位置，普通文档流其不存在；
绝对定位需要一个参照物，不然就是根据body的位置定位了；
相对定位，不脱离文档流，保留位置，它的参照物是自己，自己设置了position：relative这个属性，top,left才会生效（left: 10px;现在这块左边10px是原来的位置）
定位：只有父元素也定位，子元素定位才会相对父元素定位置，否则是相对页面定位，父 子元素可以一个相对一个绝对。
兼容性处理
l 全局CSS设置
l 常用兼容性技巧
l CSS HACK
1、清除所有的标记的内外边距
body,ul,li,a,img,p,input{ margin:0; padding:0; }
2、去除项目符号或编号前面的符号
ul,ol,li{ list-style:none; }
3、全局链接效果
a:link , a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
4、网页中所有的文字大小颜色
body{ font-size:12px; font-family:宋体; color:#ccc; }
5、去除图片的链接边框线
img{border:0;}
6、全局的类样式
@font-face{font-family:'dqz';src: url('iconfont.ttf');}（这是图形字体，需要加载）
.fone{font-family:'dqz'; }（在html里加class=“fone”就可以使用）
.fl{float:left;}
.fr{float:right;}
.cl{clear:both;}
.mt_10{margin-left:50px}
.bgr{background-color:red;}
.ccc{background-color:#ccc;}
常用的兼容性调试技巧
1、实现所有浏览器主页居中
Firefox下主页居中代码：.box{margin:0px auto}
IE5.5下主页居中代码：body{text-align:center;}
将以上两种代码，合在一齐书写：
2、单行文本上下居中
h1{
height:30px;
line-height:30px;
}
3、在IE6下，左右margin会加倍，应该是IE6下的一个bug
提示：排版时，能使用padding解决的，坚决不用margin。如果实在想用的话，就使用其中一边。
解决的方案：使用 display:inline;
CSS HACK
针对不同浏览器，书写不同的CSS代码的过程，称为“CSS HACK”。
也就是说：写一个CSS代码，让IE6识别，其它浏览器不识别。
下面，针对不同浏览器，有几个符号：
这些符号是在CSS属性的前面加的，用于分辨不同的浏览器版本。
l “*”IE6和IE7都识别。如：.box{ *background-color:red; }
l “_”只有IE6识别。如：.box{ _background-color:green;}
使用CSSHACK来处理IE6下，左右margin加倍的问题
注意：CSSHACK不是W3C的标准，因此，我们尽量少用。如果你调试兼容性，调试不好时，可以偶尔用一下。
其他注意：
1.html代码前必须写<!DOCTYPE HTML>//否则ie margin:0 auto不会居中
2.解决ie文本框不垂直居中line-height后面加\9
line-height:25px\9
3.CSS禁止Chrome谷歌浏览器激活输入框后自动添加橘黄色边框
.className:focus{outline:none } || {outline:Blue Solid 4px;}
4.要使得子盒子位于父盒子处于绝对居中方案一(推荐):
设置父盒子{position:realtive;}
设置子盒子{margin:auto;postion:absolute;left:0;right:0;top:0;bottom:0;}
附录：
1.CSS Cascading Style Sheets 层叠样式表。CSS是给HTML标记加的样式；JS是给HTML标记加的行为。HTML标记是最先出现的
2.注意：id属性一般是给JS使用的，不是让你来加样式的。class属性只能给CSS用，不能给JS用的。
id选择器的名称，必须以“#”开头，后跟HTML标记的id属性的值。
3.浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已.
4.list-style：none (去掉各种项目符号) 行高等于盒子高度（上下居中）
5.我们所说的width和height属性，它们指内容的宽度和高度，不含内、外边距、边框线。
6.浮动就是将块级元素霸占一行的特性取消，脱离原来的文本流。
7.CSS属性继承：外层元素的样式，会被内层元素进行继承。多个外层元素的样式，最终都会“叠加”到内层元素上。
8.cursor：网页中光标的类型，取值：text(文本)help(帮助)、wait(等待)、pointer(手形)等
10.上下两个块元素，如果每一个元素都指定了四个外边距，那么上下相邻的那个外边距会发生合并的现象，合并后取其中较大的外边距。
11.浮动的元素，不再占空间了，并且，浮动元素的层级要高于普通元素
12.CSS属性继承：外层元素的样式，会被内层元素进行继承。多个外层元素的样式，最终都会“叠加”到内层元素上。
13.单个选择器的优先级：行内样式 > id选择器 > class选择器 > 标签选择器
14.同一个class属性，可以指定多个类名样式，多个类样式之间用空格隔开。
15.兼容性调试，主要调试IE8、IE7、IE6、Firefox。
补充
伪元素选择器
s1:firsh-child 第一个子元素
s1:last-child 最后一个子元素
s1:nth-child(num) 匹配父元素的第n个子元素s1.
num从1开始 也可以是公式 例: 2n 2n-1 奇偶数 even(偶数) odd(奇数)
s1:nth-last-child(num) 匹配父元素的倒数第n个子元素s1.
s1:nth-of-type(num) 匹配同类型中的第n个同级兄弟元素s1
s1:nth-last-of-type(num) 匹配同类型中的倒数第n个同级兄弟元素s1
s1:only-child 当子元素只有一个时 起作用
s1:not() 除了()里的元素,其他都选中
s1:empty 选中内容为空的标签, 空格也算有内容
s1::before 内容之前 content内容属性
s1::after 内容之后
