目录
一、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首字母大写。