CSS知识总结

CSS简介

1.css是层叠样式表，一种用来表示HTML文档样式的语言。
2.外部样式表储存在CSS文件中
3.CSS样式表可以提高工作效率，因为通过编辑CSS文档，可以改变站点中的页面布局和外观。

CSS语法

1.css规则由两个主要部分构成
（1)选择器：需要改变的样式的HTML元素
（2）一条或者多条声明：每条声明由一个属性和一个值组成。
（3）格式实例：

 P{
            color：blue;
            text-align:center;
   }

2.css注释：以"/*“开始，以”*/"结束

CSS分类

• 内部样式表：写在标签里
  （1）例子：<p style="color:blue；"></p>

  说明：该例子表示是将段落的文字颜色设置为蓝色。
  

  （2）一般在为单个页面设置样式时使用，使用<style></style>标签定义。

• 外部样式表：

  （1）创建方法:首先创建一个css文件，接着引用到要用的页面。
  引用方式：
  Link样式表式： <link rel=”stylesheet” type=”text/css” href=”style.css”(href表示路径)>

选择器

1.若想在HTML元素中设置css样式，需要设置选择器。
2.class类选择器：
（1）该选择器用于描述一组元素的样式，可以在多个元素中使用
（2）在css中类选择器以一个点.号显示
（3）例子：.suxuehui{ text-align:center;}
3.id选择器：
（1）可以为标有id的html元素指定特定的样式
（2）css中id选择器以#来定义
（3）例子：#suxuehui{ text-align:center;}
(4)id属性尽量不要以数字开头，同时id属性只能每个html文档中出现一次。

CSS背景设置

1.背景颜色：
（1）利用background—color定义
（2）颜色表示一般有三种方法表示。分别是十六进制、RGB、颜色名称
（3）例子：

body{background—color:#000;}

2.背景图像
（1）利用background—image定义
（2）例子：

 body{background—image:url('big.jpg');}

3.背景图像水平或者垂直平铺：利用background-repeat属性
4.背景图片位置：利用background-position改变图像在背景中的位置

CSS Text

1.文本颜色：可以用text-color来定义
2.文本对齐方式：利用text——align来定义，例如将文本设置居中 h1{text-align:center;}
3.文本装饰：利用text-decoration来定义，例如给文本加下划线，h2{text-decoration:underline;}
4.文本间隔：可以利用word-spacing来改变间隔

CSS 字体

1.字体类型:可以用font-family定义，（若字体名称超过一个字，需要用引号）
2.字体样式：可以用font-style定义，（样式指的是类似斜体、等）
3.字体大小：可以用font-size来定义

CSS列表

1.CSS列表属性可以放置、改变列表项的标志，或者将图像作为列表项标志。

（1）list-style：简写属性。用于把所有用于列表的属性设置在一个声明中。

（2）list-style-image：将图像设置为列表项的标志。

（3）URL：图像的路径。

（4）none：默认。无图形被显示。

（5）list-style-position：设置列表中列表项标志的位置。

（6）inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。

（7）outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外。且环绕文本不根据标记对齐。

（8）list-style-type：设置列表项标志的类型。

（9）disc：默认。标记是实心圆。

（10）none：无标记。

（11）circle：标记为空心圆。

（12）square：标记为方块。

（13）decimal：标记为数字。

CSS内边距和外边距

1.内边距： 边框于内容之间的距离。

2.外边距：边框于边框之间的距离。

3.CSS 内边距属性
（1）padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
（2）padding-bottom 设置元素的下内边距。
（3）padding-left 设置元素的左内边距。
（4）padding-right 设置元素的右内边距。
（5）padding-top 设置元素的上内边距。
4.CSS 外边距属性
（1）margin 简写属性。在一个声明中设置所有外边距属性。
（2）margin-bottom 设置元素的下外边距。
（3）margin-left 设置元素的左外边距。
（4）margin-right 设置元素的右外边距。
（5）margin-top 设置元素的上外边距。

边框与边距

1.border-bottom设置底部边框。

2.border-radius设置边框圆角。

3.border-left设置左边边框。

4.padding:**px设置边距。