前端学习第二天——CSS基础以及制作简单的图文结合时可能遇到的问题

前端学习第二天——CSS基础以及制作简单的图文结合时可能遇到的问题

一、CSS基础

1.CSS的引入方式

外部：使用link元素引入 例：
内部: 在头部中添加style标签写入样式
内联（行内）：在标签中写入style

2.文本

字体样式：font -family
字体大小：font-size
字体粗细：font-weight
行高：line-height
文本装饰线：text-decoration

3.常用选择器

通配选择器：*{}
id选择器：#{}
class选择器： .XX{}
标签名选择器： XX{}
后代选择器：XX XX XX{}（标签名中间要用空格隔开）
群组选择器：XX,XX,XX{}(用逗号隔开)
子代选择器：XX>XX{}（只针对第一级子级）

二、简单的图文制作极可能存在的问题

1.每次制作网页前要先使用通配选择器将默认的内外间距归零

 * {
            padding: 0;
            margin: 0;
   }

2.图片尺寸大于或小于盒子宽高时。

可采用 background-size: cover; (短边占满父级)
或background-size: contain;(长边占满父级)
来根据盒子进行等比例变化

3.居中问题

margin: 0 auto; 水平方向可实现居中

4.文字部分居中问题

垂直方向：当height=line-hight时，文字垂直方向居中。
水平方向： text-align: center;

5.透明度问题

（1）使用opacity: .X;可调整透明度 X取值范围0.0~1
(2) 使用背景颜色rgba a的值可控制透明度 取值范围1到10

background-color: rgba(0, 0, 0, 0.3);