您的位置：首页 > Web前端 > CSS

WEB前端--CSS

2016-01-29 15:31 597 查看

一、认识CSS

1、概念

CSS（Cascading Style Sheet，层叠样式表），可以将网页制作的更加绚丽多彩。它可以有效的对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

2、CSS优点：

制作网页方便

精确控制网页的内容形式

样式丰富

定义样式灵活多样

二、使用CSS

1、基本语法

举例：

2、添加CSS方法

共有四种方法：连接外部样式表、内部样式表、导入外部样式表和内嵌样式。

2.1、连接外部样式表用<link>调用定义好的样式css文件

2.2、内部样式表调用在<head>内部定义好的样式，并且以<style></style>方式定义。

2.3、导入外部样式表将外部样式表文件导入内部样式表<style>里，用@import导入。

2.4、内嵌样式直接混合在html标记里添加style参数，主要在body内实现。

三、字体属性

1、字体 font-family

浏览器会按自己支持的字体从左往右识别，如果都不识别，就用系统默认字体。

2、字号 font-size

3、字体风格 font-style

取值有三种：

normal--正常字体（默认）

italic--斜体显示文字

oblique--偏斜体（上两个的中间状态）

4、加粗字体 font-weight

相当于html里的<b>

取值范围：(细-->粗)

normal-->bold-->bolder-->lighter-->number

用数值：100~900

5、小写字母转大写 font-variant

6、字体复合属性

多个属性写在一起

四、颜色和背景

1、颜色 color

颜色取值参考RGB规范

2、背景色 background-color

3、背景图像 background-image

4、背景重复 background-repeat

设置背景图像是否平铺，或如何平铺。

5、背景附件 background-attachment

设置背景图随对象滚动还是不动

6、背景位置 background-position

设置背景图像的位置

7、背景复合属性 background

五、段落属性

1、单词间隔 word-spacing

2、字符间隔 letter-spacing

3、文字修饰 text-decoration

共5种修饰方式

4、垂直对齐方式 vertical-align

共7中对齐方式：

5、文本转换 text-tranform

转换英文字母的大小写

6、水平对齐 text-align

7、文本缩进 text-indent

html中只能控制整体缩进，css能控制首行缩进及缩进的距离。

8、文本行高 text-height

行间距，行高值可以为长度、倍数或百分比。

9、处理空白 white-space

页面空白的处理方式

10、文字反排 unicode-bidi、direction

两个属性一起使用，设置对象的阅读顺序。

六、外边距与内边距属性

盒子模型由Content（内容）、padding（内边距）、border（边框）和margin（外边框）4部分组成：

1、上边距 margin-top

2、其它边距 margin-bottom、margin-left、margin-right

3、外边距复合 margin

4、顶端内边距 padding-top

5、其它内边距 padding-bottom、padding-right、padding-left

6、内边距复合 padding

七、边框属性

边框有3个属性：边框的样式、边框的宽度和边框的颜色。

1、边框样式 border-style

边框样式取值：

none	默认值，无边框
dotted	点线边框
dashed	虚线边框
solid	实线边框
double	双实线边框
groove	边框具有立体感的沟槽
rigde	边框成脊形
inset	使整个边框凹陷，即在边框内嵌入一个立体边框
outset	使整个边框凸起，即在边框外嵌入一个立体边框

2、边框宽度 border-width

取值范围：

medium--默认宽度

thin--小于默认宽度

thick--大于默认宽度

3、边框颜色 border-color

4、边框复合 border

八、定位属性

控制元素的位置，包括相对定位和绝对定位：

相对定位：允许元素在相对于文档布局的原始位置上进行偏移；

绝对定位：允许元素与原始文档布局分离且任意定位。

1、定位方式 position

2、元素位置 top\right\bottom\left

auto是默认值，长度值包含数字和单位，也可使用百分比来设置。

3、层叠顺序 z-index

设置层的先后顺序和覆盖关系。默认z-index=1，表示在最底层。

4、浮动属性 float

设置文字在某个元素的周围，它能应用于所有的元素。

5、清除属性 clear

指定元素周围是否可以有其它元素浮动

6、可视区域 clip

只显示元素裁切出的区域。

7、层的宽度和高度 width、height

8、超出范围 overflow

设置层内的内容超出层所容纳的范围时的显示方式

9、可见属性 visibility

针对前套层的设置

九、列表

1、列表项目符号和编号 list-style-type

列表项目符号：

disc	默认值，实心圆
circle	空心圆
square	实心方块
decimal	阿拉伯数字
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写字母
upper-alpha	大写字母
none	不适用任何项目符号或编号

2、列表项目图像符号 list-style-image

3、列表项目符号编号缩进 list-style-position

ps：如果一个列表项目的左边距被设置为0，那么项目符号不会被显示，左边距最小设置为30。

4、列表项目符号编号复合 list-style

举例：

注意：当list-style-image和list-style-type都设定时，image优先，除非url指定的图片不能显示。

十、光标属性 cursor

在对象上移动鼠标指针采用的光标形状

光标取值：

default	平台默认光标，通常是一个箭头
hand	竖起一只手指的手型光标
crosshair	简单的十字线光标
text	大写字母I的形状
help	带有问好标记的箭头
wait	等待
e-resize	向东的箭头
s-resize	向南的箭头
w-resize	向西的箭头
n-resize	向北的箭头
ne-resize	向东北的箭头
nw-resize	向西北的箭头
sw-resize	向西南的箭头
se-resize	向东南的箭头
auto	默认值，根据浏览器而定

十一、滤镜

特效处理

1、不透明度 alpha

alpha属性用于设置对象内容的透明度，使图片产生透明渐变效果。

alpha属性参数：

opacity	开始时的透明度，取值范围0~100，默认是0完全透明，100为不透明
finishopacity	结束时的透明度，取值范围0~100
style	设置渐变，0表示无渐变，1为直线渐变，2为圆形渐变，3为矩形渐变
startx	设置透明渐变开始点的水平坐标，默认值是0
starty	设置透明渐变开始点的垂直坐标
finishx	设置透明渐变结束点的水平坐标
finishy	设置透明渐变结束点的垂直坐标

举例：

2、动感模糊 blur

设置对象的动态模糊效果

add：是否显示原始图片

direction：动态模糊的方向，按顺时针方向，以45度为单位进行累计

strength：动态模糊的强度，整数，默认是5个

3、颜色透明处理 chroma

将图片中的某种颜色转换为透明色，产生透明效果。

4、阴影效果 dropShadow

指定的方向和位置上产生阴影效果

5、对象翻转 flipH、flipV

6、发光效果 glow

7、灰度处理 gray

彩色变成黑白

8、反相 invert

将图片的颜色、饱和度以及亮度完全反转过来。

9、x光片效果 xray

10、遮罩效果 mask

像印章一样的效果

11、波形滤镜 wave

波纹扭曲效果

举例：

来自为知笔记(Wiz)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航