web前端学习day-03

1 CSS的基本使用

css是层叠样式表，是用来美化html的。html是css的基础。

1.1 css基础语法

由一条或多条以分号隔开的样式声明组成，用{ }括起来，声明以；结尾

建议一行书写一个声明

若样式的属性值为多个单词，则要给值加引号

1.2 注释

/*注释内容*/

快捷键：ctrl+/

1.3 css的使用

1 css的定义格式：

选择器名{

        属性名：属性值；

        属性名：属性值；

        ......

}

样式的三种使用方式：1行内样式 2内部样式 3外部样式

行内样式：直接写在标签上的样式，在标签上通过style属性定义的样式，比如color：red；font-family：楷体；缺点是耦合度比较高。

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

外部样式：定义在外部的css文件中，通过link标签引入，固定属性有rel=“stylesheet” type=“text/css” href=“css文件的地址”

注意：当有多重样式时，越精准越优先，即就近原则。

2 CSS选择器

2.1 CSS基础选择器

通用选择器

*{

}

元素选择器

元素名称{

}

ID选择器

#id属性值{

}

类选择器

.class属性值{

}

分组选择器

选择器一，选择器二{

}

可以定义同一个class，再用选择器实现同一个效果

2.2 CSS组合选择器

选择器精确度：内联样式>ID选择器>类选择器>元素选择器

1 后代选择器

选择指定元素的所有指定后代元素，以空格隔开

选择器 指定元素{

属性名：属性值；

...

}

2 子代选择器

选择指定元素的第一代子元素，以>隔开

选择器>指定元素{

属性名：属性值；

...

}

3 相邻兄弟选择器

选择指定元素的下一个指定元素，两者有相同的父元素，以+隔开

选择器+指定元素{

属性名：属性值；

...

}

4 普通兄弟选择器

同级即可

选择器~指定元素{

属性名：属性值；

...

}