CSS样式

p{选择器 font-size:12px;       /*字号*/ color:blue;  }   /*文字颜色*/

属性名font-weight:bold;   /*加粗*/ }属性值 分号注释，可跨行

 

 

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内

样式添加方法：行内，内嵌，单独文件

优先级照上述顺序

选择器分为：标签，类别，ID选择器

其中类别和ID选择器最大的区别为唯一性

要对标签内的具体内容进行声明也具有三种形式

分别为嵌套声明，集体声明，全局声明

注意多个class选择器混用要用空格隔开

基本CSS属性： 背景，文本，字体，尺寸，边距和填充，边框

background (背景)

• background-color  背景颜色
• background-image 背景图像
• background-repeat  背景平铺方式或重复
• background-attachment  背景图像是否固定或随平面滚动
• background-position  背景图像起始位置

Text(文本）

• color  颜色
• line-height  行高
• text-align  文本水平对齐方式
• vertical-align  文本垂直对齐方式
• Text-indent  首行缩进
• Text-shadow  字体阴影
• White-space  空白处理方式
• Word-spacing  字间距

Font

• Font-family   指定文本字体系列
• Font-size   指定文本字体大小
• Font-style  指定文本字体样式
• Font-weight  指定字体粗细

Dimension

• height  设置元素高度
• Line-height  行高
• max-height 元素最大高度
• max-width  元素最大宽度
• min-heigth  元素最小高度
• min-winth  元素最小宽度
• width 设置元素宽度

Margin&Padding

Margin

• Margin-top 上边距
• Margin-bottom   下边距
• Margin-left  左边距
• Margin-right  右边距

Padding

• Padding-yop  上填充
• Padding-bottom  下填充
• Padding-left  左填充
• Padding-right 右填充

Border

• Border-top  上边框
• Border-bottom  下边框
• Border-left  左边框
• Border-right  右边框
• Border-style  边框样式
• Border-width  边框宽度
• Border-color  边框颜色

div+css布局

div和span

　　div和span在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式

　　div和span的区别在与，span是内连元素，div是块级元素

盒模型

• margin:盒子外边框
• padding:盒子内边框
• border:盒子边框宽度
• width:盒子宽度
• height:盒子高度

div+css对网页进行布局

首先在页面整体上进行div标签划分内容区域，然后再用css进行定位，最后再对相应的区域添加内容

（1）用div将页面划分

拿到网站页面图后，首先将分析页面分为哪几块,然后用div划分出各个内容区域，一般页面有页面顶部、轮播图、主体内容、菜单主导航、页面底部几个部分构成，每个部分分别由自己的id来标识

（2）设计各内容块的位置

页面内容确定后，则需要根据内容本身去考虑页面的版型，例如菜单、双栏、左右中等内容块，确定后就可以使用css直接定位了

（3）用css定位

把页面框架确定后就可以css对各个设计的内容块进行定位，然后对各个块进行整体规划，最后再添加内容

css响应式布局

用css的没接查询，使用@media 的三种方式

（1）直接在CSS文件中使用

@media 类型 and (条件1) and (条件二)

{

css样式

}

@media screen and (max-width:980px ) {

body{

}

}

（2）：使用@import导入

@import url("css/moxie.css") all and (max-width:980px);

（3）使用link连接，media属性用于设置查询方式（最常用的）

<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>

我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可