学习笔记分享

css:
引入css三种

1. 行内样式 标签内的style属性
2. 内部样式 style标签
3. 外部样式 css文件内
   链接式：link
   导入式：@import
   @import “xxx.css”

1、标签是属于XHTML范畴的，@import是属于CSS2.1中特有的。
2、使用链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也一样的效果。
3、使用@import导入的CSS文件，客户端在浏览网页时是先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当然最终的效果也与使用链接文件效果一样，只是当网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉。这个也是现在目前大多少网站采用链接外部样式表的主要原因。
4、由于@import是属于CSS2.1中特有的，因此对于不兼容CSS2.1的浏览器来说就是无效的。

css 语法
选择器{
属性：值;
}

简单选择器

标签选择器
p{
color:red;
}
类选择器（同一个网页可以有相同的类）
.选择器名称{
color:red;
}

id选择器（同一个网页中id唯一的）
#id名称{

}
复合选择器
子代选择器
父选择器>子选择器{

}

后代选择器
父选择器 后代选择器{

}
并集
选择器1，选择器2…{

}

交集(如果有标签选择器，标签选择一定要放在最前面)
选择器1选择器2…{

}

css选择器优先级（精细原则）

行内>内部>外部

标签选择器1<类选择器10<id选择器100

复合选择优先级（权重值）
!important

伪类选择器
a标签的四个伪类

文本样式
color:字体颜色
h3{color:blue;} – 英文名作为属性值
h3{color:#0000ff;} – 十六进制
h3{color:#00f;} – 十六进制的简写方式
h3{color:rgb(0,0,255) 红绿蓝三种的分量
h3{color:rgb(0%,0%,100%);} 使用给定红绿蓝3种颜色分量的百分比

text-transform: 英文字母大小写转换;
capitalize：单词首字母大写
uppercase：全部大写
lowercase：全部小写
text-align:文本水平对齐 left|right|center
text-indent:文本的缩进（常用：段落首行缩进）
line-height:行高
text-decoration:文本装饰 none|underline|line-through|overline
vertical-align:垂直对齐，指定对齐的父容器为display:table-cell

设置单词内部的字母间距(letter-spacing)和单词之间的距离(word-spacing)
    word-spacing:10px;
    letter-spacing:-1px;

字体样式
font : 复合性属性，要遵守一定的顺序
font: [font-style] [font-weight] [font-size] [font-family]
font-style: 字体风格，值：normal 正常, italic 斜体
font-weight：字体的精细，可以是数字
font-size：字体大小，默认单位是px（像素）

font-size
单位：
相对单位：
px、em、rem、百分比
绝对单位
cm、 mm、m、pc

背景样式

列表样式

边框样式

float:left;
float:right;

背景样式
background-color：背景的颜色
background-image：背景的图片
background-repeat：背景的重复
值：repeat|no-repeat|repeat-x|repeat-y
background-attachment：背景固定
值：fixed|scroll
background-position：背景的定位 (除固定值外，也可以使用像素与百分比)
值：left|center|right top|bottom , 值为正，分别向右，向下
background:复合属性，遵守一定顺序，顺序如下：
background-color|background-image|background-repeat| background-attachment|background-position
可省略其中的项，省略的项目，系统会实用其默认值

注意：background-position需与background-repeat 结合使用

边框(可以分别从上，右，下，左进行设置)
border-width：宽度
border-style ： dotted（点线）、dashed（虚线）、solid、double
border-color:

7. 列表样式
   list-style-type：项标记类型 disc|circle|square
   list-style-position：在何处放置列表标记 outside（列表标记项放置在文本以外） | inside(列表标记项放置在文本以内)
   list-style-image：使用图片代替列表项的标记

list-style：复合属性或称简写属性(可省略)
可以按顺序设置如下属性：
list-style-image
list-style-position
list-style-type