HTML+CSS 学习第一天

注意先看完火狐官方的文档或者是其他类似的介绍html+css等学习资料等,再继续学习下一步,第一个你必须知道的就是html和css的作用分别是什么,在血虚html+css+JavaScript的时候,会有很多无从下手的时候,这个时候建议就是先把html看完,在菜鸟教程或者是w3school等,先看完html之后,就会有大致的了解了,看完之后不需要记住很多的标签,因为到后面要和JavaScript及css一起使用,到那时才是真正用标签的时候,如果可以记住的话是最好的,但是记不住也没关系。

image-20201215221451921

1.步骤记录

  在了解了HTML之后,就可以同时的加入CSS的学习,通过CSS来美化界面是常用的操作,只有JS+HTML+CSS三个融合应用才是真正的网页。

(常见的缩进用法有& emsp;)

Typora_20201215225536_Typora

这个section div选择器只针对section里的div,而不是所有的div标签

Typora_20201215225945_Typora

msedge_20201216000234_msedge

ApplicationFrameHost_20201216095856_ApplicationFrameHost

  注意的是这个空格的变化,当加了一个空格之后,这行代码的意义就变了,变为找到section元素(父标签)内部所有含有这两个类的所有元素(子标签),即子标签会继承父标签的性质,当指定特定的内容的时候。(缩进用& emsp;)

ApplicationFrameHost_20201216100622_ApplicationFrameHost

Important work:

尝试写出这样一个界面

ApplicationFrameHost_20201216102628_ApplicationFrameHost

2关注css选择器

ApplicationFrameHost_20201219131836_ApplicationFrameHost

有空格的时候就是表示左边元素的所有右边

具体来说就是在看到空格的时候,那么右边就是属于左边的内部区域。
但是,要注意和 逗号, 的区别,在空格和逗号一起使用的时候,会出现很多令人迷惑的事情,首先在写选择器的时候,主要不要随便添加空格。
第二,可以看到下图,在选择器中一起使用逗号和空格的时候,记住是逗号两边是不同的元素,无论左边还是右边,都是独立的,简单的说就是有逗号的时候,右边的元素就不是左边元素的子元素了。逗号可以看成是一个分割器,分割左右两个元素

Code_20201219133428_Code

Code_20201219133516_Code

这也就说明了,如果你想写一个元素的内部元素有相同的属性,那么就必须是:

body main div, body main p {.....}

而下面这句就是表示一个子元素和一个全局的选择器;

body main div, p{......}

image-20201219134458421

image-20201219134529246

3.选择器

msedge_20201219133110_msedge

image-20201219134742772

在使用选择器的时候,或者是说在使用html与css进行连接的时候,注意调用css样式的用法是什么。多一个空格就表示多一个类,

class=“ ....”

image-20201219135046345

在设置类的时候,在css中的写法是:

元素.类名  像  section.feature-box{......}

也可以具体的指定哪一个

元素.类名 子元素  像  section.feature-box div{......}

上面一句的代码就是表示:

含有类feature-box的section元素中的div元素才会增加这个样式,和上面写section.feature-box是不一样的,section.feature-box表示含有类feature-box的section会显示这个样式。

注意在上面的代码中类和元素之间都没有空格

当有空格的时候,像

元素 .类名  像  section .feature-box div{......}
元素 .类名  像  section .feature-box{......}

代码的意思就是:

image-20201219140503379

找到section元素中所有有这两个类的元素,不再是div了。

如果不需要设置section中含有这两个类的所有子元素的样式,那么就必须删除这个空格。

image-20201219140636225

同时注意到:

在写选择器中两个类的时候,没有的空格的,同时只是在类后面连上就可以了。

还有一点要注意的是:

image-20201219141955055

可以去掉类前面的元素名称,这个可以不受到限制。

简单的理解就是在类前面写了元素名称后,只有类前面的元素才可以使用,这个类的样式。其他的元素是不可以用的,但是我们所需要做的就是减少代码的无效量,也就是说

当在类前面不写元素名称的时候,这个类可以给全部元素使用而不受到限制。这样也不会影响其他的元素,因为只有当元素的开始标签中写了class为这个类的时候,这个样式才会在这个元素中生效。如果没有写这个类,那么就不生效。

代码举例:

1.不限制元素的类型:

.feature-box{
  color:red;
  background-color:white;
}
<div>HelloWorld</div>
<div class=".feature-box">HelloWorld</div>

上面一个div没有写出class,所以在使用的时候不会有任何样式

但是下面一个写了class,所以在使用的时候就会有feature-box的样式。

2.不限制父元素,但是限制子元素的类型:

.feature-box div{
    color:red;
    background-color:white;
}
<div class="feature-box">
    <p>HelloWorld</p>
    <div>HelloWorld</div>
</div>

最重要的是这个,在写代码的时候,有很多灵活的应用,

上面的代码就是不限制父类元素,当父类元素写有这个类的时候,就会将子元素div渲染成feature-box的样式。

再看另外一个类型:

.feature-box.slaes{
    color:red;
    background-color:white;
}
<div class="feature-box sales">
    <p>HelloWorld</p>
    <div>HelloWorld</div>
</div>

不限制父元素,子元素的类型,都会有feature-box的类型。

另外一个类型:

.feature-box.slaes div{
    color:red;
    background-color:white;
}
<div class="feature-box sales">
    <div>HelloWorld</div>
    <div>HelloWorld</div>
</div>

不限制父元素,限制子元素的类型。

最后修改:2020 年 12 月 19 日 03 : 20 PM