一、css复习

1、css简介

css是层叠样式表,主要用来设置网页的样式,排版,布局、美化页面

2、css规则

css语句都是由两个部分组成,选择器和一条或者多条声明css样式的声明语句构成;然后每一条声明都是由属性和值构成,属性是你希望设置哪一个样式,值是属性的值,每一个属性都有一个值,属性和值之间用冒号分开

3、css颜色值

1、使用英文单词red,green,blue等等

2、使用16进制的颜色值:#fff

3、使用rgb值:当使用rgb百分比的时候,即使当值为0,也要写百分比符号。其他情况下,不用写,

p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); }

4、css样式表创建

1、外部样式表:当一个样式需要应用到很多页面时,外部样式表就是一个理想的选择,通过link标签的href属性引入。

2、内部样式表:当某一个页面需要特殊的样式时,内部样式表就是一个理想的选择,在head标签内部使用style标签定义内部样式表

3、内联样式:由于内联样式将内容和表现混合了在一起,结构和表现没有分离,故慎用这种方式。使用内敛样式,要在相应的标签里面写上style属性。

这是一个段落。

5、css背景

1、background-color:设置元素的背景颜色,属性值有三个。

2、background-image:设置背景图片,属性值有三个。

3、background-repeat设置背景图像是否及如何重复。

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

5、background-position设置背景图像的起始位置。

6、background简写属性,作用是将背景属性设置在一个声明中。

body {background:#ffffff url('img_tree.png') no-repeat right top;}

6、css Text文本

1、color设置文本颜色

2、direction设置文本方向。

3、letter-spacing设置字符间距

4、line-height设置行高

5、text-align对齐元素中的文本

6、text-decoration向文本添加修饰

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

8、text-shadow设置文本阴影,text-shadow: h-shadow v-shadow blur color;

9、text-transform 属性控制文本的大小写。

10、vertical-align属性设置一个元素的垂直对齐。

11、white-space属性指定元素内的空白怎样处理。

12、word-spacing属性增加或减少字与字之间的空白。

7、css Fonts字体

1、font-family指定文本的字体系列

2、font-size属性设置字体大小。

3、font-style属性指定文本的字体样式。

4、font-weight 属性设置文本的粗细

5、font 简写属性在一个声明中设置所有字体属性。可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。

8、css链接(link)

9、css列表样式(ul)

1、list-style-image 属性使用图像来替换列表项的标记。

2、list-style-position属性指示如何相对于对象的内容绘制列表项标记。

3、list-style-type 属性设置列表项标记的类型。

4、list-style 简写属性在一个声明中设置所有的列表属性。可以设置的属性(按顺序): list-style-type, list-style-position, list-style-image.

可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

10、css Table表格

1、指定CSS表格边框,使用border属性。表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框,使用 border-collapse属性。

2、border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:

11、css盒子模型

1、所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

12、css Border边框

border-style属性

13、css 轮廓(outline)属性

1、轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

2、outline-color属性指定轮廓颜色。

3、outline-style属性指定outline的样式。

4、outline-width指定轮廓的宽度。

5、outline简写属性在一个声明中设置所有的轮廓属性。可以设置的属性分别是(按顺序):outline-color, outline-style, outline-width。如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

14、CSS Margin(外边距)

1、CSS Margin(外边距)属性定义元素周围的空间。CSS Margin属性接受任何长度单位、百分数值甚至负值。margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的。margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。

15、CSS Padding(填充)

1、CSS Padding(填充)属性定义元素边框与元素内容之间的空间。

16、CSS 尺寸 (Dimension)

1、CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。

2、height属性设置元素的高度。

3、max-height 属性设置元素的最大高度。注意:max-height属性不包括填充,边框,或页边距!

4、max-width属性设置元素的最大宽度。

5、min-height 属性设置元素的最低高度。

6、min-width属性设置元素的最小宽度。

17、CSS Display(显示) 与 Visibility(可见性)

1、CSS display 属性和 visibility属性都可以用来隐藏某个元素,但是这两个属性有不同的定义。display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。

2、隐藏元素 - display:none或visibility:hidden。隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

18、CSS Positioning(定位)

1、CSS position 属性,允许您将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

2、Static 定位

HTML元素的默认值,即没有定位,元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

3、Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

4、Relative 定位

相对定位元素的定位是相对其正常位置。

5、Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:

19、CSS overflow 属性

1、overflow属性指定如果内容溢出一个元素的框,会发生什么。

20、CSS z-index 属性

1、z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

你可能感兴趣的:(一、css复习)