css入门基础

1.css的引入方式

<!--内嵌式样式 -->
<style type="text/css">     
		h1{
			background-color: red;
		}
</style>

<!-- 外链式样式 -->
<link rel="stylesheet" type="text/css" href="../css/css样式.css" />

<!-- (标签内)行内式样式 -->
<h1 style="background-color: #1E90FF">Hello,world!</h1>

2.简单的选择器

*{}:通配符选择器（选择页面所有元素 集合）

h1{}:标签选择器（选择页面标签元素 集合）

.类名{}:类选择器（选择页面具有当前类名的标签 集合）

#id{}:id选择器(选择页面唯一id标签)

群组选择器<!-- #id，.类名{} 用逗号隔开，选择的是一个集合 -->

后代选择器<!-- .类名 h1{} 空格使用，用于多层子节点，返回集合元素-->

直接子集选择器<!-- .类名>h1{}-- >使用，选择直接的子节点>

选择器的优先级：
<!-- 某一个属性！important>行内样式>id选择器>class类选择器>tag标签选择器>*

3.字体相关样式

font-size: ;            /* 字体大小 */

font-weight: ;         /* 字体粗细 */

font-family: ;        /* 字体系列 */

font-style:initial;  /* 字体风格 斜体 */

line-height: ;      /* 行高 */

4.文本相关样式

text-align: center;                /* 文本居中对齐 */
	
text-indent: ;                     /* 文本缩进 */
	
text-decoration: line-through;     /* 删除线 */
	
text-transform: ;                  /* 英文大小写转换 */
	
letter-spacing: ;                  /* 字符间距 */
	
word-spacing: ;                    /* 单词间的距离 */

overflow: hidden;                  /* 内容溢出隐藏 */
	
white-space:nowrap ;               /* 不换行 */
	
text-overflow: ellipsis;           /* 内容溢出显示省略标记 */
	
vertical-align: ;                  /* 垂直方向对齐方式 */