css学习笔记

CSS是什么

CSS：层叠样式表：主要是负责页面的样式效果设置。

样式表允许以多种方式规定样式信息，样式信息可以规定在单个html元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

CSS语法

注释：/*注释的内容*/

CSS规则由两个主要的部分构成：选择器（为谁去做美化，选择其中一些或某一个标签），以及一条或多条声明（为它做什么样的美化，具体的美化过程）；

例如;selector {declaration1; declaration2; ... declarationN }

选择器 { 
声明1;
声明2;
声明3;
    …… 
 }
即：
selector {
Color: red； // 声明
size: 20px；
key: value；
----
}

css与html结合使用

1：内联样式、行内样式

在所有的html标签上都有style属性，这个属性就是专门用来书写CSS代码。

使用内联样式书写的css代码，直接作用于该标签。

CSS代码的书写格式：

CSS代码都是有key和value组成的声明。key可以从CSS手册查阅。而value可以由用户根据实际的效果进行调试。

在html标签中使用style属性书写CSS代码，如果是多个CSS属性值，需要在多个属性之间使用分号隔开。

2：内部样式

内联样式可以实现css的样式，但是如果在一个页面中有很多相同的标签都需要同一个样式，在各自的标签内写css肯定不行，效率太低，而且html和css一起使用，看起来很臃肿，没有做到内容与表现相分离，不建议使用。

可以在html文件中直接把CSS代码抽取出来，在head标签中书写style标签，然后在引用到某个html标签上。

3：外部样式

内部样式实现了同一页面中相同标签样式的统一，他是他的作用域仅仅是在一个页面，

如果在一个项目中，多个页面中有相同的标签，并且他们需要相同的CSS效果相同的时候，我们可以把CSS代码单独的抽取到一个独立的CSS文件中。在需要使用CSS代码的文件中引入这个CSS文件即可。

CSS文件中可以不用书写具体的style标签。而直接书写css代码。

引入css方式：

使用link标签引入：

在head标签中可以直接使用link标签引入外部的css文件

注意：link中的属性说明：

rel="stylesheet"表示连接的资源是一个样式表，即就是CSS文件,固定写法

type 表示连接的资源是文本资源，其中放的css代码，默认，可有可无

href表示资源的路径，css文件的地址

4：样式优先级

哪个css样式离标签最近，谁的优先级高，注意：只有发生冲突的时候才会考虑。

css选择器

选择器：表示当前的CSS代码要作用在具体的哪个html标签上。

下面介绍3个常用的选择器

1：标签名选择器

见名思意，就是通过标签的名字，选择最终css代码要作用的标签

Div,span -- 选择所有的div和span

Div span -- 选择的是div下面的所有的span

2：id选择器

在html中，所有标签中都有一个id属性，可以根据这个id的属性值，来确定CSS代码到底要作用在哪个标签上。

id 选择器以 "#" 来定义。要求每一个html标签的id属性值必须要唯一。

语法：

#id属性值{

        css代码

}

注意：html标签中可以书写id属性，要求在html页面上所有的标签的id值不能重复，如果定义重复，虽然不会影响CSS的效果，但是后期学习JavaScript和DOM技术动态根据id获取页面上的标签时就会出现错误。记住：id唯一

3：clss选择器

由于页面上的标签的id一般不会重复，使用id选择器只能给某个标签设置样式，如果有多个标签需要相同的样式，或者不同的标签需要相同的样式，这时我们可以使用html标签中的class属性，这时我们在css代码中就可以根据这个class属性值来选择css代码要作用的html标签。每一个html标签都可以书写class属性。

语法：

.class属性值{

        css代码

}

4：基本选择器的优先级

ID选择器 > 类选择器 > 标签选择器

css字体样式

font-fanily:设置字体类型

font-size：设置字体大小

font-style：设置字体风格

font-weight：设置字体粗细

font：在一个声明中设置所有字体的属性

css文本样式

color：设置文本颜色

text-align：设置元素水平对齐方式

text-indent：设置首行文本缩进

line-height：设置文本行高

text-decoration：设置文本装饰

伪类

指同一个标签根据其不同状态有不同的样式，有冒号表示

静态伪类：只能用于超链接的样式

动态伪类：针对所有标签都适用的样式

背景属性

背景颜色：background-color

像素值：px

水平方向： left、center、right

垂直方向；top、center、bottom

列表样式

list-style：简写属性，用于把所有用于列表的属性设置于一个声明中

list-style-imgae：将图像设置为列表项标志

list-style-position：设置列表中列表项标志的位置

list-style-type：设置列表标志的类型

有序列表和无序列表

无序列表- ul

有序列表- ol