前端基础四

css  Cascading Style Sheets 层叠样式表

优势：

1.实现内容与样式的分离 有利于团队开发

2.实现样式复用 提高开发效率

3.实现页面的精确控制

4.利于搜索引擎的搜索

基本语法：

三部分组成:选择器 属性 属性值

基本结构

<style type="text/css">

   选择器{

       对象的属性1：属性值1

   }

</style>

css代码推荐小写

选择器的分类:

标签选择器 类选择器 ID选择器

1.标签选择器

对页面某类标签的内容进行修饰时

标签名{

   属性名1:属性值1;

}

2.类选择器

对个别元素设置样式

.类名{

    属性名1:属性值1;  

}

应用样式: 使用标签class属性引用样式

3.ID选择器

#ID标识符{

   属性名1:属性值1;

}

常用的样式修饰

文本及字体属性

line-height 行高

text-align 设置对齐方式

letter-spacing 字符间距

text-decoration 设置文本修饰

white-space 规定如何处理空白

font

font-family字体类型

font-size 字体大小

font-weight字体粗细

粗细-大小-字体类型

背景属性

background-color    背景颜色

background-image   背景图片

background-repeat  背景平铺方式   

backtround-positon  背景初始位置

背景颜色 图片  平铺方式

CSS Sprite技术

list-style

none 去掉修饰符号

disc 实心圆

circle空心圆

square实心正方形

decimal数字

float浮动

可以改变块级元素默认的换行显示方式

块级元素设置浮动后会失去独占一行的特征 

float:clear只对块级元素有效

盒子模型

边框border  内边距padding  外边距margin

缩写形式为 上 右下左  特殊设置 auto 

border:边框

border-color:颜色

border-width:宽度

border-style:样式  none  solid dashed

padding:内边距  不允许为负值

宽高及实际占位：

元素实际占位高度=height+上下填充+上下边框高度

元素实际占位宽度=width+左右填充宽度+左右边框宽度

超连接伪类

a:link 未单击访问时的样式

a:visited 单击访问后的样式

a:hover 鼠标悬停的样式

a:active 鼠标单击释放的样式

应用样式的三种方式

1.内部样式表

<style type="text/css">

</style>

2.外部样式表

<link rel="stylesheet" type="text/css" href="css文件地址"/> 推荐

3.行内样式表

<span style="display:block"/></span>

优先级:

行内样式表 > 内部样式表>外部样式表

ID选择器>类选择器>标签选择器