CSS简要内容

 

1. 简介

用于布局与美化网页(颜色,字体)

CSS语言是一种标记语言,不需编译,可直接由浏览器执行

大小写不敏感

CSS定义由选择符、属性、属性取值组成

格式:selector{property:value}

注释:/*CSS注释*/

长度单位:

相对长度单位:px像素,em相对于当前对象内文本的字体尺寸,%百分比

绝对长度单位:pt点,cm厘米,mm毫米

颜色值:#rrggbb#rgbrgbxxx),rgbxxx),x0~100的整数值

css指定URL地址方式:

body{background-image:url(……)}

2. html文档中放置css的几种方式

2.1 内联引用(也叫行内引用)

就是把css样式直接作用在html标签中

<p style=”font-size:10px;color:#ffffff”>

使用css内联引用表现段落

</p>

2.2 内部引用(也叫内嵌式)

使用style标签直接把css文件中的内容直接加载到html文档内部的<head>标签中

特点是适合用于一个html文档具有独一无二的样式时

2.3 外部引用

使用了外接的css文件,一般的浏览器都有缓存功能,所以用户不用每次都下载此css文件

相对于内部引用和内联引用来说是高效的,是节省带宽的。

实现外部引用有两种方式:

使用link标签引用css

使用@import导入css

多重样式表的叠加:如果在同一个选择器上使用几个不同的样式表时,这个属性值将会叠加几个样式表,遇到冲突的地方会以最后定义的为准。

3. css选择器(选择符)

3.1 html(标签)选择符

html标签,用来改变一个指定标签的样式,任何html元素都可以是一个css的选择符。

语法:html标签名{属性:值}

P{text-indent:3em}   /*当中的选择符是p*/

3.2 类选择符

匹配文档中元素Eclass属性的属性值为classname的元素

语法:标记名.类名{属性:值}.类名{属性:值}

类选择符的定义需要有.符号

.note{font-size:small}  /*note的类可以被用于任何元素*/

3.3 ID选择符

匹配文档中元素Eid属性的属性值为idname的元素

语法:ID名称{属性:值}

定义需要有#符号

#main{text-indent:3em;}   /*ID名称main前加上一个#*/

id属性的特殊之处在于,一个文档中只能有一个元素使用一个ID选择符(与class属性正好相反),id属性可用来单一地标识一个元素。

3.4 关联选择符

也叫包含选择符,可单独对某种元素包含关系定义的样式表,元素1包含元素2,这种方式只对在元素1的元素2定义,对单独的元素1或元素2无定义

语法:选择符选择符……{属性:值}

如:table a {font-size:12px}

3.5 组合选择符

也叫选择符组,可把相同属性和值的选择符组合起来书写,用逗号将选择符分开,可减少样式重复定义。

语法:选择符1,选择符2,……{属性:值}

如:h1,h2,h3,h4,h5,h6{color:green}

3.6 伪元素选择符

指对同一个html元素不同状态的一种定义方式

语法:标签:伪元素{属性:值}

例:alink{……}   /*未访问的链接*/

avisited{……}   /*已访问的链接*/

ahovor{……}   /*鼠标在链接上*/

aactive{……}   /*激活链接*/

提示:ahovor必须置于alinkavisited之后才有效;aactive必须置于ahovor之后才有效

4. 常见属性和值

4.1 字体和颜色

font---简写,把所有针对字体的属性设置在声明中

font-family字体系列   font----size字体尺寸   font----style字体风格 ……

4.2 文本属性

color---文本颜色

text-align  对齐元素中的文本

text-indent   缩进元素中文本的首行

text-height   设置行高

text-decoration   向文本添加修饰,如underline下划线

4.3 背景属性

background   简写,将背景属性设置在一个声明中

background-colorbackground-imagebackground-repeat(设置是否重复,repeatrepeat-xrepeat-yno-repeat)……

可简写为一行:

background:<背景颜色>||<背景图片>||<背景重复>||<背景附件>||<背景位置>

4.4 边框属性

每个内容或元素外边都可以有一个边框,分topbottomleftright

color(颜色),style(样式,一定要取值)width(宽度)

style取值none无样式 hidden除了同表格边框发生冲突的时候,其他同none

dotted点划线 dashed虚线 solid实线 double双线 groove槽状 ridge脊状与groove相反

inset凹陷 outset凸出,与inset相反

4.5 列表属性

list-style-type 设定引导列表项的符号类型,可设置多种符号类型,值为disccirclesquare

list-style-image 使用图像作为定制列表符号

list-style-position 决定列表项目缩进的程度

三.DIV+CSS网页标准化布局

1. DIV+CSS对页面布局的优势

表现与内容相分离;代码简洁,提高页面浏览速度;易于维护和改版;提高搜索引擎对网页的索引效率

2. “无意义”的HTML元素divspan

divspan标签没有任何内容上的意义,但与CSS结合起来后应用十分广泛。它们被用来组合成一大块HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来。span是内联的,用在一小块内联HTML中,而div是块级的(等同于其前后有断行)。

3. W3C盒子模型

 

4. 与页面布局有关的CSS属性

position  用于定义一个元素是否absolute(绝对),relative(相对)

topleft 层距离顶点纵、横坐标的距离

text-alignline-height

z-index  决定层的先后顺序和覆盖关系

display 显示属性,设定block值以块状显示;设定inline值则内联显示;设定none值关闭指定元素及其子元素的显示

visibility 针对嵌套层的设置,inherit父层可见子层可见,visible父层是否可见子层都可见,hidden父层是否可见子层都隐藏

overflow 设置层内的内容超过曾所能容纳的范围处理方式。常用hidden,隐藏超出层大小的内容

float 设置区块漂浮属性,分leftright

clear 清除属性指定一个元素是否允许有元素漂浮在它旁边,值有leftrightnone(缺省值)、both

5. 盒子区块框的定位

相对定位a:hovor{

position:relative;

top:1px;       /*设置元素使用相对定位*/

left:1px;

}

绝对定位(不方便更改,少用)

 

posted @ 2015-10-12 22:05  慕言与君拂  阅读(184)  评论(0编辑  收藏  举报