第三章 CSS入门

目录

一、css的引入方式

1、外部样式表

2、内部样式表

3、内联样式表

4、引入其他的样式表

5、各样式表的优先级

二、css背景色

三、css背景图

1、background-size

2、background-position

3、background-repeat

四、文本标签

1、font-size 字体大小

2、text-family 文字字体

3、text-align 文字居中

4、line-height 行高

5、text-indent 首行缩进

6、letter-spacing 字体间距

7、text-decoration 文本装饰线

8、text-transform 字母大小写转换


一、css的引入方式

1、外部样式表

<link rel="stylesheet" href="css/test.css">

写在head标签中,链入外部样式表。

2、内部样式表

/* 内部样式表 */
<style>
    img {
        width: 200px;
    }
</style>

直接写在style标签中。

3、内联样式表

<!-- 内联样式表 -->
<div style="width:30px"></div>

直接在标签中设置css样式。

4、引入其他的样式表

@import url('css/test2.css');

也是直接写在style标签中,链入其他的样式。

5、各样式表的优先级

内部与外部样式表优先级取决于哪一个先引入,内联样式表的优先级最高。

二、css背景色

网页的三原色构成:红、绿、蓝。

背景颜色的三种表示方式:英文单词、二进制、rgba(red,green,blues,透明度)或者rgb。

设置网页背景透明:background-color 设置属性transparent。

三、css背景图

1、background-size

背景图的大小尺寸,基本属性:width、height。

两个特殊属性:contain 图片高占满父级,图片等比例变化

                         cover 图片宽占满父级,图片等比例变化

2、background-position

通过坐标轴设置图片的位置,x,y。网页的坐标轴原点在左上角,向右为x轴,向下为y轴。

3、background-repeat

设置图像平铺,三个属性:repeat-x 在x轴方向平铺;repeat-y 在y轴方向平铺;no-repeat 不平铺。

设置图片居中全屏:

background-size: cover;
background-position: center center;
background-repeat: no-repeat;

四、文本标签

1、font-size 字体大小

它有两个单位:px、em;em是指相对大小,相对于父元素的大小,相当于倍数,对父类设置字体大小为3px,则子类设置3em实际大小为9px,一般可以用作响应式开发,使得图片能够随屏幕大小的变化而变化。

2、text-family 文字字体

设置文字的字体样式。

3、text-align 文字居中

实现文本居中对齐显示。

4、line-height 行高

撑开文本标签的高度,当设置文本框高度等于行高时文字会垂直居中

/* 设置文本框高度 */
height: 20px;
/* 设置行高,使文本居中对齐 */
line-height: 20px;

5、text-indent 首行缩进

通常采用2em实现首行缩进两个字符。

6、letter-spacing 字体间距

直接设置具体像素值是设置文字的间距,word-spaing设置单词之间的间距。

7、text-decoration 文本装饰线

它有四个属性:underline 下划线、none 没有装饰线、overline上划线、line-through 删除线

对a标签设置none属性可以清除下划线。

8、text-transform 字母大小写转换

uppercase 转化为大写、lowercase转化为小写、capitalize首字母大写。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值