简单上手CSS

我尽可能用简单通俗的语言,来解释清楚CSS,让大家很轻快的就能上手。我们先分别编辑两个文件,一个是index.html,另一个是style.css,style.css文件也是新建一个记事本,另存为时类型选择所有文件,命名为style.css即可,要注意两个文件存储在同一目录下。

index.html

001.

002.

003.简单上手CSS

004.

005.

006.

007.

012.简单上手CSS

013.

014.

我有一个id

015.

我有一个class

016.

017.

018.father

019.

box

020.

021.

022.

style.css

001.@charset "utf-8";

002./* style.css */

003.

004..box{

005.margin:10px 20px 30px 40px;

006.padding:20px;

007.border:8px solid #000;

008.background-color: #ccc;

009.}

用浏览器浏览页面,结果如图所示:

一、引入方式

首先介绍CSS三种常用引入方式:

1.网页013行、015行、017行利用HTML标签的style属性来直接设置CSS样式;

2.网页004行在中引入CSS文件的方式,从代码中我们看到引入了style.css样式表文件;

3.嵌入的方式,利用标签在页面上集中定义,如007~011行所示;你也可以将标签内的样式定义移动到文件style.css中!

无论哪种引入方式,样式的定义基本是统一的,如图所示:

二、选择器

选择器主要作用是指定你要定义的标签,可以有多种方式,008~010分别采用了标签选择器、类选择器和ID选择器

标签选择器直接使用标签名,示例中直接定义了body内的字体为微软雅黑;

类选择器使用了标签的class属性值来标记(012行),类名命名不能以数字开头,且区分大小写,样式定义:.类名{};

ID选择器使用了标签的id属性值来标记(014行),同样不能以数字开头,且在同一网页是唯一的,样式定义:#类名{};

你可以多个选择器同时定义,选择器中间用“,”间隔:h1,p 这定义了页面所有标签和

标签的文字为黄色。你也可以定义内嵌标签样式:div p 这里匹配所有在

内的

的文字大小为12px;

三、像素单位:px

“px”是像素单位,我们平常说的显示器分辨率1920*1080就代表这宽度为1920个像素点,高度1080个像素点,在CSS里,像素是距离和大小的单位之一。

四、RGB颜色

关于颜色,CSS常用的颜色方式之一是RGB颜色(red、green和blue),可以用六位16进制的数值来表示(十六进制数字从0-9,字母范围从A-F,F为个位最大值),你可以简单这样记:RGB颜色是合成色,按顺序每两位代表RGB的一个颜色,例如:#336699中的33代表红色(R),66代表绿色(G),99代表蓝色(B),每种颜色数值的大小决定了合成颜色数量的不同,所以,当#FFFFFF时,三种颜色满值合成,即为白色;当#000000时,没有任何颜色参与,即结果为黑色。不同颜色的重叠和混合,即表达了出了各种颜色。观察第017行你会发现定义背景色时background-color: #999;RGB颜色只用了3位16进制数,这时#999等价于#999999,每一位代表重复的两位16进制数,当然也可以采用英文颜色值直接定义颜色,如009行、010行那样直接使用blue、red单词。

五、盒子模型

样式表文件style.css定义了一个CSS盒子模型,什么是盒子模型?我们的HTML标签相当于内容的一个个容器,网页上我们真正想表达的内容都是通过HTML标签嵌套来实现的,像一个又一个盒子,那么作为装载内容的盒子具备这三个属性:盒子内部与内容之间的空间大小、盒子本身的厚度、盒子外部空间大小,下面是一个标准的盒子模型:

我们示例中的HTML如017~020行所示,我们有两个

,外层的fahter嵌套着box,我们主要观察下在style.css文件中class="box"这个

的CSS定义:

margin:10px 20px 30px 40px;

padding:20px;

border:8px solid #000;

margin: 用于控制标签与标签之间的距离; padding:用于控制标签内容与标签边框之间的距离;border则定义的边框;通过浏览器的调试功能很容易看出box有关于margin样式定义的效果:

这里采用简洁的定义方式,即“margin:上 右 下 左;”,距离上方元素10px,右侧20px,下方30px,左侧40px。你可以分别定义:

margin-top:10px;

margin-right:20px;

margin-bottom:30px;

margin-left:40px;

浏览器中调试怎么用?在浏览器浏览网页时,点击右键,一般有【检查】项,点击后通过选取标签和页面元素,来查看详细的样式定义,下图是我选取box时,从浏览器调试面板中看到的盒子模型:

padding可以同margin一样分别定义,而且它们可以统一定义,例如padding:20px;就定义了上、右、下、左都为20px间距。

border:8px solid #000;定义了8px边框,线条样式为solid直线,边框颜色为黑色。关于盒子模型要多尝试操作,这是CSS最常用的内容。

总结一下,本文仅仅提供简单的入门参考,如果说HTML标签认识的越多你就越会制作网页,那么CSS定义知道的越多,就越让能你的网页更灵活和美观。

小练习:

1.学习更丰富全面的CSS样式定义:https://www.cnblogs.com/suoning/p/5625582.html

2.会用浏览器的调试功能

3.多浏览一些网页,消化理解文章提到的有关CSS样式的知识

接下来的文章,会简单介绍下JS的相关知识。欢迎关注互联网设计兵团!

也欢迎你加入群一起学习交流!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180307G19HG800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券