Css及Css3
参考网址:
http://www.runoob.com/css
1 CSS概述及发展历程
CSS(Cascading Style Sheet) 层叠样式表:控制布局和显示效果。
布局选择CSS
div css 内容和显示分离 与其他标签元素兼容性好 尺寸小速度快 更有利于响应式布局
ul li css适合列表项目 菜单项目的布局
摒弃table布局,table可用来展示表格数据。
CSS1.0
1997年 W3C 颁布 HTML4 标准的同时也发布了有关样式单的第一个标准 CSS1.0。主要涉及选择器、样式属性、伪类 / 对象几个大的部分。
选择器分为派生选择器、ID 选择器和类选择器几种。样式属性主要包括 Font 字体、Text 文本、Background 背景、Position 定位、Dimensions 尺寸、Layout 布局、Margins 外边距、Border 边框、Padding 内边距、List 列表、Table 表格、Scrollbar 滚动条、a 的 link、hover、active、visited 等。
"."用来匹配类属性
"#"用来匹配ID属性
body div a 等用来匹配节点对象
CSS2.0/2.1
1998年 W3C 发布了 CSS 的第二个版本,包含了 CSS1 所有的功能,并扩充和改进了很多更加强大的属性。
2007年W3C 根据各大浏览器支持和实现情况,最终修订 CSS2 为 CSS2.1。
增加的内容:
"*"用来匹配任何标签
">"用于指定父子节点关系
空格用来匹配下级节点
" "用于表示在同级节点关系
属性值过滤,input[text="kl"]
增强了Position功能,增加了 relative、absolute、fixed 几个值
扩充display 属性,用该属性指定元素是否会显示以及如何显示
增加了伪类 :focus、:first-child
增加了 cursor 属性
CSS3
2001 年 5 月,W3C 着手开始准备开发 CSS 第三版规范。然后持续到2014年3月20,分模块陆续发布。
Grid布局 body{columns:3;column-gap:0.5in;} img{float:pagetopright;width:3gr;}
Flexbox(伸缩布局盒) 元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器
圆角边框,属性:border-radius
text-shadow:文字投影
text -overflow:当文字溢出时,用“…”提示。包括ellipsis、clip、ellipsis-word、inherit
RGBA colors 三色加了个不透明度 rgba(100,100,100,0.5)alpha透明度为0.5
transform: rotate | scale | skew | translate |matrix; //旋转 缩放 扭曲 移动 矩阵变形
[att^=val]:表示开始字符是val的att属性[att$=val]:表示结束字符是val的att属性
[att*=val]:表示包含至少有一个val的att属性
multi-column layout:多列布局,让文字以多列显示,包括column-width、column-count、column-gap三个值
2 CSS三种实现方式
2.1行内样式(不推荐使用)
直接写在标签里面,使用style属性提供的样式
style属性的语法 style = "样式属性1:值1;样式属性2...;样式属性n:值n";
2.2 内嵌样式(页面内复用)
在head标签中使用style 的样式,直接作用所有标签(或所有类或Id元素)里面的样式。
<style type="text/css">
样式名1{样式属性1:值1;样式属性2...;样式属性n:值n}
样式名2{样式属性1:值1;样式属性2...;样式属性n:值n}
</style>
2.3 外部样式(推荐使用,复用性高)
可以将样式单独的写在一个style.css中
使用link将其链接过来
<link type = "text/css" rel = "stylesheet" href = "./style.css" />
3 CSS常用样式解析
3.1 border边框
方向:top、right、bottom、left
属性:style、color、weight
3.1.1 border
border: solid 1px #ddd;
三个值依次为:样式border-style粗细border-weight 颜色border-color。
3.1.2 border-方向
border-top: solid 1px #ddd;
border-bottom: solid 1px red;
border-left: solid 1px green;
border-right: solid 1px blue;
3.1.3 border-方向-属性
border-top-width: 1px;
border-top-style: dashed;
border-left-color: #cccccc;
3.1.4 表格细边框样式
table,tr,td
{
border-collapse:collapse;
}
3.2 margin 元素外边距
完整margin:10px 20px 30px 顺序为上、右、下、左
三个值margin:10px 20px 30px 表示上10px,右20px,下30px,左(缺)取右10px
两个值margin:10px 20px 上下外边距10px,左右外边距20px
单值 margin:10px 表示上下左右的外边距都为10px
自动居中:
margin:0 auto; 表示上下的距离值是0,而左右自动适应,自动居中。
margin:auto; 表示上下左右都自动适应
3.3 padding 元素内边距
方向规则同margin。
3.4 float
.float-left{
float:left;
}
.float-right{
float:right;
}
浮动会使元素向左或向右移动,其周围的元素也会重新排列。
浮动元素之后的元素将围绕它,浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边。
3.5 clear
.clear {
clear: both;
}
在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both;
该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。
在网页设计时还有一种很普遍的情况:
<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
</div>
<p class="clear ">第三段内容</p>
火狐浏览器下这个清除没有达到效果,必须在浮动元素所在标签闭合之前及时进行“清除”。
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>
如果多加的<div class="clear"></div>标签引起IE和FF高度变化,通过如下方法解决:
.clear {
clear: both;
height:1px;
margin-top:-1px;
overflow:hidden;
}
3.6 文字样式
font-style 设定字体风格,比如 font-style: italic;
font-weight设定文字粗细,比如 font-weight: bold;
font-size设定文字大小,比如font-size: 12px;
line-height设定行距,比如line-height: 150%;
color设定文字颜色,比如color: red;
font-family设定字体,比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
3.7 背景图片样式
背景图片语法
background-image:url() 引入背景图片
background-repeat:no-repeat 设置背景图片是否重复平铺
background-position:left top 设置图片的css背景定位,left代表靠左,top代表靠上
简写背景图片语法:
background:url(图片地址) no-repeat left top
不重复平铺
背景图片左上角
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 }
背景图片横向居中
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat center top}
背景图片纵向居中
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat left 50%}
背景图片页面居中
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat center 50%}
如果需要背景图铺满容器大小,加上background-size: cover;
background-size: cover;//100%
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
重复平铺
全网页背景图片重复平铺
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)}
背景图片横向重复平铺
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-x}
背景图片纵向重复平铺
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-y}
3.8页面排版样式
//英文自动换行
.word-break{
word-wrap:break-word;
word-break:break-all;
white-space:moz-pre-wrap;
overflow:hidden;
}
//div 内容超出省略号
.omitted {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
//div 两行省略号 要设置width最大值
.omitted-2-line{
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
//文字方向 writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左
p{ writing-mode: tb-rl;}
//段落首行缩进
p{
text-indent:2em;
}
//首字下沉
p:first-letter{ padding: 6px; font-size: 32pt; float: left;}
//汉字注音
<ruby>注音<rt style="font-size: 11px;">zhu yin</rt></ruby>
//固定宽度折行
.word-break{
word-break:keep-all
}
4 样式选择器
4.1 标签选择器
作用于整个页面中的所有该名称的标签
标签名 { 样式名 : 值; }
4.2 id选择器
规范id唯一性
#id名 { 样式名 : 值; }
4.3 类选择器
规定一个类型名的样式,使用处添加属性class="类名"
.类名 { 样式名 : 值; }
4.4 伪选择器
设定标签样式的时候,根据状态设置不同的样式(字体,颜色,大小等)
<style>
a:link{
color:blue;
font-size:16px
}
a:hover{
color:yellow;
font-size:24px
}
a:active{
color:red;
font-size:36px
}
a:visited{
color:#9f365f;
}
tr:hover{
background-color:yellow;
}
</style>
5 文档流
文档流就是堆砌,如果需要控制其位置,需要考虑position属性设置其定位方式
5.1 position为static(文档流堆砌)
默认情况的值,即正常自左而右,自上而下的堆砌的文档流。
这种情况样式中top和left等定位属性无效。
5.2 position为relative(文档流堆砌 偏离)
相对定位:原来所在文档流中的位置一直保持占据着。
设定left、top等参数的时候,相当于在原有文档流的位置基础之上偏移。
5.3 position为absolute(脱离文档流)
元素设置绝对定位以后,那么该元素就脱离了文档流,可以设置其绝对位置。
position属性其实是指本体对上级的定位,absolute其left、top、right、bottom等是相对于设置了relative定位的上级的,如果父元素没有设置relative,则一级一级往上找relative的容器,如果都没找到,最后相对body定位。
如果需要针对某一个容器的悬浮效果,而不是针对窗口的。只要把其上一级的样式属性position设置为relative就可以了。
如果有滚动条,滚动条值发生变化时,absolute定位的元素会跟着body或者relative的父级容器一起滚动。
5.4 position为fixed(脱离文档流)
设置fixed定位后,该元素就脱离了文档流,可以设置其绝对位置。
浏览器窗口大小变化时,fixed定位元素的位置会重新调整,以适应样式中定义的位置。
如果有滚动条,滚动条值发生变化时,fixed定位元素的位置始终相对浏览器窗口不变。
fixed定位案例
1、右下角固定广告,广告位始终固定在窗体的某个位置,不受内容和滚动条变化的影响。
2、当浏览器窗体不断缩小,最后导致元素位置会重叠,位置互换等情形的发生。当可视区过小,元素可能"消失"。
#ads{
width:300px;
height:250px;
position:fixed;
right:0;
bottom:0;
border:1px solid red;
}