0
点赞
收藏
分享

微信扫一扫

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

今天你读书了吗 2022-02-05 阅读 40

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

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

 

选择器名{
    属性:属性值;
    ......
}
div{
   background—color:red;
}

注意:

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

/*注释内容*/

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

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

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

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

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

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

1.通用选择器

选择所有 *

*
{
......
}

2.元素选择器

选择指定标签 

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

3.ID选择器

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

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

4.类选择器

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

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

 5.分组选择器

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

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

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

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

1.后代选择器(派生选择器)

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

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

 2.子元素选择器

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

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

3.相邻兄弟选择器

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

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

4.普通兄弟选择器

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

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

 

举报

相关推荐

0 条评论