A44-张珂-网页前端第三次笔记

Ker_reK

已于 2022-02-06 21:32:48 修改

阅读量151

点赞数 1

文章标签： css html

于 2022-02-06 21:12:58 首次发布

本文链接：https://blog.csdn.net/Ker_reK/article/details/122801657

版权

一、css的基本使用
1.css的定义
（1）选择器名{
属性名：属性值；
属性名：属性值；
......
}
（2）注意点：①声明需要使用{ }括起来，每个声明以分号结尾
②一行建议一个声明
③如果样式的属性值由多个单词组成，则用引号引起来
2.css的注释 /* 注释内容 */
3.css的三种使用方式：
（1）行内样式：直接写在标签上的样式，在标签上通过style属性定义的样式
（2）内部样式：定义在style标签中的样式，style标签一般设置在head标签中
（3）外部样式：定义在外部的css文件中，通过link标签引入
注：当有多重样式时，越精准越优（就近原则）
二、基本选择器
1.通用选择器 *
*{
属性名：属性值；
......
}
2.元素选择器
元素名/标签名{
属性名：属性值；
......
}
3.ID选择器#
#id属性值{
属性名：属性值；
......
}

4.类选择器.
.class属性值{
属性名：属性值；
......
}
注：css样式的优先级，是根据选择器的精准的/权重来决定的，常见的权重如下，权重越大，优先级越高
元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
三、组合选择器
1.后代选择器
（1）选择器空格指定元素{
属性名：属性值；
......
}
（2）选择指定元素的所有指定后代元素，以空格隔开
2.子代选择器
（1）选择器 > 指定元素{
属性名：属性值；
......
}
（2）选择指定元素的第一代元素，以大于号隔开
3.相邻兄弟选择器
（1）选择器 + 指定元素{
属性名：属性值；
......
}
（2）选择指定元素的下一个元素（只会找一个），两者有相同的父元素，以加号隔开
4.普通兄弟选择器
（1）选择器 ~ 指定元素{
属性名：属性值；
......
}
（2）选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号隔开