详解CSS 一、 使用CSS样式表 使用CSS 语法： 选择符｛样式属性：取值；样式属性：取值；样式属性：取值；…｝ #menu a{ float: left; width: 120px; he

详解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%}