初见CSS

CSS学习

CSS的基本概念

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

选择器

选择器说明该样式施加于哪些元素；属性名和属性值说明是样式内容；
一般一行定义一条样式，当然也可以写在一行上，但每条样式都序号加上“；”
推荐用小写命名。

标签：<p><div>…之类的标签
使用方式：直接输入标签名
类(class):class 名字
使用方式：输入点+class名
ID：ID名
使用方式：输入#+id名

一般来说我们写CSS文件的时候用的都是第二种选择器，class名
这是因为ID名一般被用作JS的选择器
给class命名也是规范的，像xxx-xxxx 这样做的好处是让你的代码更清晰别人也更容易看懂

三种连接样式

行内样式（内嵌样式）

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

<h1 style="color: green;">标题</h1>

内部样式（内联样式）

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

<style type="text/css">
			p{
				font-size: 24px;
			}
		</style>

外部样式（外联样式）

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

<title>标题</title>
<link rel="stylesheet" type="text/css" href="css/xxx.css"/>

.text1{
	color: pink;
	}

字体相关属性

Color(字体颜色):blue/red/black/green/pink/#FFFFFF/#F6F6F6
Text-align(对齐方式):center(居中)/left(靠左)/right(靠右)
Text-decoration: none(默认格式：无)/underline(下划线)/overline(上划线)/line-through(删除线)
Text-transform: none/capitalize(首字母大写)/uppercase(全部大写)/lowercase(全部小写)
Font-size(字体大小):56px/24px/xxpx
Font-family(字体体系):”黑体”/”幼圆”
Font-style(是否倾斜):italic(倾斜)/normal(正常)
Font-variant(是否大写): normal/small-caps(小型大写)
Direction(文本方向): ltr(left to right 从左到右)/rtl(right to left 从右到左)
Line-height(行高): normal/xxpx
Letter-spacing(字符间距): 2px/5px/xxxpx
Word-spacing(字间隔(属性增加或减少单词间的空白)):normal/±值