css初级入门----篇一

1、被称为样式表或者层叠样式表（级联样式表）

2、属性与属性值之间使用：连接，多个键值对之间使用英文分号区分

3、font-size字号大小相对长度单位，绝对长度单位皆可使用，加px

4、font-family设置字体，可指定多个字体中间使用英文逗号隔开，英文字体名必须位于中文名前，如果字体名中有空格，#，￥等符号时，必须加英文的单引号或双引号

5、字体加粗在css中使用font-weight来定义

6、font-style字体风格：

normal默认值浏览器显示标准的字体样式

italic浏览器显示斜体

oblique浏览器显示倾斜

7、font综合设置字体样式

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

必须按以上的语法顺序书写，不能换顺序，各个属性使用空格隔开

不需要的属性可以省略，但必须保留font-size和font-family 否则font属性不起作用

8、选择器：将css样式应用于特定的HTML元素中，执行这一任务的样式规则部分被称之为选择器，也叫选择符

（1）类选择器使用英文点号，后面紧跟类名，标签调用使用class=“类名”

例  .类名{属性1;属性2;}  优势是可以为元素对象定义单独或者相同的样式

（2）多类选择器可以给标签指定多个类名，类名之间使用空格隔开，class可以重复，可以同属于某一类，即同一个标签可以提示携带多个类。样式显示效果跟html类名的先后顺序没有关系，跟css样式书写的上下顺序有关

（3）id选择器使用#，后面紧跟id名，例  #id名{属性1;属性2;}    元素的id值是唯一的，只能用于文档中某个具体的元素

（4）两者区别：同一页面里不能有相同名字的id，但能有相同名字的class，尽量使用class，id是js使用的。最大的不同在使用次数上

（5）通配符选择器使用*，是所有选择器中作用范围最广的，能匹配页面中所有的元素    

例   *{属性1;属性2;}     margin外边距 padding内边距

（6）伪类选择器用于某些选择器添加特殊的效果，使用英文冒号

  :link{ }未访问的链接  :visited{ }已访问的链接  

:hover{ }鼠标移动到链接上  :active{ }选定的链接

注意写的时候不要颠倒顺序，lvha

（7）结构（位置）伪类选择器

:first-child选父元素的首个子元素的指定选择器

:last-child选父元素的最后一个子元素的指定选择器

:nth-child（n）匹配属于父元素的第n个子元素的指定选择器

:nth-last-child（n）匹配属于父元素的第n个子元素不论类型，从最后一个子元素计数

n可以是数字、关键词或公式

1. 否定伪类选择器
2. UI伪类选择器

9、CSS外观属性

color文本颜色

line-height行间距（行高，一般情况下比字号大7、8像素左右）

text-align水平对齐设置文本内容的水平对齐（left左对齐默认值、right右、center居中）

text-indnt首行缩进，可使用em为设置单位，1em代表一个汉字宽度，允许使用负值

letter-spacing字间距，允许使用负值，默认为normal，可对字母间距生效

word-spacing单词间距只对英文单词之间的间距有效，允许使用负值

颜色半透明color：rgba（r,g,b,a），a是alpha透明的意思取值范围0~1之间

文字阴影text-shadow：水平位置、垂直位置、模糊距离、阴影颜色

10、CSS样式表，书写位置

（1）行内式（内联样式）使用标签的style属性来设置元素的样式

例  <标签名 style="属性1:属性值1; 属性2:属性值2; "> 内容 </标签名>

（2）内部样式表（内嵌式）写在头部标签中使用style定义

例  <style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2;}</style>

（3）外部样式表（外链式）将所有样式放在一个或者多个以.CSS为拓展名的外部样式表文件中，通过link单标签将这个文件链接到html文档中，放在头部标签中

          例  <link href="CSS文件的路径" type="text/CSS"  rel="stylesheet" />

          注：href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。