01-css

css

1.css简介

1,什么是css?层叠样式表

样式表:有很多的属性和属性值,来设置内容样式

层叠:一层一层的,样式的优先级.

优先级:最终以谁的样式为准

使用css目的是:把挖网页的内容和样式进行分离,利于代码的维护.

想要使用css,不能单独使用,要和html结合使用

css和html如何结合使用?

2,css和html的结合方式

1,css和html有四种结合方式

第一种: 使用html标签里面的属性 style = “css的代码”

代码

<div style = "background-color:red;color:blue">

第二种:使用html的标签

<style type = "text/css">

css的代码;

</style>

代码

[code]<style type = "text/css">

div {

background-color:red;

color:black;

}

</style>

第三种:使用html标签实现 link,写在head里面

首先创建css文件,在scc文件里面写css代码

在html中使用link标签引入css文件

代码

<lint rel = "stylesheet" type = "text/css" href = "1.css"/>

第四种:使用html的style标签,在标签里面使用语句样式操作

首先创建css文件,在css文件里面写css代码

写style标签,在标签里面 @import url(css路径);

3,css选择器

1,css优先级

在一般情况下,优先级是后加载的优先级高

2,格式规范: 属性名称1:属性值1;属性名称2:属性值2;

3,选择器: 作用在哪个标签上(要对哪个标签里面的内容进行操作)

css有三个基本选择器

1:标签选择器

使用标签名称作为选择器

div{

background-color:red;

}

2:class选择器

每个html标签上面都有一个属性class,通过设置class属性的值改变标签属性

.haha {

background-color:red

}

3:id选择器

每个html标签都有一个id属性,通过设置id的属性值

#hehe {

background-color:green;

}

4,选择器的优先级

style > id选择器 > class选择器 > 标签选择器

4,css的扩展选择器

1,关联选择器

设置嵌套标签的样式

div p {

background-color:red;

}

2,组合选择器

设置不同的标签具有相同的样式

div,p {

background-color:green;

}

3,伪元素选择器

比如超链接为例

状态:原始状态,鼠标悬停状态,点击状态,点击之后的状态

:link    :hover  :active   :visited