详解CSS
一、 使用CSS样式表
使用CSS
语法:
选择符{样式属性:取值;样式属性:取值;样式属性:取值;…}
#menu a{
float: left;
width: 120px;
height: 56px;
margin: 0 0 0 2px;
padding: 9px 0 0 0;
background-color: #cccccc;
text-decoration: none;
}
链接外部样式表
<link rel="stylesheet" href="personal%20page.css">
属性rel——指在页面中使用外部的样式表
属性href——文件所在位置
导入外部样式表
<style type="text/css">
<!--
@import url(StyleSheet.css);
-->
</style>
字体属性
字体——font-family
字号——font-size
字体风格——font-style (normal、italic、oblique)
加粗字体——font-weight (normal、bold、bolder、lighter、number)
小写字母转为大富阳——font-variant (normal、small-caps)
字体复合属性——font
自定义网页字体——@font-face
颜色和背景属性
指定元素的颜色——color(颜色属性)
背景颜色——background-color
背景图像——background-image:url(图像地址)
背景重复——background-repeat
背景附件——background-attachment:scroll/fixed
背景位置——background-position
背景复合属性——background
RGB颜色——red、green、blue——rgba
HSL颜色——色相、饱和度、亮度——hsla
段落属性
单词间隔——word-spacing
字符间隔——letter-spacing
文字修饰——text-decoration (underline/overline/line-through/blink)
文字的垂直对齐方式——vertical-align
(baseline/sub/super/top/text-top/middle/text-bottom)
英文大小写转换——text-transform (none/capitalize/uppercase/lowercase)
文字的水平对齐方式——text-align (left/right/center/justify)
文本缩进——text-indent
文本行高——line-height
文本空白处理——white-space (normal/pre/nowrap)
文本反排——Unicode-bidi、direction
盒模型
内容区——width、height、overflow
内边距——padding
外边距——margin
边框——border
外边距叠加:当两个或更多垂直外边距相遇时,它们将形成一个外边距,这个外边距的高度等于发生叠加的外边距的高度中的较大者。
PS:只有普通文档流中块框的垂直外边距才会发生叠加,行内框、浮动框或绝对定位框之间的外边距不会叠加。
边框属性
边框样式——border-style
边框宽度——border-width
边框颜色——border-color
边框复合属性——border
定位属性
相对定位
相对定位:指允许元素在相对于文档布局的原始位置上进行偏移(相对定位是相对于元素在文档流中的初始位置)
PS:使用相对定位时,无论是否移动,元素仍然占据原来的空间。相对定位实际上被看作普通文档流定位模型的一部分,因为元素的位置是相对于它在普通流中的位置的。
绝对定位
绝对定位:指允许元素与原始的文档布局分离且任意定位(绝对定位是相对于距离它最近的已定位祖先元素,如果不存在已定位的祖先元素,那么相对于初始包含块)
PS:绝对定位使元素的位置与普通文档流无关,因此不占据空间。
固定定位
固定定位是绝对定位的一种,差异在于固定元素的包含块是视口(viewport).
定位方式——position (static/absolute/fiexed/relative)
元素位置——top、right、bottom、left
层叠顺序——z-index
浮动属性——float
清除属性——clear
可视区域——clip:auto|rect()
超出范围——overflow:visible | auto | hidden | scroll
可见属性——visibility;inherit | visible | hidden
普通流定位
普通流——普通流中元素框的位置由元素在HTML中的位置决定
块级元素——p、h1或div等元素
块级框从上到下一个接一个地垂直排列,框之间的垂直距离由框的垂直外边距计算出来
行内元素——strong和span等元素
行内框在一行中水平排列
属性display:none | block | inline-block
行内元素转化为块级元素——diplay:block
让元素像行内元素一样水平地依次排列——diplay:inline-block
浮动定位
浮动的框可以左右移动,直到它的外边缘碰到包含框或加一个浮动框的边缘(PS:浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样)
行框
创建浮动框使文本可以围绕图像
清理
属性clear——表示框的哪些边不应该挨着浮动框。
在清理元素时,浏览器在元素顶上添加足够的外边距,使元素的顶边缘垂直下降到浮动框下面(对元素进行清理实际上为前面的浮动元素留出了垂直空间)
1.浮动元素脱离了文档流,所以包围图片和文本的DIV不占据空间
<div class="news">
<img src="/img/news-pic.jpg" alt="my-pic"/>
<p>Some text</p>
</div>
2.在文本后添加一个空元素并且清理它,DIV现在占据空间
<div class="news">
<img src="/img/news-pic.jpg" alt="my-pic"/>
<p>Some text</p>
<br class="clear"/>
</div>
3.浮动DIV容器,也可以让DIV占据空间
4.属性overflow:auto | hidden——自动清理包含的任何浮动元素
列表属性
列表符号——list-style-type
图像符号——list-style-image:none | url(图像地址)
列表缩进——list-style-position:outside | inside
列表复合属性——list-style
光标属性
语法:cursor:auto | 形状取值 |url(图像地址)
滤镜属性
不透明度——fliter:alpha(参数1=参数值,参数2=参数值,…)
参数(opacity / finishopacity /style /starts /starty /finishx /finish)
动感模糊——filter:blur(add=参数值,direction=参数值,strength=参数值)
对颜色进行透明处理——filter:chroma(color=颜色代码)
阴影效果——filter:dropShadow(color=阴影颜色,offX=参数值,offY=参数值,positive=参数值)
对象翻转——filter:FlipH/FlipV
发光效果——filter:Glow(color=颜色代码,strength=强度值)
灰度处理——filter:gray
反相——filter:invert
X光片效果——filter:xray
遮罩效果——filter:Mask(color=颜色代码)
波形滤镜——filter:wave(add=参数值,freq=参数值,lightstrength=参数值,phase=参数值,strength=参数值)
选择器
常用选择器
常用选择器——为样式找到应用目标
类型选择器(也称元素选择器)——如:p
后代选择器——如:p h1
ID选择器——#
类选择器——.
伪类选择器
链接伪类——:link | :visited
未被访问过的链接——:link伪类选择器
已被访问过的链接——:visited伪类选择器
动态伪类——:hover | :active | :focus
鼠标悬停处的元素——:hover动态伪类选择器
激活的元素——:active动态伪类选择器
聚焦的元素——:focus动态伪类选择器
输入的值不符合规定——:invalid
输入的值符合规定——:valid
目标伪类——:target
结构伪类
匹配列表中第一项——:first-child
匹配列表中最后一项——:last-child
理解nth规则:
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:nth-child(odd)
:nth-child(even)
注:(n)这个上参数既可以使用整数也可以使用数值表达式
否定选择器——:not
注:CSS3要求对伪元素使用两个冒号以便与伪类进行区别
通用选择器
通用选择器——*
高级选择器
子选择器——如:#nav>li
相邻同胞选择器——如:h2+p
属性选择器:
根据某个属性存在对元素应用样式——如:a[title]
根据属性值应用样式——如:a[tiltie=”subtitle”]
对属性值的一部分和指定的文本进行匹配来寻找元素——如:a[href^=”http:”](寻找以http:开头的所有链接)
寻找以特定值结尾的属性——如:a[href$=”.doc”]
字符串匹配选择器
匹配开头的属性选择器——Element[attribute^=”value”]
匹配包含内容的属性选择器——Element[attribute*=”value”]
匹配结尾的属性选择器——Element[attribute$=”value”]
层叠——cascade
特殊性——内联>ID>Class>类型
继承——应用样式的元素的后代会继承样式的某些属性,如颜色与字号
注释——/*XXXXXXXXXXXXXXXX*/
设计代码结构:
一般性样式——主体样式、reset样式、链接、标题、其他元素
辅助样式——表单、通知和错误、一致的条目
页面结构——标题、页脚和导航 、布局、其他页面结构元素
页面组件——各个页面
覆盖
CSS3新特性
边框
圆角——border-radius
图像边框——border-image
阴影
盒阴影——box-shadow (x y strength color)
文字阴影——text-shadow(右侧阴影大小 下方阴影大小 模糊距离 颜色)
不透明度——opacity | rgba | filter:alpha(opacity=80)
为目标元素设置样式——:target伪类选择器
对象的倒影——box-reflect
渐变
渐变——gradient
线向渐变——linear-gradient(方向 渐变起点 过渡颜色点 渐变终点)
径向渐变——radial-gradient(起点 渐变形状和大小 过渡颜色点 渐变终点)
重复线性渐变——repeating-linear-gradient
重复径向渐变——repeating-raidal-gradient
背景图片渐变
多重背景图片
列
列数——column-count
列宽——column-width
列间隔——column-gap
列与列之间分割线(类似于单边边框线)——column-rule
文字换行——word-wrap:break-word
将字符做成常用图标的字体——@font-face图标
CSS3过渡
要过渡的CSS属性名称——transition-property
定义过渡效果持续的时间——transition-duration
定义过渡期间速度如何变化——transition-timing-function
定义过渡开始前的延迟时间——transition-delay
过渡复合写法——transition
#conttent a{
...其它样式...
transition-property: all;
transition-duration:1s;
transition-timing-function:ease;
transition-delay:0s;
}
#content a{
transition:all 1s ease 0s;
}
在不同时间段内过渡不同属性
#content a{
transition-property:border,color,text-shadow;
transiton-duration:2s,3s 8s;
}
CSS3变形
2D变形模块
缩放元素——scale(缩放倍数)
移动元素——translate (从左向右移动,从上往下移动)
旋转元素——rotate(旋转角度)
沿X轴和Y轴对元素进行斜切——skew(X轴偏斜,Y轴偏斜)
允许以像素精度控制变形效果——matrix
修改变形效果的起点——transform-origin
注:变形的起点默认是元素的中心点
#navigation{
transform:translate(40px,40px);
transform:scale(0.5);
transform:rotate(90deg);
transform:skew(10deg,20deg);
}
3D变形模块
CSS3动画
关键帧声明——@keyframes
动画复合属性——animation
动画名称——animation-name
动画效果持续的时间——animation-duration
动画连续循环播放时间——animation-iteration-count
动画速度如何变化——animation-timing-function
动画开始前的延迟时间——animation-delay
控制动画的播放和暂停——animation-play-state
@keyframes warning{
0%{
text-shadow: 0 0 4px #000000 ;
}
50%{
text-shadow:0 0 20px #000000;
}
100%{
text-shadow:0 0 4px #000000
}
}
h5{
font-size: 4em;
color: #f2050b;
text-align: center;
animation:warning 1.5s infinite ease-in
}
CSS布局
基本结构
两列的浮动布局:
1. 将两列均向左浮动,然后使用外边距或内边距在两列之间创建一个隔离带。
2. 让一个元素向左浮动,让另一个元素向右浮动,从而创建视觉上的隔离带
三列的浮动布局:
1. 让一个元素向左浮动,让另一个元素向右浮动,从而创建视觉上的隔离带
2. 在右边元素中一个元素向左浮动,另一个元素向右浮动,从而创建视觉上的隔离带
固定宽度的布局——px
流式布局——% (目标元素宽度/上下文宽度=百分比宽度)
弹性布局——em(相对于字号来设置宽度)
注:1em=10px,默认文字大小为16px
弹性图片——img{max-width:100%}