2个小时上手html+css-002盒子模型和选择器

我已经说过了,我要尝试看看自己能够用多少个小时把一个小白菜鸟变成月薪10000+的前端工程师。这篇文章就是我的尝试系列计划之一。《2个小时上手html+css》的第二篇。

这个教程是一系列,这是第二篇,学习本系列教程你需要:

1.你会基础的电脑操作(会打字,新建文件夹、新建文件、保存文件,知道什么是浏览器,28个英文字母都得熟悉,不能多数了俩)会安装基本的编辑器。

2.每个文件都要一个个的敲,一个不落的调试。

3.不要想太多,不要知道太多,按照步骤做就好了。

这个课程学习需要三个小时,包含练习时间,你将学会:

1.选择器

2.盒子模型

3.定位和浮动

4.表单和表格

第一部分选择器

说到选择器,我想说的是程序只不过是人类做事情的方法和过程的模拟,一般我们要做事儿无非是,让什么人做什么事儿,或者说把什么东西变成什么样。

计算机里面也一样,比如今天情人节,把一群妹子变成我女朋友,怎么变呢。用css表达就是

一群妹子{

​ Leo的女朋友:她们;

}

类比回代码

h1{
  color:red;
}

那么问题来了所有妹子里面万一又不乐意的咋弄,这时候我说了,谁愿意举手。那么我就让举手的当我女朋友对吧。用选择器怎么表示呢

.举手的妹子{

​ Leo的女朋友:她们;

}

注意前面加个点儿。好,我们回到代码,我想让所有包含.red这个一类p都变红,就需要用类选择器,表示一类。一类当然可以有多个


    
        我是网页的标题
        
    
    
        

我要红红红

我要上春晚

我要火

我就不想红

注意:

​ 1.class是关键字 ,里面放类名。

​ 2. .red 是样式的定义部分,上例子的意思是 让所有包含red的元素字颜色变红。

那么问题来了,如果有个人要搞特殊,比如某个p说了,哥就是不想红咋弄,而且你必须字儿给我放大点儿。

你可能会说


    
        我是网页的标题
        
    
    
        

我要红红红

我要上春晚

我要火

我就不想红

这样不就行了?请自行尝试不靠谱,怎么办我们需要id选择器,id选择器是唯一的,一个页面里面只能有一个id,就像全宇宙只能有一个尼古拉斯·屌·Leo一个样,注意id用 #号(横竖都是二的意思,哈哈)


    
        我是网页的标题
        
    
    
        

我要红红红

我要上春晚

我要火

我就不想红

下面说另外一个问题,大家想一下


    
        我是网页的标题
        
    
    
        

我要红红红

我要上春晚

我要火

我就不想红

最后文字是红色还是绿色?注意结论是 后面的覆盖前面的,当然是绿色,说完了这些细节的css样式,我们说一个非常重要的概念,盒子模型,说盒子模型的时候我们得先说一个标签div,干啥使得,装东西的。加入一个开发商想盖房子得咋弄,先圈一块儿地,然后呢是不是在去规划 小区里面的一排一排的房子啊。

所以,网页就相当于一块儿地,而div就是用来把网页化成一块一块,布局用的。

盒子模型的意思就是一个,一个房子的组成,不废话,直接整。看图。

2个小时上手html+css-002盒子模型和选择器_第1张图片
盒子模型.jpg

咋玩呢?

直接整例子


    
        我是网页的标题
        
    
    
        
我是帅气的盒子

注意,css的特点就是你记住了就会,记不住就不会,真心没啥难的,有同学会说老师你都给我讲讲,技术学技术更多的是练习练习再练习,你谈女朋友的时候也不是把什么都搞明白了才去谈的吧,所以你要学会和技术谈恋爱,具体问题实际项目里面我们会再讲,实际做技术就像过日子,见招拆招,边做边学,没听说过一个孩子把所有都学会了才去上学的。

估计这块儿比较难,大家先自己敲敲回头我再详细说下。未完待续。

你可能感兴趣的:(2个小时上手html+css-002盒子模型和选择器)