CSS学习（一）

# CSS

## CSS引入方式

css引入方式共有一下3种

```html
外部引入：<link rel="stylesheet" type="text/css" href="文件路径"/>
内部引入:<style type="text/css"></style>
行内引入：<div style="color:red"></div>
```

## 字体样式

```css
font-family 字体类型                             font-size 字体大小
语法：font-family:字体1，字体2，字体3              语法：font-size：取值
可选值：Arial "Times new Roman" "微软雅黑"        可选值的单位：px em rem %

font-weight 字体粗细                            font-style 字体风格
语法:font-weight：取值                          语法:font-style：取值
可选值：normal 正常   lighter 较细               可选值：normal 正常   italic 斜体
       bolder 很粗   bold 较粗                          oblique 斜体       
```

## CSS注释

```html
语法：/* 注释内容 */
```

## 文本样式

```css
text-decoration 文本修饰                   text-indent 首行缩进 
语法：text-decoration：取值                语法：text-indent：像素值 
可选值： none 去除所有效果                 
        overline  顶划线                   line-height 行高 
        underline 下划线                   语法:line-height：像素值
        line-through 中划线
        
text-align  水平对齐
语法：text-align：取值
可选值：left 左对齐   center 居中对齐 
       right 右对齐

```

## 间距

```css
letter-spacing 字间距 语法：letter-spacing：像素值
word-spacing 词间距   语法：word-spacing：像素值
```

## 边框样式

```css
border-width  边框的宽度   border-height 边框的高度   border-color 边框的颜色
border-style  边框的样式
可选值：none 无样式   dashed 虚线   solid 实线
border的简写样式 语法：border：宽度 颜色 样式 
```

## 边框的局部样式

```css
border-top 上边框   border-bottom 下边框   border-left 左边框   border-right 右边框
边框局部简写语法：border-top：1px solid red
```

## 列表样式

```css
list-style-type 列表项目符号     语法：list-style-type：取值
可选值：lower-roman 小罗马数字    upper-roman 大写罗马数字       
       lower-alpha 小写英语      upper-alpha 大写英语       
       decimal     阿拉伯数字    disc  实心圆       
       circle      空心圆        square 正方形   
```

## 表格样式

```CSS
caption-side 表格标题位置   语法：caption-side：取值
可选值：top 标题在顶部   bottom 标题在底部

border-collapse 表格边框合并 语法： border-collapse：取值
可选值：separate 边框分开，有空隙
       collapse 边框合并，无空隙

border-spacing 表格边框间距  语法：border-spacing：像素值
```

## 图片样式

```css
text-align 图片对齐   语法：text-align：取值
可选值：left 左对齐   right 右对齐   center 居中对齐

vertical-align 垂直对齐   语法：vertical-align：取值
可选值：top 顶部对齐   middle 中部对齐
       baseline 基线对齐   bottom 底部对齐

图片大小：width 宽度   height 高度
图片边框：border：1px solid red
```

## 文字环绕

```css
float 文字环绕   语法：float：取值 可选值:left 元素向左浮动   right：元素向右浮动
```

## 背景样式

```css
background-color 背景颜色   语法：background-color：颜色值
background-image 背景图片   语法：background-image：url（图片路径）

background-repeat 图片背景重复 语法：background-repeat：取值
可选值：repeat 在水平和垂直方向上同时平铺   repeat-x 只在水平方向（x轴）上平铺
       repeat-y 只在垂直方向（y轴）上平铺  no-repeat 不平铺

background-position 图片背景位置   语法：background-position：像素值/关键字
background-attachment 背景图片固定 语法：background-attachment：取值
可选值：sroll 随元素一起滚动   fixed 固定不动