CSS基础

一、CSS简介

引入方式

1、外部

<link rel="stylesheet" type="text/css" href="文件路径" />

2、内部

<style type="text/css">
    ……
</style>

3、行内

<div style="color:red;">hello</div>

二、CSS选择器

元素 id class 后代 群组

1、元素

div{color:red;}

2、id

 #lvye{color:red;}

3、class

 .lv{color:red;}

3、后代

 #father1 div {color:red;}
 选择“id为father1的元素”下的所有div元素

4、群组

 h3,div,p,span{……}
 表示选中所有的h3元素、div元素、p元素和span元素

三、字体样式

font-family：字体类型
font-size：字体大小
font-weight：字体粗细
font-style：字体风格
color：字体颜色

font-family: 字体1, 字体2, ... , 字体N;

font-size: 像素值/关键字; small/medium/large  10px

font-weight: 数值/关键字; 100~900 normal lighter bold bloder

font-style: 取值; normal italic  oblique 正常  斜体  斜体

color: 颜色值; 关键字 RGB

CSS注释
/* 注释的内容 */

四、文本样式

text-indent：首行缩进
text-align：水平对齐
text-decoration：文本修饰
text-transform：大小写转换
line-height：行高
letter-spacing：字母间距
word-spacing：词间距

text-indent: 像素值;是font-size值的2倍

text-align: 取值; left center   right

text-decoration: 取值;none  underline  line-through  overline
                      无   下划线  中划线  顶划线

text-transform: 取值; none  uppercase  lowercase  capitalize
                    无   转大写  转小写  每个英文单词首字母转大写

line-height: 像素值; 文本一行的高度

letter-spacing: 像素值;

word-spacing: 像素值;

五、边框样式

border-width：边框的宽度
border-style：边框的外观
border-color：边框的颜色

border-width：像素值；

border-style：none/dashed/solid 无  虚线 实线

boder-color：关键字/RGB；

border: 1px solid red;
border-width: 1px;
border-style: solid;
border-color: red;


局部样式 上下左右 top  bottom left right
border-top: 1px solid red;
border-top-width: 1px;在这里插入代码片
border-top-style: solid;
border-top-color: red;

六、列表样式

list-style-type:定义列表项符号 针对ol ul
list-style-image: url(图片路径);

list-style-type: 取值; 
ul decimal  lower-roman upper-roman  lower-alpha upper-alphala
阿拉伯数字  小写罗马 大写罗马 小写英文 大写英文
ol  disc  circle square
实心圆 空心圆 正方形
none
去除列表项符号


list-style-image: url(图片路径);
把列表项符号改为一张图片

七、表格样式

caption-side:标题位置
border-collapse:表格边框合并
border-spacing: 表格边框间距

caption-side: 取值;top  bottom

border-collapse: 取值; separate 边框分开，有间隙   collapse 边框合并，无间隙

border-spacing: 像素值;

八、图片样式

width height
border: 边框样式
text-align:：水平对齐
vertical-align:垂直对齐
float:文字环绕

width: 像素值;
height: 像素值;

border: 1px solid red;

text-align:取值； left center right

vertical-align:top middle baseline bottom

float:取值 left right  向左或向右浮动

九、背景样式

background-image:定义背景图片地址
backgroun-repeat：定义背景图片重复，横向纵向
background-position：定义背景图片位置
background-attachment：定义背景图片固定
background-color: 颜色值;

background-color: 颜色值; 关键字RGB


background-image: url(图片路径);


background-repeat: 取值;
repeat  repeat-x repeat-y no-repeat
水平和垂直同时铺平  水平  垂直  不


background-position: 像素值/关键字;
background-position: 水平距离 垂直距离;
关键字：top left  top center  top right
     center left  center center   center right
     bottom left   bottom center   bottom right


background-attachment: 取值;
scroll跟着元素一起滚动  ficed固定不动

十、超链接样式

超链接伪类
a:link{…}  定义a元素未访问时的样式
a:visited{…} 定义a元素访问后的样式
a:hover{…}  定义鼠标经过a元素时的样式
a:active{…} 定义鼠标点击激活时的样式
顺序不能变


元素:hover{…} 鼠标经过任意元素


鼠标样式
cursor: 取值;
default 默认 
pointer 手
text：输入时的竖线

自定义
cursor: url(图片地址), 属性值;
.cur图片后缀  default、pointer和text

十一、盒子模型

盒子模型组成部分
content padding margin border
一对div是一个盒子

content内容
只有块元素才可以设置宽和高
width: 像素值;
height: 像素值;


padding：内边距
padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

padding: 像素值; 上下左右
padding: 像素值1 像素值2;上下  左右
padding: 像素值1 像素值2 像素值3 像素值4;上右下左


margin外边距
margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

margin: 像素值;
margin: 像素值1 像素值2;
margin: 像素值1 像素值2 像素值3 像素值4;


border: 1px solid red;

十二、浮动布局

正常文档流
块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。

脱离文档流
要改变正常文档流：浮动和定位

浮动 float：right/left 
清除浮动 clear: 取值; 
left  right  both 清除左浮动  清除右浮动  左右都清除

十三、定位布局

position属性取值
fixed：固定定位
relative：相对定位
absolute：绝对定位
static：静态定位（默认值）

固定位置
被固定的元素不会随着滚动条的拖动而改变位置。
position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;


该元素的位置是相对于它的原始位置计算而来的。
position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;


绝对定位元素的前面或后面的元素会认为这个元素并不存在，
此时这个元素浮于其他元素上面，已经完全独立出来了。
position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;