CSS样式基础知识

CSS的基本概念

CSS（Cascading Style Sheet） 层叠样式表，为了实现页面内容和表现形式的分离。层叠的含义是可以对一个元素多次设置样式，最后的结果是多次样式叠加的结果，如果有冲突，以后面的样式为准。

选择器

标签：<p> <div>…之类的标签 使用方式：直接输入标签名
类（class）：class名字 使用方式：输入点+class名
ID:ID名 使用方式：输入#+id名
一般来说我们写CSS文件的时候用的都是第二种方法，class名这是因为ID名一般被用作JS的选择器给class命名也是有规范的，像xxx-xxxx这样做的好处是让你的代码更清晰别人也更容易看懂

三种连接样式

行内样式：

直接写在标签里，使用style属性，只对当前标签有效，页面内容和表现形式是高度耦合的，不利于维护和分工合作的。

内部样式

内部样式是在head部分使用<style>标签，样式对当前页面有效，内容和表现形式实现了一定程度的分离，但不彻底。

外部样式

外部样式需要一个link标签来与html连接起来，内容与表现形式完全分离，而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现。

字体相关属性

text-align（对齐方式）：center（居中）/left（靠左）/right（靠右）

font-size（字体大小）：56px/24px/xxpx

font-family（字体体系）：“黑体”/“幼圆”

font-style（是否倾斜）:italic（倾斜）/normal（正常）

font-weight（字体粗细）：100/200/normal（400）/bold（700）/bolder

font-variant（是否大写）：normal/small-caps（小型大写）

color（字体颜色）：blue/red/pink/black/green/#FFFFFF/#F6F6F6

text-decoration: none（默认格式，无）/underline（下划线）/overline（上划线）/line-through

direction(文本方向): ltr(left to right从左到右)/rtl（right to left从右到左）

text-transform(大小写): none（默认）/capitalize(首字母大写)/uppercase（全部大写）