HTML+CSS

一. 什么是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中的五种定位:

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值