css
2016-02-20 10:23
591 查看
<style type="text/css"></style>
<link href="public.css" rel="stylesheet" type="text/css"/>
优先级 <span style="color:red;"></span> 越接近元素的css属性优先级越高
选择器优先级
行内style >ID选择器 > class类选择器>html标签选择器
.new ul li a.blue{color:blue;}> a:hover{color:red;} > .white{color:white;}
<span style="">优先级最高</span>
（2）多个选择器的优先级计算
假设，用1代表标签选择器，10代表类选择器，100代表ID选择器，1000代表行内样式
H2{color:#FF0000} 优先级 1
.news h2{color:#0000FF} 优先级 11
div.news h2{color:#00FF00} 优先级 12
div#news h2{color:#FFFF00} 优先级 102
*{font-size:12px;} //通用选择器 ie6不支持，少用
h1{font-size:12px;} // 标签选择器
<div class=""></div> //类样式 【使用最多】
<div id=""></div> // id 选择器 【多用于js调用，id唯一】
多元素选择器
h1,h2{color:red;}
后代元素选择器
子元素选择器
.new li{border:1px solid #ccc;} 后代所有元素【特别哦】
.new > .title{color:red;} 子代元素 【只有一代】【少用】
<div class="new">
<div class="title">title</div>
<div class="content">
<li>公司成立</li>
</div>
</div>
div.box class="box" 的 div
div#header id="header"的div
任何html元素都有 width height padding margin border background
body{font:bold italic 24px 黑体;} 简写的形式
letter-spacing: 字间距
line-height:150% 行高1.5倍
padding:0px 0px 1px; 上 左右 下
单行文本上下居中li{height:30px; line-height:30px;}
li{list-style-type:none; }
伪类选择器 <a>
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a.a1:link{color:red;} [厉害哦]
<li><a>xx</a></li>
<li><a class="a1">xxxxx</a></li>
background-color
background-image
background-attachment 移动滚动条时，背景固定fix 还是滚动 scroll
<style type="text/css">
body,div,li{padding:0; margin:0;}
ul,li{list-style:none;}
li{
padding-left:30px;
background-repeat:no-repeat;
background-image:url();
background-position:left center;} li背景图片水平左对齐 垂直居中对齐
</style>
行内元素 span a img
行内元素的大小由内容决定，设置 width 和 height是看不到效果的
行内元素转块元素
<span style="float:left;"></span> 变成了块元素
a span{display:block;} //行内元素转成块元素
div{display:inline;} //块元素转行内元素
行内元素，经过什么操作，可以变成“块元素”？
浮动、display:block、固定定位、绝对定位
<span style="float:right;">右对齐
float元素不占空间，不占px
任何元素都可以浮动 float
所有图片float:left; 只要宽度不够，就会自动换行，就有如下效果
<ul><li><img src=""/></li></ul>
图片1 图片2
图片3 图片4
p{width:580px; padding:20px 10px;} 宽就是600px了，添加padding margin 要减小width
每个div都定义高度
li{float:left;}
font-weight:bold;
<div class="class1 class2"></div> 加两个样式
一行两个东西，一个float:left;一个float:right;
css定位
position: static(静态定位) fixed(固定定位) relative 相对定位 absolute 绝对定位
left 设置元素距离左边多远
right top bottom
任何元素，默认是静态定位
固定定位：相对于浏览器窗口（在线QQ） 固定元素，脱离文档，不占空间，是”块元素“
相对定位：是相对于”它原来的自己“来进行的偏移，所占空间保留(淘宝图片新品标志)
position:relative;
right:-100px; //用负数
绝对定位：相对于它的祖先（上级或者上上级，最终是<body>）定位，不占空间
组合使用
上级相对 position:relative;
具体那个元素 position:absolute; top:-10px; right:-30px;
CSS HACK 实在解决不了兼容性问题，可以试试使用css hack
CSS HACK，针对不同浏览器IE6 IE7 IE8 火狐，编辑不同的CSS代码的过程，就叫CSS HACK。
（1）CSS属性的HACK：
div{
background-color：red; //所有浏览器都支持 其他 显示 red
*background-color：green; //ie6和IE7支持 ie7 显示 green
_background-color：blue; //IE6认识 最终 ie6 显示 blue
下面的css hack 未验证
CSS Hack的实现方式：
(1)IE条件语句：只在IE9-有效
<!--[if IE]> 小于IE10的浏览器会看到此句<![endif]-->
<!--[if IE 6]> IE6看到此句<![endif]-->
<!--[if lt IE 8]> 小于IE8的浏览器会看到此句 <![endif]-->
<!--[if lte IE 8]> 小于等于IE8的浏览器会看到此句 <![endif]-->
上述条件语句中可以放置任何CSS/HTML/JS语句。
(2)选择器前缀
<style>
.content{ } 所有浏览器都能理解的选择器
*html .content{} 只有IE6能理解的选择器
*+html .content{} 只有IE7能理解的选择器
</style>
(3)属性前缀
<style>
.content{
-webkit-animation: anim1 3s;
-moz-animation: anim1 3s;
-o-animation: anim1 3s;
background: red; /*所有浏览器都能识别*/
*background:green; /*IE6/IE7能识别*/
_background:blue; /*IE6/IE7能识别*/
+background:yellow; /*IE能识别*/
background: yellow\9\0; /*IE9+能识别*/
background: pink !important; /*IE6无法识别*/
}
</style>
css 优化
页面访问速度优化
(0)硬件/网络优化
(1)数据库优化
(2)服务器优化
(3)前端优化: HTML优化、CSS优化、JS优化
CSS优化方案：
优化原则：尽可能减少HTTP请求数量；尽可能减少每次请求的数据大小
优化方法：
(1)CSS Sprites：背景图滑动门、把很多的小背景图拼接为一副大图——百度“CSS Sprites在线”可以找到很多这样的工具
(2)把CSS放到页面顶部，多用<link href=”x.css”/>代替@import url(x.css)
(3)避免使用CSS表达式
(4)避免空的src和href值
(5)巧用浏览器缓存，把CSS放在尽可能少的HTML外部文件
(6)首页中尽量不用外部CSS
(7)不要在HTML中缩放图像
(8)对JavaScript文件和CSS文件进行压缩(剔除空白/换行/注释等)，减小文件大小。可使用类似YUI Compressor等工具 Yahoo UI Libary
<link href="public.css" rel="stylesheet" type="text/css"/>
优先级 <span style="color:red;"></span> 越接近元素的css属性优先级越高
选择器优先级
行内style >ID选择器 > class类选择器>html标签选择器
.new ul li a.blue{color:blue;}> a:hover{color:red;} > .white{color:white;}
<span style="">优先级最高</span>
（2）多个选择器的优先级计算
假设，用1代表标签选择器，10代表类选择器，100代表ID选择器，1000代表行内样式
H2{color:#FF0000} 优先级 1
.news h2{color:#0000FF} 优先级 11
div.news h2{color:#00FF00} 优先级 12
div#news h2{color:#FFFF00} 优先级 102
*{font-size:12px;} //通用选择器 ie6不支持，少用
h1{font-size:12px;} // 标签选择器
<div class=""></div> //类样式 【使用最多】
<div id=""></div> // id 选择器 【多用于js调用，id唯一】
多元素选择器
h1,h2{color:red;}
后代元素选择器
子元素选择器
.new li{border:1px solid #ccc;} 后代所有元素【特别哦】
.new > .title{color:red;} 子代元素 【只有一代】【少用】
<div class="new">
<div class="title">title</div>
<div class="content">
<li>公司成立</li>
</div>
</div>
div.box class="box" 的 div
div#header id="header"的div
任何html元素都有 width height padding margin border background
body{font:bold italic 24px 黑体;} 简写的形式
letter-spacing: 字间距
line-height:150% 行高1.5倍
padding:0px 0px 1px; 上 左右 下
单行文本上下居中li{height:30px; line-height:30px;}
li{list-style-type:none; }
伪类选择器 <a>
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a.a1:link{color:red;} [厉害哦]
<li><a>xx</a></li>
<li><a class="a1">xxxxx</a></li>
background-color
background-image
background-attachment 移动滚动条时，背景固定fix 还是滚动 scroll
<style type="text/css">
body,div,li{padding:0; margin:0;}
ul,li{list-style:none;}
li{
padding-left:30px;
background-repeat:no-repeat;
background-image:url();
background-position:left center;} li背景图片水平左对齐 垂直居中对齐
</style>
行内元素 span a img
行内元素的大小由内容决定，设置 width 和 height是看不到效果的
行内元素转块元素
<span style="float:left;"></span> 变成了块元素
a span{display:block;} //行内元素转成块元素
div{display:inline;} //块元素转行内元素
行内元素，经过什么操作，可以变成“块元素”？
浮动、display:block、固定定位、绝对定位
<span style="float:right;">右对齐
float元素不占空间，不占px
任何元素都可以浮动 float
所有图片float:left; 只要宽度不够，就会自动换行，就有如下效果
<ul><li><img src=""/></li></ul>
图片1 图片2
图片3 图片4
p{width:580px; padding:20px 10px;} 宽就是600px了，添加padding margin 要减小width
每个div都定义高度
li{float:left;}
font-weight:bold;
<div class="class1 class2"></div> 加两个样式
一行两个东西，一个float:left;一个float:right;
css定位
position: static(静态定位) fixed(固定定位) relative 相对定位 absolute 绝对定位
left 设置元素距离左边多远
right top bottom
任何元素，默认是静态定位
固定定位：相对于浏览器窗口（在线QQ） 固定元素，脱离文档，不占空间，是”块元素“
相对定位：是相对于”它原来的自己“来进行的偏移，所占空间保留(淘宝图片新品标志)
position:relative;
right:-100px; //用负数
绝对定位：相对于它的祖先（上级或者上上级，最终是<body>）定位，不占空间
组合使用
上级相对 position:relative;
具体那个元素 position:absolute; top:-10px; right:-30px;
CSS HACK 实在解决不了兼容性问题，可以试试使用css hack
CSS HACK，针对不同浏览器IE6 IE7 IE8 火狐，编辑不同的CSS代码的过程，就叫CSS HACK。
（1）CSS属性的HACK：
div{
background-color：red; //所有浏览器都支持 其他 显示 red
*background-color：green; //ie6和IE7支持 ie7 显示 green
_background-color：blue; //IE6认识 最终 ie6 显示 blue
下面的css hack 未验证
CSS Hack的实现方式：
(1)IE条件语句：只在IE9-有效
<!--[if IE]> 小于IE10的浏览器会看到此句<![endif]-->
<!--[if IE 6]> IE6看到此句<![endif]-->
<!--[if lt IE 8]> 小于IE8的浏览器会看到此句 <![endif]-->
<!--[if lte IE 8]> 小于等于IE8的浏览器会看到此句 <![endif]-->
上述条件语句中可以放置任何CSS/HTML/JS语句。
(2)选择器前缀
<style>
.content{ } 所有浏览器都能理解的选择器
*html .content{} 只有IE6能理解的选择器
*+html .content{} 只有IE7能理解的选择器
</style>
(3)属性前缀
<style>
.content{
-webkit-animation: anim1 3s;
-moz-animation: anim1 3s;
-o-animation: anim1 3s;
background: red; /*所有浏览器都能识别*/
*background:green; /*IE6/IE7能识别*/
_background:blue; /*IE6/IE7能识别*/
+background:yellow; /*IE能识别*/
background: yellow\9\0; /*IE9+能识别*/
background: pink !important; /*IE6无法识别*/
}
</style>
css 优化
页面访问速度优化
(0)硬件/网络优化
(1)数据库优化
(2)服务器优化
(3)前端优化: HTML优化、CSS优化、JS优化
CSS优化方案：
优化原则：尽可能减少HTTP请求数量；尽可能减少每次请求的数据大小
优化方法：
(1)CSS Sprites：背景图滑动门、把很多的小背景图拼接为一副大图——百度“CSS Sprites在线”可以找到很多这样的工具
(2)把CSS放到页面顶部，多用<link href=”x.css”/>代替@import url(x.css)
(3)避免使用CSS表达式
(4)避免空的src和href值
(5)巧用浏览器缓存，把CSS放在尽可能少的HTML外部文件
(6)首页中尽量不用外部CSS
(7)不要在HTML中缩放图像
(8)对JavaScript文件和CSS文件进行压缩(剔除空白/换行/注释等)，减小文件大小。可使用类似YUI Compressor等工具 Yahoo UI Libary
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 解读CSS布局之-水平垂直居中
- css+div制作圆角矩形的四种方法
- CSS中编写省略号代码片段
- CSS中编写省略号代码片段
- CSS3立体文字最佳实践
- DIV布局和放大
- CSS 透明度 设置 兼容IE FF
- 2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页
- 前端试题-cssText?
- 【css】table
- 性能优化--JS、CSS压缩合并
- 深入理解CSS盒子模型
- 关于css的一些小细节---link
- css之几个细节
- css布局——百度前端技术学院
- CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解
- css公共样式，初始化
- CSS清除浮动常用方法小结
- CSS之BFC详解
- CSS 布局_如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？