css基础笔记·

css基础

---

一、css介绍

层叠样式表，用来美化页面的，将表现与样式相分离，减少代码写作，提高浏览器加载速度。

二、语法

1.行内样式

<h1 style="color:red"></h1>

2.内嵌样式

<style>
h1{color:red;font-size:20px;}
</style>

3.基本选择器

1. *{}通配符选择器（所有标签）
2. h1{}选择器
3. #font{} id选择器 选择id属性 是唯一的
4. .font{}类选择器 选择class属性 可以重复``

4.字体样式

1. color字体颜色
   单词：red
   十六进制值：#0f0f0f
   色阶值：rgb() 0-255
   rgb(0,0,0)黑色 rgb(255,255,255)白色

2. font-size字体大小
   单位：像素或百分比， 页面默认：12-16px

3. font-weight字体加粗
   100-900页面默认400

4. font-style设置斜体
   normal 默认
   itatic 倾斜

5. font-family字体样式
   font-family：“宋体”，Anal默认字体是宋体

6. word-spacing单词间距
   单位：像素px或百分比%

7. letter-spacing字体间距
   单位：像素或百分比%

8. line-height行高
   单位：像素或百分比%

9. text-algin水平对齐
   left左
   right右
   center中

10. vertical-algin垂直对齐
    top上
    buttom下
    middle中

5.css属性

1.文本修饰

text-decoration文本修饰
none无线体
underline下划线
line-throught删除线
overline上划线
2.尺寸
width宽高
height高度
3.边框
border-width边框粗细 单位：像素px或百分比
border-color 边框颜色
border-style 边距样式：none无边距 solid实线 double双边线 dotted点线 dashed虚线
简写：border：1px solid red
方向：left左 right右 top上 bottom下
4.边距
magin外边距 单位：px或百分比
padding内边距 单位：px或百分比
方向：left左 right右 top上 buttom下。
例： margin-left左边距
写作顺序：
margin：50px 四边距离
margin：50px 80px 上下 左右
margin：50px 80px 100px 上 左右 下
margin：50px 80px 100px 120px 上 右 下 左
5.盒模型
标准盒模型：填充(宽高)+内边距+外边距+边框
IE盒模型(IE低版本)：填充(宽高)+内边距+边框
让块级元素水平居中：margin：0 auto；
让文字和图片水平居中：text-align：center；
让文字和图片垂直居中：line-height=标签高度
去掉标签自带的间距值:

*{margin：0px;padding:0px;}