第三次网页前端培训笔记——CSS

1.CSS定义

CSS样式由选择器和一条或多条以分号隔开的样式声明组成。

每条声明包含一个CSS属性和属性值。

 

选择器名{
    属性:属性值；
    ......
}

div{
   background—color:red;
}

注意：

• css声明要以分号结束，声明以大括号括起来
• 建议一行书写一个属性
• 若值为若干个单词，则要给值加引号，如 font-family:"agency fb"

2.CSS的注释

/*注释内容*/

3.CSS 的三种样式

1、行内样式：直接写在标签的样式，在标签上通过 style 属性定义的样式

2、内部样式：定义在 style 标签的样式，style 标签一般设置在head 标签中

3、外部样式：定义在外部的CSS文件中，通过link 标签引入

link rel = "stylesheet" type="text/css" href="css文件的路径” />

注：当有多重样式时，越精准越优先(就近原则及行内部样式最先)

4.CSS基本选择器

CSS样式的优先级，是根据选择器的精准度/权重来决定，权重越大，优先级越高（元素选择器：1，类选择器：10，id选择器：100，内联样式：1000 )

1.通用选择器

选择所有 *

*
{
......
}

2.元素选择器

选择指定标签 

元素名称
{
......
}

3.ID选择器

选择设置过指定id属性值的元素  # 

#id属性值
{
......
}

4.类选择器

选择设置过指定class属性值的元素  .

.class属性值
{
......
}

 5.分组选择器

当几个元素样式属性一样的，可以共同调用一个声明，元素之间用逗号分隔

选择器1,选择器2,...
{
......
}

5.css组合选择器

CSS组合选择器说明了两个选择器直接关系。CSS组合选择符号包括各种简单选择符的组合方式。

在CSS中包含了四种组合方式：后代选择器（以空格分隔），子元素选择器（以大于号分隔），相邻兄弟选择器（以加号分割），普通兄弟选择器（以波浪线分割）。

1.后代选择器（派生选择器）

用于选择指定元素下的后代元素，以空格分隔

选择器1 选择器2
{
 ......
}

 2.子元素选择器

只能选择作为某元素直接/一级子元素的元素,以大于 > 号分隔

选择器 > 指定元素
{
......
}

3.相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素,以加号 + 分隔

选择器 + 指定元素
{
......
}

4.普通兄弟选择器

选取所有指定元素之后的相邻兄弟元素,以波浪号～分隔

选择器 ~ 指定元素
{
......
}