学习web第二周总结

在上一周学习完了HTML的知识点：列表（<ol>,<ul>,<li>)，表格(<table>,<tr>,<th>,<td><th>)，链接(<a>)，图片(<imag>)，表单(<from>)，框架(<iframe>等重要知识点，这一周我进入了css的学习。

CSS我认为主要的作用为为HTML加入更多的渲染效果使得web页面变得更加丰富多彩

一：CSS的语法

CSS的语法如下

其中的table为前html中的表格标签这里为选择器。background-color与border-style表示为属性分别为背景颜色属性与边框类型属性，其中的pink与dotted表示为值，分别为粉红与圆点。所以CSS       语法主要为：选择器{属性：值....}若要加入多个属性得用“；”分隔他们。

二：引用CSS

引用CSS有三种方法分别为外部样式表，内部样式表，内联样式表。

外部样式表要与<link>标签配合使用；

上图为CSS文件的内容，里面修饰了HTML文件里的<table>,<p>,<h1>,<ul>,<table>这些标签里面的属性background-color：背景颜色，border-style：边框类型，text-align：文本对齐方式，text-transform：修饰文本字母，text-shadow：设置文本阴影，text-decoration：添加文本修饰，list-style-type：列表项标志类型，margin:外边距，padding：内边距，width:宽，height:高等修饰内容

引用时

href表示CSS文件的相对位置或绝对位置

内部样式：

要在HTML的头部（head)加入<style>标签让后在运用CSS的语法进行修饰

里面的.style：类选择器，#lk：id选择器，style为类选择器名名字，lk为id选择器的名字

运用时

<td>标签中的class="style"表示引用了类选择器里面的修饰

这里的<td>标签中的id="lk"表示引用id选择器里面的修饰

类选择器，id选择器都可以在外部样式表与内部样式表里面运用；

内联样式：

之间在style=""里面加入属性与值，style对应的标签即可获得改修饰效果。

实例

运用CSS修饰前

运用CSS修饰后

三：CSS的分组与嵌套

这里面就充分的解释了选择器里面的嵌套运用：

p{ }: 为所有 p 元素指定一个样式。

.marked{ }: 为所有 class="marked" 的元素指定一个样式。

.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。

p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

四：本周所学CSS属性与值汇总

这一周我还学习了CSS里面还有许多的属性与对应的值：

文本

Direction:

设置文本方向

Ltr:文本从左到右（默认）

Rtl:文本从右到左

Inherit:

Text-align:

对齐元素中的文本

Left：左边

Right：右边

Center：中间

Justify：实现两端对齐

inherit

Text-decoration:

向文本添加修饰

None:定义标准的文本（默认）

Underline:定义文本下的一条线

Overline:定义文本上的一条线

Line-through:定义穿过文本下的一条线

Blink:定义闪烁的文本

Inherit

Text-indent:

缩进元素中的文本

Text-shadow:

设置文本阴影

h-shadow:水平阴影位置（必需）

v-shadow:垂直阴影的位置（必需）

blur:模糊的距离

color:阴影颜色

Text-transform

控制元素中的字母

None:标准的字母文本

Capitalize:文本中的每个单词以大写字母开头

Uppercase:定义仅有大写字母

Lowercase:定义仅有小写字母

inherit

Letter-spacing

设置字符间距

Normal:规定字符间没有额外空间（默认）

Length:定义字符间的固定空间（允许负值）

inherit

Word-spacing

设置字间距

Normal:定义单词间的标准空间（默认）

Length:定义单词间的固定空间（允许负值）

inherit

White-space

设置元素中空白的处理方式

Normal:空白被浏览器忽略(默认)

Nowrap:文本不会换行，知道遇到<br>标签

Pre:空白会被浏览器保留

Pre-wrap:保留空白符序列，但正常进行换行

Pre-line:合并空白符序列，但保留换行符

Inherit:

Line-height

设置行高

Normal:设置合理的行间距（默认）

Number:设置数字，此数字会与当前的字体尺寸相乘来设置行间距

Length:设置固定的行间距

Inherit

%

Unicode-bidi(与direction属性一起使用)

设置返回文本是否重写

Normal:不适用附加的嵌入层面（默认）

Embed:创建一个附加的嵌入层面

Bidi-override:创建一个附加的嵌入层面。重新排序取决于direction

Initial

inherit

Vertical-align

设置元素的垂直对齐

Baseline:元素放置在父元素的基线上

Sub:垂直对齐文本下标

Super:垂直对齐文本上标

Top:把元素的顶端与行中的最高元素的顶端对齐

Text-top:把元素的顶端与父元素字体的顶端对齐

Middle:把此元素放置在父元素的中部

Bottom:使元素及其后代元素的底部与整行的底部对齐

Text-bottom:把元素的底端与父元素字体的底端对齐

Length:将元素升高或降低指定的高度，可以是负数

inherit

%

Font-size:字体尺寸

Color:颜色

Margin:外边距

Background（简写属性时的顺序）

Background-color:

背景颜色

Background-image:

背景图片

Background-repeat:

背景是否及如何重复

Background-attachment;

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

Scroll:背景图片随着页面的滚动而滚动（默认）

Fixed：背景图片不会随着页面的滚动而滚动

Local：背景图片会随着元素内容的滚动而滚动

Initial（css的关键字）：设置改属性的默认值

Inherit（css的关键字）：指定background-attachmen的设置应该从父元素继承

Background-position:

背景图像的启示位置

这些都是我在这一周所学到的属性与值进行了简单整理，前面三个是我个人绝对非常重要的部分。

这就是我周的学习汇报。