CSS基础知识（上）

什么是css？

1、层叠样式表Cascading Style Sheets
2、css作用：更加专注于页面的样式表现
3、css语法：选择器{样式名，样式值}
4、css注释：/*注释内容*/

HTML引入CSS

1、行内<p style="color:red;"></p>
2、内嵌<style type="text:css">选择器{样式名，样式值；}...</style>
3、外联<link rel="stylesheet" type="text/css" href="xx.css">

css常用选择器

*通配符	全部
tag通配符	标签选择器
class通配符	类选择器
ID通配符	id选择器
【，】逗号	群组选择器
【 】空格	后代选择器
【>】大于号	直接子集选择器
【+】加号	下一个相邻兄弟

选择器权重优先级

！important>行内>ID>Class>tag>*

css长度单位

px	像素单位
%	相对父节点百分比
vh/vw	相对于可视窗口的百分比大小
em	相对于父节点的字体大小
rem	相对于根节点的字体大小
cm、mm、pt	适合打印的单位

css的颜色单位

1、十六进制#ff0000
2、rgb()/rgba()
3、英文单词red

字体文本样式

1.字体大小  font-size：30px；1.字体大小  font-size：30px；
2.字体加粗  font-weight：900；（100~900 bold）
3.字体倾斜 font-style：italic；（normal正常，italic倾斜）
4.字体类型font-family："宋体"；
5.字体对齐 text-align：left center right；
6.文本装饰线 text-decoration：overline上划线，line-through删除线，underline下划线
7.首行缩进 text-indent：2em；
8.行间距：line-height：50px
9.英文转换  text-transform：uppercase  lowercase  capitalize
10.空白处理  white-space：normal正常  nowrap 不换行  pre格式化文本
11.溢出处理  overflow：hidden隐藏  scroll水平垂直滑动条  auto根据内容自动
12.文本溢出text-overflow  ：normal默认 ellipsis（文本溢出显示...）
13.单词间距 word-spacing：10px
14.字符间距  letter-spacing  ：10px

如何去除行内元素间的空格？

1、父节点添加font-size：0
2、还原文本字体大小

文本对齐方式

1、text-align：
        left
        center
        right
        justify两端对齐，非最后一行起作用

2、text-align-last：
        left
        center 
        right
        justify 两端对齐

3、vertical-align：
        top上
        middle中
        bottom底
        baseline  基线对齐