css样式

什么是CSS？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS和HTML和JavaScript的关系

HTML 结构层负责从语义的角度搭建页面结构CSS 样式层    负责从 审美的角度美化页JavaScript 行为层负责从交互的角度提升用户体验

2.2 CSS的基本语法

选择器{属性:值;属性:值;…….}

属性	解释
Width:20px;	宽
Height:20px;	高
Background-color:red;	背景颜色
font-size:24px;	文字大小
text-align:left | center| right	内容的水平对齐方式
text-indent:2em;	首行缩进
Color:red;	文字颜色

选择器：

1. 标签选择器

2. 类选择器(重点)

3. ID选择器

4. 通配符选择器

1. 标签选择器：

标签{属性：值;}

作用：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。

 2.类选择器

  写法 .类名{

属性：值;

属性：值;       

         }

类名：自定义的

类选择器命名规范：

1.      不能用纯数字或者数字开头来定义类名

2.      不能使用特殊符号或者开头或者(_)定义类名

3.      不建议使用汉字来定义类名

4.      不推荐使用属性或者属性值来定义类名

3.ID选择器

#自定义名称 {

     属性：值;

     属性：值;

    }

注意事项：在一个 HTML文档中，ID 选择器会使用一次，而且仅一次。

一个标签可以同时调用类选择和ID选择器

4.通配符选择器

*{属性：值}

特点：给所有的标签都使用相同的样式。

不推荐使用，增加浏览器和服务器压力。

3.2 复合选择器

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。

3.2.1 交集选择器

语法： 标签+类（ID）选择器名称{

                   属性:值;

                   属性:值;

          }

特点：即要满足选择了标签还要满足选择类(ID)选择器。

3.2.2 后代选择器(重点)

语法：选择器+空格+选择器+选择器{

                   属性:值;

属性:值;

}

后代：意思就是标签必须有父子关系，也就是嵌套关系。

后代的子元素：无限制各代的。

3.2.3 子代选择器

语法 选择器>选择器{

                   属性:值;

                   属性:值;

}

选中下一代元素

3.2.4 并集选择器

语法： 选择器+选择器+选择器….{

                   属性:值;

                   属性:值;

}

如何创建CSS样式表，有三种方式

第一种：外部样式表(主流)

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<link rel="stylesheet" type="text/css" href="css/div.css" />

第二种：内部样式表(极其少)

      <style type="text/css">

         div{

            color: red;

         }

      </style>

第三种：内连样式（绝对不会使用的）

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

a:link {color:#FF0000;}     未被访问的链接

a:visited{color:#00FF00;}  已被访问的链接

a:hover{color:#FF00FF;} 鼠标指针移动到链接上

a:active{color:#0000FF;}   正在被点击的链接

CSS 字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

CSS 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

CSS 背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

10 CSS的列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。