HTML5_03

CSS介绍

1，CSS概述：

CSS指层叠样式表

CSS样式表极大地提高了工作效率

2，CSS基础语法：

a，selector{

property:value

}

例如：h1{color:red; font-size:14px;}

如果属性大于一个的话，属性之间要用分号隔开

如果值大于一个单词，则需要加上引号：

p{font-family:"sans serif";}

CSS高级语法

1，选择器分组：

h1,h2,h3,h4,h5,h6{color:red;}

2，继承：

body{

color:green;

}

CSS派生选择器：

1，派生选择器：

通过依据元素在其位置的上下文关系来定义定义样式

例子：
<p><strong>你好</strong></p>

<ul>

<li><strong>你好2</strong></li>

</ul>

CSS：

li strong{

color:red;

}

strong{

color:black;

}

CSSid选择器：
1，id选择器：

id选择器可以为标有id的HTML元素指定特定的样式

id选择器以“#”来定义

2，id选择器和派生选择器：

目前比较常用的方式是id选择器常常用于建立派生选择器

<p id="pid">hello pid</p>

css:

#pid{

color:red;

}

CSS类选择器：

1，类选择器：

类选择器以一个点显示

2，class也可以用作派生选择器

<p class="pclass">这是一个class效果</p>

<div class="divclass">

hello Div.

</div>

.pclass{

color:red;

}

.divclass{

color:black;

}

CSS属性选择器
1，属性选择器：

对带有指定属性的HTML元素设置样式

2，属性和值选择器：

<style type="text/css">

[title]{

color:red;

}

[title=te]{

color:bule;

}

</style>

<p title="t">属性选择器</p>

<p title="te">属性和值选择器</p>

CSS背景

1，背景：

CSS允许应用纯色作为背景，也允许使用背景图像来创建相当复杂的效果

属性   描述

background-attachment背景图像是否固定或者随着页面的其余部分滚动

background-color设置元素的背景颜色

background-image把图片设置为背景

background-position设置背景图片的起始位置

background-repeat设置背景图片是否及如何重复

background-image:url("bg.jpg");

background-position:right top;

/*right的意思是right和center两个的意思*/

还可以用数字和百分数来确定它的具体位置

background-attachment:fixed;这个的意思就是背景图片是固定的，当页面滚动的时候背景图片是不会跟着字的滚动来上下动的

CSS3背景

1，CSS3背景

  background-size：规定背景图片的尺寸

background-origin：规定背景图片的定位区域

background-clip：规定背景的绘制区域

CSS文本：

1，CSS文本

CSS文本属性可定义文本的外观

通过文本属性，可以改变文本的颜色，字符间距，对其文本，装饰文本，对文本缩进

属性 描述

color 文本颜色

directtion 文本方向

line-height行高

letter-spacing字符间距

text-align 对齐元素中的文本

text-decoration向文本添加修饰

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

text-transform元素中的字母

unicode-bidi设置文本方向

white-space元素中空白的处理方式

word-spacing字间距

 

1，CSS3文本效果：

text-shadow：向文本添加阴影

word-wrap：规定文本的换行规则

CSS的字体：

CSS字体的属性定义文本的字体系列、大小、加粗、风格和变形

属性 描述

font-family设置字体系列

font-size 设置字体的尺寸

font-style 设置字体的风格

font-variant以小型大写字体或正常字体显示文本

font-weight设置字体的粗细

CSS的链接

1，CSS链接的四种状态

a:link 普通的、未被访问的链接

a:visited 用户已经访问的链接

a:hover 鼠标指针位于链接的上方

a:active 链接被点击的时刻

2，常见的链接的样式：
text-decoration属性大多用于去掉链接中的下划线

3，设置背景颜色：

background-color

CSS列表

1，CSS列表：

CSS列表属性允许你放置、改变、列表标志，或者将图像作为列表项标志

属性 描述

list-style 简写列表项

list-style-image列表项图像

list-style-position列表标志位置

list-style-type列表类型

CSS表格

1，CSS表格

CSS表格属性可以帮助我们极大的改善表格的外观

2，表格边框

3，折叠边框

4，表格宽高

5，表格文本对齐

6，表格内边距

7，表格颜色

CSS的轮廓

1，轮廓的主要是用来突出元素的作用

属性 描述

outline 设置轮廓的属性

outline-color设置轮廓的颜色

outline-style设置轮廓的样式

outline-width设置轮廓的宽度