Tony学前端(八):CSS起步,樱桃小丸子家的故事!

本文共有4700字,预计阅读时间:25分钟

在文章末尾可以观看本课的视频

首先我们复习一下上次都讲了哪些:

框架:

框架的横向、纵向划分。

内联框架:

标签与

表单元素:

的变化、单选框、复选框、下拉列表、按钮、多行文本框。

另外我们目前学习的是HTML4,再以后的阶段我们还会学习HTML5,在HTML5中,会学习更炫的元素,譬如画布、音频、视频等等。娃娃们加油,我们的目标是星辰大海!

讲完了如何造房子(HTML),接下来就要学习CSS,学习如何把房子装饰的漂漂亮亮的!

首先我们自然要学习,什么是CSS?

CSS的全称是层叠样式表(CascadingStyleSheets)。那什么是层叠?难道是叠被子?样式也能够叠起来?

样式确实会一层层叠起来,因为一个元素的样式属性可能会被不同的规则影响到。

就像老爸让你穿黄颜色,而老妈让你穿红颜色,那么最终你会穿什么颜色?当然是老妈的优先级高,穿红色!

每一条样式的定义就是一条规则,当一个样式被定义了多条规则时,将会按照一定的计算法则来决定最终这个样式呈现何种规则,就像一堆东西叠在一起,但是最上面的只会显示一件,这个就是层叠。

红色还是黄色?

像以上示例,首先我们在里设置了字体颜色是黄色,由于该属性能被的子元素所继承,因此内的

就被定义了一条样式:字体颜色为黄色;同时我们又在

里设置了字体颜色为红色,因此

又被定义了一条样式:字体颜色为红色。很明显一个元素的字体颜色不能既为黄色又为红色,因此浏览器会按照一定的计算法则来决定

的最终字体颜色,该示例中最终字体颜色为红色。

因此这个层叠不像是叠被子,而更像是叠罗汉。

CSS主要有两大优点:

1、解决了内容与表现分离的问题:

对于html元素来说,其目的是表达“我是什么?”, 而不是“我是怎么样?”,只是为了让html元素可以呈现的更丰富,才逐渐增加了众多html的属性。但是随着html属性的越来越多越来越复杂,会是整个html变的越来越杂乱。而使用css,则可以使的样式的设定与html元素之间分离。

2、可以极大的提高工作效率:

如果用属性来对html元素进行描述的话,那么即使元素具有相同的样式,也得每个元素都描述一遍,这太繁琐。而如果使用css来设定样式,我们可以使用各种选择器来对html进行批量的样式设定。

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中表:

浏览器缺省设置。

外部样式表(位于外部文件中)。

内部样式表(位于标签内部)。

行内样式(位于HTML元素内部)。

此时浏览器会按照以下的优先级来决定最终采用哪一个样式:

行内样式(位于HTML元素内部)。

内部样式表与外部样式根据一套优先级规则来决定。

浏览器缺省设置。

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

一、选择器:

选择器通常是我们需要改变样式的 HTML 元素。如所有的

标签、某个id的

、某类class的、表格里的第五行等等。

二、样式声明:

每条声明由一个属性和一个值组成,属性是我们希望设置的样式属性,每个属性有一个值,属性和值被冒号分开。多条声明由分号隔开。

如以下这个样式:

h1

其结构为:

因此,如果小丸子妈妈有这样的要求的话:

那么其样式应该这样写:

樱桃小丸子

我们先学习三种最常见的选择器:标签选择器、id选择器、以及类(class)选择器。当然选择器不止这三种,我们在后面还要学习更复杂的组合选择器。

1、标签选择器:直接写标签名,多种标签可以用逗号隔开,如以下都是标签选择器:

span

p

h1,h2,h3

tr,div

2、ID选择器:可以为标有特定id的 HTML 元素指定特定的样式,多个ID也可以用逗号隔开,ID选择器要以“#”开头,如以下都是ID选择器:

#tony

#tony,#tom

#a

3、类选择器:可以为标有特定class的 HTML 元素指定特定的样式。多个class也可以用逗号隔开,类选择器要以“.”开头。

.man

.man,.woman

.student

隔了这么多期我俩终于回归了!

创建CSS的方式有三种:外部样式表、内部样式表、以及内联样式。

1、外部样式表:我们通常将一个网站的公共样式写在一个外部样式表中,这样只要修改一个文件就可以改变整个网站的外观。外部样式表保存在.css文件中,通过

来引入,

位于中:

以上我们引入了一个名为mycss.css的外部css文件。

2、内部样式表:当单个页面要使用特殊样式时,便可使用内部样式表。内部样式表放在

以上我们写了两组内部样式,分别是"h1,h2,h3"的标签选择器以及".study"的类选择器。

三、行内样式:行内样式直接写在标签的style属性内,行内样式会损失CSS的许多优势,因此不建议这种写法:

你好

之前我们学习html时写的样式都是行内样式。

我们学习了这么多CSS的准备知识,接下来就开始学习具体的CSS样式吧!

在一个网站中,对HTML元素的背景进行处理总是必不可少的。背景处理分为背景颜色与背景图片。

背景颜色的属性为background-color,其值可以为颜色名、十六进制的颜色值或者rgb颜色值:

p

p

p

以上均把

的背景色设置为红颜色。

对于十六进制颜色值及rgb颜色值的具体表达方式我们将在后面专门学习。另外目前我们只能把背景色设置为简单的纯色,而当我们学习了CSS3(新一代CSS)后,就可以设置更丰富的背景色了,譬如渐变色、条纹等等:

css3专有

背景图片的样式控制就比较多了,包括:背景图片的获取、图片重复、图片定位以及图片固定等。

一、背景图片的获取:要把图像放入背景,需要background-img属性。其值为url值,采用相对路径。

body

要注意的是url不能漏写。

二、背景图片重复:背景图片默认是在元素中平铺的,因此假设用这个图片做背景:

那么在元素中会是这个效果:

控制图片重复的属性是background-repeat,其默认是repeat,表明图片重复,如果不想重复,则将其设置为no-repeat,其效果为:

如果设置为repeat-y,则图片只在垂直方向上重复:

如果设置为repeat-x,则图片只在水平方向上重复:

利用repeat-x,我们经常会来制作水平分割线的效果,我们通常会先制作一个很细的图片,填充到背景,随后让其 沿水平方向平铺。

先制作水平线单元,图像高度就是水平线的高度:

水平平铺以后的效果:

三、背景图片位定位:背景图片默认是从元素的左上角开始,通过background-position属性可以改变背景图片的起始位置。这个属性的值是一个组合值,分别为水平偏移和垂直偏移,例如:

body

以上表明该背景图片的起始位置是水平偏移20%,垂直偏移30%,基本上就是这样一个效果,在background-repeat设置为no-repeat时就观察的更明显了,背景图片其实是向右下方移动了:

水平及垂直偏移量可以有三种表示方式:

1、关键字,分别有:center、left、right、top、bottom,其表示的起始位置与字面意思相符,分别是中间、左侧、右侧、顶侧和底侧。

2、百分比,如10%、50%等。

3、具体的像素值,如15px、50px等。

因此,background-position可以有以下表示方式:

background-position:center left

background-position:20% 30%

background-position:20px 15px

background-position:50%

注意最后一个样式,如果只有一个偏移量值的话,表明水平和垂直方向的偏移量均是该值,因此最后一个样式的效果是背景图片居中。

四、背景图片固定:当页面垂直滚动的时候,背景图片也自然随之滚动,如果不想让背景图片滚动,而一直是固定着的,则可以将属性background-attachment设置为fixed。一般来说这个效果应用在广告、logo的显示上。

五、背景样式的懒人写法:就像我们之前学习的font属性一样,背景的样式也可以使用懒人写法,以避免我们每次都写长长的background-xxx属性名。我们可以把相关样式写在background属性中,如以下写法:

background:red url(“a.jpg”) no-repeat center 30% fixed

其等同于以下这些样式:

background-color:red;

background-img:url("a.jpg");

background-repeat:no-repeat;

background-position:center 30%;

background-attachment:fixed;

懒人写法果然很是方便呀!

后面暂时没有了,我们来总结一下,今天我们主要学习了:

CSS基本概念:

什么是CSS、层叠是什么意思、为什么要用CSS。

CSS深入:

CSS定义、语法、选择器、创建。

CSS背景:

CSS背景颜色、背景图片。

今天我们是CSS的开篇,主要讲述了什么是CSS,CSS相关的一些概念,最后学习了背景颜色与图片的样式设定,学习CSS以后,会使我们的网页变的漂亮起来,娃娃们加油,我们的目标是星辰大海!!

点击观看本课视频,也可以在腾讯视频上搜索“Tony学前端”

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180311G0PLVF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券