一. 什么是CSS?
Cascading Stylesheets(层叠样式表),不是编程语言,告诉浏览器该如何指定样式和布局;一般会和HTML,XTML等标记语言一起工作。其实可以把它理解为“皮肤”。
# 如图所示,<p>和</p>之间为文本,在{}中,指定color(颜色)属性:red(红色),p为标签。
二. 三种方式添加CSS:
# 通过内联样式,将CSS放在HTML的<style>中,网页效果如图所示:文字显示为蓝色。
# 或者内部样式表:
# 取得的效果是相同的
这里重点讲,CSS文件,首先我们可以创建一个CSS文件,并在原HTML文件中创建一个BOX,同时还要再脚本中加入css文件连接的引用:
三. 指定box
然后我们可以在CSS文件中指定box,指定box的方式有:
# 图中第一种方式便是上文提到过的直接在文本中加入指定属性;中间的方式则是指定一个类,比如.paragraph,指定整个脚本中的段落类,颜色皆为红色;最后一种是指定一个id,比如#paral,颜色皆为红色,但是该id在文本中一定要唯一。
首先我们在HTML文件中创建box,并将文本写入:
之后在创建的CSS文件中指定该box的属性
之后就可以在网页中见到相应的变化:
# 字体的颜色以及背景的颜色都得到了改版。
我们也可以调整整个页面的其它参数,比如边距,宽度等等:在HTML中多指定一个类box:
再在CSS文件中对该类进行定义:
再回到网页,可以看到文本的变化,边距出现,文本对左靠齐:
在CSS当中指定颜色的方式有很多种:
在CSS中指定字体是很重要的一部分:
四. 在CSS中直接指定属性
另外,在同一个文本中,是可以有多个段落和类的,不同的段落引用了类,并不会影响其它的段落,比如,在刚刚的脚本中,我们又新加了一个<body>,该段落并不引用类:
在网页中显示的时候我们可以看到,两个段落的文本格式完全不同:
当然也可以在新的段落里引用其它的类box来调整格式,但如果该文本中只有该段落有独特的格式,那么可以在CSS文件中对该段落进行单独的属性指定:
# 之后我们在网页端可以看到,大变样:
番外:关于box的结构:
content:文字,上下左右顶格
padding:内边距
border:边框
margin:外边距
对margin的指定方式:
对属性指定的示例:
CSS中的五种定位: