最近看了一些前端的知识,所以尽可能的抽出时间来总结一下
首先我们需要知道,HTML大致分三部分
一是HTML中的标签,这部分可以说是HTML的骨架
二是HTML中的css样式,这部分是对HTML的样式进行修饰
三是js,js可以让页面更灵动,是定义了HTML的行为,可以让用户跟前端页面进行一些交互
围绕着几个部分,大概会衍生出以下内容:
HTML的各种标签、css的选择器、块儿元素、行内元素、行内块儿、行高、盒子模型、页面布局的三种方式:标准流布局、浮动布局和定位布局,等内容。
由于HTML标签比较多,也比较基础,大家应该都了解过的,所以HTML标签部分这里就不赘述了
今天讲一下css的选择器
css样式选择器分为三部分:标签选择器、类选择器和id选择器,以及这三种搭配衍生出来的并集、交集、后代、子代选择器
一、标签选择器
标签选择器很简单,就是直接写上标签的名字就好了
上边的样式,我们是用标签选择器选中了div标签,然后给他500的宽和500的高,然后给了它一个背景颜色
看一下效果
二、类选择器
使用类选择器之前,首先需要给标签写一个class属性
然后在style样式里就可以使用类选择器了,使用类选择器的方法是一个“点”加上类名
看下效果
三、id选择器
id选择器也很简单,同样的在使用之前也需要在标签上给它一个属性 id
使用id选择器的方法是在id前加上“#”
看下效果
四、并集、交集、后代、子代选择器
三种基本的选择器说完了以后,就可以看一下并集、交集、后代、子代选择器了
1、并集选择器
使用语法是:中间用逗号隔开 比如:.box,div,p
2、交集选择器
使用语法是:直接挨着写,中间没有逗号,也没有空格 比如:p.para1
3、后代选择器
使用语法是:中间用空格隔开 比如:.box div p
4、子代选择器
使用语法是:中间用>连接 比如:.box>p