Web前端从入门到精通-5 css简介

上节课我们说到了标签以及标签的属性

比如一个div标签,它的属性有width height background对吧?

也就是

<div width="100px" height="100px" background="red"></div>

如果你的回答是对

那么恭喜你,你已经学晕了

上面这段代码是错误的

div下辈子也不会有width height background这些属性

上节课,关于div,我们只说了它的一个属性,就是style

style里面放的才是width height background这些东西

我们可以把这些东西理解为style下的分属性

正确的写法应该是

<div style="width:100px; height:100px; background:red;"></div>

好了,为了给大家提提神

特意准备了这个小礼物,接下来开始上正菜

上面的div呢,我们给它在style里面设置了一些宽、高、背景之类的样式,它就能按照我们设置的去显示

如果我又来了一个div,希望它宽200 高200 背景绿色,那么我们就需要这样写

<div style="width:200px; height:200px; background:green;"></div>

我们知道一个div就在网页上代表一块儿内容,而我们平时上网相信大家也都看到过

一个网页可不是一块儿两块儿构成的

事实也是如此,一张网页通常是由div来划分它的结构的,而且div之间还可能存在很复杂的嵌套关系,比如

<div>
    <div>
        <div></div>
    </div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>
<div>
    <div></div>
</div>

而且有的块儿外表(width height background)是一样的,只是内容可能稍有差别

但不管怎么样,我们不得不给每个div后面都加上style="width:100px; height:100px; background:red;"

等等很长一串东西

是不是很麻烦?

说到这里的话,我们就可以郑重的告诉大家,div的style属性里面的内容就是css

所谓css,中文翻译过来就是层叠样式表(Cascading Style Sheet)

样式可以很容易理解,层叠又是怎么一回事呢?

关于这个概念,我们稍后再做解释,而且这个概念需要随着css的学习来慢慢体会

回到刚才的style上,因为我们感觉在style里面写那么一长串的width height background的css代码不仅非常麻烦

而且特别不好看,本来复杂的div嵌套结构,再加上一大坨style就更难分辨了

所以,我们就又想出了其他给标签加css样式的方法:

上节课的时候稍微提到一点,我们head标签里面的style标签就是放css代码的

按照这个思路来,我们在页面中可以只写一个div标签,在我们的head里面新加一个style标签

现在代码应该变成了这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>

    </style>
</head>
<body>
    <div></div>
</body>
</html>

我们心里应该大概知道style里面要为div写width height background这些东西

那这些东西在style里面具体应该怎么写呢?

这就涉及到css的语法了

css里面设置样式都是一条一条来写的,每一条的格式大概如下:

选择器{ 样式名:样式值; 样式名:样式值;...}

这里又冒出一个概念:选择器,暂时先把它理解成标签名吧,稍后再做详细解释

例如,我们要给div设置样式,按照上面的规则就要写成

div{width:100px;height:100px;background:red;}

在这里先说明一个细节

为了增强程序的可读性,我们通常会在每条样式之间加一个空格,所以就变成了这样:

div{ width:100px; height:100px; background:red; }

这个时候再次预览,宽100 高100 背景红色的一个div就显示出来了

但是,如果我页面里面又来了一个div,想要让它的宽200 高200 背景绿色,该怎么做呢?

在这条样式的后面再加上一条css吗?就像这个样子:

div{ width:100px; height:100px; background:red; }
div{ width:200px; height:200px; background:green; }

稍微有些常识的人都能看出来这肯定不行

下面的这条一定会将上面的那条覆盖了,因为我们的css还不至于智能到自动识别第一条给第一个div设置,第二条给第二个div设置

所以一定要想个办法来标识每个div

css为我们提供了两种标识的方法

我们先来介绍第一种,就是id标识

具体怎么做呢?我们在HTML中可以给div加一个名为id的属性

<div id="aaa"></div><div id="bbb"></div>

而在css中可以这样写

#aaa{ width:100px; height:100px; background:red;}
#bbb{ width:200px; height:200px; background:green;}

我们可以看见,前面的选择器变成了井号加了对应的id属性名,后面大括号里面的内容照常

再预览,就是一个红,一个绿了

可能和你想像中显示的效果稍微不太一样,你可能想着两个div会排成一排来显示对吧?呵呵,这个问题比较复杂,得等到下节课说

需要说明的一点就是我们的id属性的值,是你自己定义的,爱叫什么就叫什么,上面叫aaa bbb,你自己也可以不叫这个,都无所谓

但是不要以数字开头,例如#3a这种id是非法的,包括下面即将介绍到的class选择器也是一样的

此外也不要闲的蛋疼在名字里面包含一些逗号 句号 省略号 反斜杠等等乱七八糟的东西

好了,到目前为止,我们已经说了两种选择器了————元素选择器和id选择器

够了吗?你可能感觉够了,挺好的

接下来我们再说一种情况:有一家婚庆公司的主页,全都是红色的风格,也就是说页面里大块儿小块儿都是红色背景,但是尺寸肯定不能一样

否则的话,就跟咱家里的砖头一样排列的整整齐齐,太死板了

肯定有人就会想,这还不简单,直接上代码

//第一个块儿宽100 高100#div1{ width:100px; height:100px; background:red;}//第二个块儿宽200 高200
#div2{ width:200px; height:200px; background:red;}//第三个块儿宽100 高200#div3{ width:100px; height:200px; background:red;}...

但是我们需要考虑一个问题,页面当中有这么多的块儿,都写了一遍背景为红色

万一哪一天需要把红色变成粉红色pink

好的,从头开始将所有的background改为pink

更有甚者,如果有的地方需要改成红的,有的地方需要改成粉红的,你还需要看一看前面的id,再去页面里面对应的找一找这个id对应哪个div

是不是需要改 等等等等一系列很恶心的事情

最不幸的是,可能当你改完了之后老板说,粉红色显得有点忧郁,咱还是改成原来的红色吧

这个时候估计你想死的心都有了

所以接下来我们引入下一种选择器,类选择器

顾名思义,类选择器是给一类元素设置样式的

直接上代码说明:

HTML:

<div id="top" class="bg-red"></div>
<div id="middle" class="bg-red"></div>
<div id="bottom" class="bg-red"></div>

css:

#top{ width:100px; height:100px;}
#middle{ width:200px; height:200px;}
#bottom{ width:100px; height:200px;}
.bg-red{ background:red;}

好的,对比上面两种写法,我们可以发现有两点主要区别

一种就是我们除了定义了三个id之外,还定义了一个class

在css中我们可以看到,在这个class类名前面多加了一个点

这个点就代表后面是一个类名

和井号代表后面是一个id是一样的道理

此外由于我们可以自己定义id和class的名字

所以我们的id和class的名字也不是一拍脑子想出来的div1 div2 div3

而是根据元素的位置来命名,所以写成了top middle bottom

这样即使将来需要修改,我们一看名字就知道哪个对应页面上哪个东西

当然我们这里是按照位置来定义名字的,实际开发中

每个公司和每个公司规定不太一样,大家按照公司要求来就行

好的,名字的问题现在简单扯了扯

如果希望界面风格变的话直接将bg-red类里面的background样式的值改成pink即可

如果老大发神经又要改回来,就给他改回来就好了

好的,以上我们讨论的是若干块儿颜色一样,而尺寸不一样的情况

接下来考虑一种尺寸一样,风格一致的情况

例如我们打开优酷,打开淘宝的首页看一下

会发现优酷里面又很多视频列表,那一块儿一块儿的,长的特别像

淘宝里面的商品列表,一块儿一块儿的,长的也特别像

按照我们现在已有的东西,要创建这样一个列表需要写成

HTML:

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

css:

.item{ width:200px; height:100px; border:1px solid black;}

注意这里,我们又看到了一个新的样式——border边框

虽然是新样式,但是大家想必也能看懂,粗细为1px,solid就代表实线,线的颜色为黑色

这次为什么没有写background呢?大家不妨改成background再预览看看怎么回事

这次我给大家贴一张浏览器中显示的图出来

看到这样的结果可能你会说,挺好啊,用了一个公共类item来控制list的风格,是,没错

现在我需要实话实说的告诉大家

把本套课程学完之后,一个页面理论上只需要div一种标签就能将所有的东西都能非常完美的展现出来,通过加上各种id class等等

但是大家可以想到这样的页面将会多么壮观

看一看源代码,全都是div

如果网页上某个地方是一排连续的块儿,里面放着各种各样的内容,当我希望修改一下这排连续块儿的样式的时候

找到这些块儿上面的class,再去修改,现在问题来了,所有的标签都是div,这么多标签,该从哪儿找起呢?

所以我们写html页面的时候通常就会这样来:

页面的大标题用h1或h2标签,页面里面如果有一段一段文字,就用p(paragraph)标签,如果有链接,就用a标签

如果是和我们这里一样的很多尺寸一样,但是内容不同,好像列表一样的一系列块儿,就用ul和li

ul的意思就是unordered list,li的意思就是list,这对儿标签的具体用法如下:

html:

<ul class="video-list">
    <li>video1</li>
    <li>video2</li>
    <li>video3</li>
    <li>video4</li>
</ul>

css:

.video-list li{ width:200px; height:100px; border:1px solid #000;}

好的,上面的css我们看见了一个和之前不一样的写法.video-list li

什么意思呢?就是.video-list下面的li

说道这里的话,也不得不多说几句了

元素选择器之间,可以有包含关系,例如选择div下所有的p,那就是div p{...}

class选择器之间也可以有包含关系,例如.parent .children{...}

但是id选择器呢?#parent #children{...}能写成这样吗?

在这里要介绍一个很重要的知识点,那就是一个页面id必须是唯一的,绝对不能重复

重复了之后会有什么后果呢?页面显示很正常,没什么的

但是当我们学了Js之后你就知道为什么禁止有两个重名的id了

现在只需要遵守这个规则

既然这样的话,类似#parent #children,还有.parent #children,以及div #parent这种把id写到后面的选择器虽然不能说是错的,但是没有什么意义

因为一个页面里面只有一个id,所以人家不需要你缩小在.parent或者是div的范围去找

好了,这节课一不小心又多说了一些废话,希望大家见谅

大家不妨思考一个问题,既然有这么多选择器,如果多种选择器都选了同一个元素,那优先级的问题是什么呢?

这就是css层叠样式表中层叠的概念,我们下节课再说

时间: 2024-10-31 15:34:40

Web前端从入门到精通-5 css简介的相关文章

Web前端从入门到精通-9 css简介

欢迎大家回来,前段时间给大家介绍了浮动以及清除浮动的相关内容 上节课到最后我们留了一个小问题 如果所有的子元素都没有加浮动,父级不设置高度时,父级的高度会不会随子级的高度自动撑开 我们可以通过下面的代码来测试 .ul1{ width:102px; border:2px solid red;} .ul1 li{ width:100px; height:100px; border:1px solid black;} <ul class="ul1"> <li><

Web前端从入门到精通-7 css简介

欢迎回来,上节课没有给大家留什么问题,但是介绍了一个很重要的问题,那就是css的层叠优先级顺序: 行间样式>id选择器>类选择器>元素选择器 好的,复习到此结束,接下来我们继续学我们的css 这节课要讲一个很重要也是理解起来略有困难的东西——浮动 之前的课程中我们举了好几个列表的例子,但无一例外的是所有的列表都是竖着成一排的 那么怎么让它们横起来呢?——就是用我们的浮动(float) 在正式介绍浮动这个东西之前,我们先来说个知识点——块元素和内嵌元素 什么意思呢?不知道大家是否发现了一个

Web前端从入门到精通-13 css简介

欢迎回来,上节课的话我们做了一个导航 总体来说还能看,但是也有一些小问题 首先,当我们把鼠标移上去的时候不变成小手 这个看起来最不舒服了 所以先从这里开刀 说到这里了,想和大家沟通一个问题 我们平时上网的时候鼠标放到什么地方才变成小手呢? 是不是可以点的地方呢? 可以点的话意味着什么? 意味着是一个链接对不对 链接的话在我们的html里面毫无疑问就是a标签了 好的,说到这里脾气着急的马上就会说,那就用a标签包裹文字不就完事儿了? 话一说完,代码就会被改成这样 <!DOCTYPE html> &

Web前端从入门到精通-10 css简介

上节课呢,我们介绍了一个很重要的概念——盒模型 主要介绍了盒模型的一些基础知识:margin padding的概念 以及margin:0 auto;和margin的塌陷 如果对上述知识点还有不清楚的地方大家一定要弄懂 要不然再往下看的话比较费劲 这节课的话我们接着上节课的话题继续扯 实际上关于margin的话题还远远不止我们上节课说的那些问题 我们再看下面一个布局: <!DOCTYPE html> <html lang="en"> <head> &l

Web前端从入门到精通-6 css简介

上节课我们主要介绍了三种css的选择器 结束的时候留了一个小问题,不知道大家还有没有记得 当多种选择器同时对一个元素操作时,会有什么情况呢? 不知道大家试了没有 先说句题外话,可能有的朋友说 你闲的蛋疼用多种选择器操作一个元素 我让一种选择器操纵一个元素不就可以了吗 我们学一个东西往往是为了用的,而不是为了装13的 所以我提出的这个问题自然有它的价值所在 接下来我会给大家分析 还拿我们的列表做例子,这次给大家举一个百度首页的例子 百度的推荐导航列表这里是不是我们的鼠标移上去的那一个块儿 外面会出

Web前端从入门到精通-11 css简介

欢迎大家回来,上节课我们又说了margin的一个bug 那就是子元素的margin-top会传递给父元素 解决方案也已经给出来了,在此不再废话 此外还说了默认样式的清零,这个的话我个人感觉无所谓了 平时自己写代码测试的时候就直接上*{margin:0; padding:0;} 之前我们讲解盒模型的时候一直都是拿div举例子 那么我们知道,div天生就是个块元素 所以我们之前见到的那一堆margin.padding的规则都是针对块元素的 那不知道大家有没有自己测试过内嵌元素的盒模型 我们接下来就和

Web前端从入门到精通-12 css简介

好的,在之前的11节课中 我们从对编程语言一无所知的状态循序渐进的了解了很多知识 包括html页面结构,css引入的几种方式,浮动,清除浮动,盒模型等等 现在是发挥这些知识用武之地的时候了 我们在上网浏览网页的时候不知道大家有没有注意过 在网页的最上面会有一个导航,比如 鼠标移入之后还会高亮显示 那么我们今天就利用我们之前学的东西做这样一个导航 首先,大家可以想象一下这个导航的大概结构是什么样子的呢? 可以不可以在外面有个大div作为父级 然后里面放上4个小div,一个div里面就是一项 当然没

Web前端从入门到精通-4 html简介

本节课我继续带着大家学习html 上节课的话我们已经有了一个页面,大概长成这个样子: <!DOCTYPE html> <html lang="en"> </html> 双击这个文件打开预览,什么都没有 好的,从现在开始我们给它加一些内容 根据html语法规定,html标签里的直系子标签有head body等 所以你的脑海中应该想着我们的页面变成了这样 <!DOCTYPE html> <html lang="en"

Web前端从入门到精通-2 关于html和开发工具

上节课呢,我们说到了html源文件在浏览器中打开就是一个网页了,那么html源文件是怎么来的呢? 很多教程为了让大家很快入门,就直接告诉大家说先创建一个记事本文件,然后把它的扩展名改成html,双击就会发现在浏览器中打开了 之后就对记事本里面怎么写html开始大讲特讲 但是个人认为,这样说忽略了初学者的感受 第一次接触html的朋友如果看到上面这样的讲解的话很容易会提出疑问 你为什么新建了一个txt改成了html就可以了?我新建一个别的文件比如word文件(扩展名为doc)改成html可不可以呢