CSS基础知识
2017-04-07 本文已影响0人
亮亮叔家的小笔笔
CSS概念
动态网页分为脚本语言、支持动态效果的浏览器和CSS样式表三个部分。
- 样式表是专门描述结构文档表现方式的文档，它既可以描述文档如何在屏幕上显示，也可以描述文档的打印效果，甚至声音效果。
- CSS就是Cascading Style Sheets的缩写，即“层叠样式表”，简称样式表。
CSS声明方法
CSS声明方法主要分为三种：基本声明、集体声明和分项声明。
- 基本声明
格式：
标记{性质名称：设定值}
- 集体声明
格式：
标记A，标记B，标记C，...
{性质名称1：设定值1；性质名称2：设定值2；...}
- 分项声明
如果对同样一个性质作了重复的声明，则以“后声明”的值为准。
格式：
标记A{性质名称1：设定值1；性质名称2：设定值2；性质名称3：设定值3；}
CSS种类
按照样式表的插入形式可以将CSS分为三种： 内嵌样式（Inline Style）、 内部样式表（Internal Style Sheet）、外部样式表（External Style Sheet）。
- 内嵌样式
内嵌样式是将Style属性值直接加在超文本标记内。
格式：<标记 Style = “”性质1：设定值1；性质2：设定值2；...“”>
- 内部样式表
内部样式表将样式规则卸载<STYLE></STYLE>标签之间，分为两步：
(1) 在html文件头(head)加入：<STYLE TYPE ="text/css">...</STYLE>
(2) 在文档体(body)加入<class = ...>即可。
- 外部样式表
在一个外部样式表文档内定义网页的外观风貌，所有链接文档的网页都会反映出相同的外观。外部样式表的引入方式：
(1) 使用link引入
格式：<link REL="styleheet" TYPE="text/css" HERF="home.css">
通常将link标签写在网页的<HEAD></HEAD>部分中。
(2) 使用@import引入，类似link用法，但必须放在<Style></Style>中。
格式：
<Style type = "text/css">
@import url(home.css)；[分号必须存在]
</Style>
外部样式表可以在任何编辑器中编辑，只是文件中不能包含任何的html标签。样式表应该以css为扩展名来保存。
CSS语法
CSS的定义由三个部分组成：选择符、属性和属性的取值。
基本格式：selector{property：value}
- 选择符
任何HTML元素都可以是一个CSS选择符，如body/p/table等。
例如：body{color:red}这样做的效果是是页面中的文字为红色。
如果属性的值由多个单词组成，不许在值上加“”
如果需要对一个选择符指定多个属性，则需使用分号将所有的属性和值分开。
选择符组是指将相同属性和值的选择符组合起来，用逗号将选择符分隔开。
例如：p,table{font-size:9pt} - 类选择符
在定义类选择符时，需要在定义类的名称前面加上一个点号。 - 伪类
伪类作为一种特殊的类选择符，其最大的用处就是使链接在不同状态下具有不同的样式效果。
伪类的语法是在选择符的原有的语法上加上一个伪类。格式如下：
slector:pseudo-class{proerty:value}
即（选择符：伪类{属性：值} 或者 选择符.类：伪元素{属性：值}）
在CSS定义中，a：hover必须被置于a:link和a:visited之后才是有效的。同时，a:active必须被置于a:hover之后也才是有效的。伪类名称对大小写不敏感。
- 伪元素
伪元素指元素的一部分，经常应用于表示段落的第一个字母等场合。
1.首行伪元素
CSS将其作为首行伪元素，可以用于任何块极元素（P、H等）
2.首个字母伪元素
CSS将其作为首个字母伪元素，首个字母伪元素可以用于任何块级元素。 - ID选择符
在HTML页面中，页面元素可以使用ＩＤ选择符来标识。定义ID选择符在ID名称前面加一个“”#“”号，有两种应用：
1.在“#”前面指定标记名，只能应用于指定标记中具有此ＩＤ的元素。
2.以“#”开头，可应用于所有具有此ID的元素。
ID属性只能在每个HTML文件中出现一次。
- CSS继承
一般情况下，嵌套的选择符会继承外层选择符指定的属性值。
继承规则：、ID样式、类别样式、标记样式。
1.外部的元素样式会保留下来继承给该元素。
2.当样式表继承遇到冲突时，以最后定义的样式为准。
3.不同的选择符定义相同的元素时，其优先级次序依次从高到低为行内样式，除非使用！important改变提升某样式的优先权。 - 注释
常用CSS属性
- 字体属性
CSS字体属性允许改变HTML中字体的种类、粗细、尺寸以及样式。
| 属性 | 说明 | 属性值 |
|---|---|---|
| color | 字体颜色属性 | 颜色值或颜色名称 |
| font-family | 字体名称属性 | arial/tahoma/courier等 |
| font-size | 字体大小属性 | 最常用的单位是pt和px |
| font-style | 字体风格属性 | normal(缺省值)、italic、oblique都是斜体显示 |
| font-weight | 字体粗细属性 | normal(缺省值)和bold |
- 文本属性
CSS文本属性用来控制文本的外观。文本属性可以改变文本的颜色，增加或减少文本中的字符间距，排列、装饰文本。
| 属性 | 说明 | 属性值 |
|---|---|---|
| direction | 设置文本方向 | ltr、rtl |
| text-align | 设定文本的对齐方式 | left(居左，缺省值)、right(居右)、center(居中)、justify(两端对齐) |
| text-decoration | 文本修饰属性 | none(无，缺省值)、underline(下划线)、overline(上划线)、lint-through(中划线) |
| text-indent | 文本缩进属性，设定文本首行缩进 | 长度可以用绝对单位，也可以用百分比 |
| text-height | 设定每行之间的距离 | normal(缺省值)、length(长度)、percentagr(百分比) |
| text-transfrom | 控制元素中的字母 | None、capitaliza、uppercase、lowercase |
- 颜色和背景属性
CSS背景属性允许控制HTML元素的背景颜色，可以将图像设置为网页背景等。
| 属性 | 说明 | 属性值 |
|---|---|---|
| color | 设定前景颜色 | 十六进制颜色值或者颜色名称 |
| background-color | 设定背景颜色 | 十六进制颜色值或者颜色名称 |
| visibility | 设定可视度 | visible:显示；hidden:不显示；inherit:以父元素可视度决定 |
| background-image | 设定背景图形 | none:无背景图；url:使用绝对或相对地址指定背景图像 |
| background-repeat | 设定背景重复性 | repeat:重复；repeat-x:水平方向重复；repeat-y:垂直方向重复；no-repeat:不重复 |
| background-attachment | 设定图片是否跟内容滚动 | fixed:附着；scroll:不附着 |
| background-position | 设定背景图片的最初位置 | top left、top center、top right、cente left、center center、center right、bottom left、bottom center、bottom right、x-% y-%、x-pos y-pos |
| background | 设定背景的相关属性，将背景属性设置在一个声明中 | background-color、background-image、background-repeat、background-attachment、background-position |
- 容器属性
CSS把HTML中<somesign>...</somesign>的部分称为容器（BOX）.
BOX有三种属性：边框属性、填充距属性和边距属性。
1.边框属性
CSS边框属性允许规定元素边框的样式和颜色。在HTML中使用table来创建文本周围的边框，而使用CSS边框属性，不但可以创建出效果出色的边框，而且可以应用于任何元素。
2.边距属性(margin)
CSS边距属性用于元素周围的空间，可以对上下左右边距进行改变。
3.填充距属性
CSS填充距属性定义了元素边框和元素内容之间的空白。 - 定位属性
主要对页面的布局和控制进行定义。
1.绝对定位
绝对定位能够精确地定位要素在页面的独立位置，而不去考虑页面的其他要素的定位设置。
如果元素呗定义为绝对定位属性，则其位置将从IE浏览器左上角的0点开始计算。
2.相对定位
相对定位是指元素在相对于文档布局的原始位置上进行偏移，即所定位的要素位置相对于在文件中所分配的位置。这里所指的移动和padding或者margin是不一样的，padding和margin是元素本身的一种边距和填充距，而并不是真正的移动，但是，被标记为relative的元素是真正的移动，所产生的移动距离是从margin的外围到父级标签内侧之间的一段。 - 列表样式属性
列表样式包括列表符号、图形符号、列表位置三部分。
1.列表符号
list-style-style属性
2.图形符号
list-style-image:url;
3.列表位置
list-style-position:参数
.inside:在BOX模型内部显示
.outside:在BOX模型外部显示 - 鼠标属性(Cursor)
CSS可以改变鼠标属性，当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。 - 媒体属性
@media规则可以在相同的样式表中使用不同的样式规则来针对不同的媒介。
CSS 滤镜
style："filter:filename(fpara1,fpara2...)"
CSS滤镜属性使得可视化的滤镜和转换效果应用于一个标准的HTML元素（如图片、文本容器等），以实现特殊的艺术效果。
CSS滤镜属性
1.alpha滤镜：设置透明层次
格式：style："filter:alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
2.blur滤镜：创建高速移动效果，即模糊效果
格式：
Style="filter:blur(Add=add,Direction=direction,Strength=strength)"
3.DropShadow滤镜：创建对象的固定影子
格式：
style:"filter:DropShadow(Color=color,OffX= Offx,OffY=offy,Positive=positive)"
4.FlipH和FlipV滤镜：创建水平或垂直镜像图片
格式：
{filter:FlipH},{filter:FlipV}
5.Glow滤镜：使图片的轮廓产生光辉
格式：
style="filter:Glow(Color=color,Strength=strength)"
6.Gray/Invert/Xray滤镜：把图片灰色化、反色、是对象变得向背X光照射一样
格式：
{fliter:gray},{filter:invert},{filter:xray}
7.Shadow滤镜：创建偏移固定影子
格式：
{filter:shadow(color=color,direction=diction)}
8.Chroma滤镜：设置图片中的某个颜色为透明
9.Mask滤镜：为对象建立一个覆盖于表面的膜，效果就好像是在用有色眼镜看物体一样
格式：
Filter:mask(color=颜色)
10.Wave滤镜
Wave属性可以把对象按照垂直的波纹样式打乱。
格式：
filter:Wave(Add=true(false),freq=频率,lightstrength=增强光效，phase=偏移量,strength=强度)
