CSS基础

学习了CSS，做个总结~。

1. 什么是CSS(级联样式表 Cascade Style Sheet)
   现有HTML标签，不能完成更好的显示效果，需要CSS样式表，进行处理。

2. CSS样式表的使用方式,总共有三种，内嵌样式，内部样式，外部样式，一般我们使用外部样式。
   a). 内嵌式的CSS样式表
   <element style=”样式属性1:值1;样式属性2:值2....”/>

   
   image.png
   

   b). 内部CSS样式表

   
   image.png

i. 选择器
标签选择器 h1 p

image.png

2. id选择器

   
   image.png

3. 类选择器

image.png

4. 组合选择器

   
   image.png

5. 派生选择器

   
   image.png

c) 外部CSS样式表
i. 定义.css的样式文件

image.png

ii. 引入css文件
<link rel=”stylesheet” type=”text/css” href=”css文件的路径”/>

3. CSS的样式属性

a )基本属性
i. color:值 （“red”,”black”,”#RGB” ）
作用用是该表文件的前景颜色
ii. font-size:值
设置文字大小
iii. font-family:值
设置字体:tahoma
iv. text-decoration:值
设置字体线：underline overline line-through
v.text-align:值
对其方式：left right center
vi. width:设置宽度
vii. height设置高度
viii. cursor:鼠标的设置
pointer（手） wait(等待)
ix. display:设置元素的隐藏或者显示
none:隐藏 不占用页面流
block:块级元素的显示 h1 li table p
inline:行内元素的显示 <input

b) 背景相关
i. background-color:#RGB “red”
ii. background-image:url(“”)

c) 列表相关
i. list-style-type

d) 布局相关的内容
i. 2个与布局相关的标签

1. <div> 块 （块级元素）
   整张网页划分成若干部分，每一个部分都是一块内容

2. <span> 部分 （行内元素）
   需要为文本加入样式，js操作
   ii. box盒子模型

3. 边框相关的样式 border

4. 内补白（内边距）padding
   外补白（外边距）margin

   
   image.png

5. HTML中布局
   a) table布局 （过时）
   b) Div+CSS方式 （主流）
   特点：布局的内容 摆脱现有的页面流
   i. 绝对布局 （absolute)
   position:absolute
   top:距浏览器上面边距
   left:距浏览器坐标的边距
   z-index:浮层
   ii. 流式布局 （float）
   float:left 摆脱当前页面流 从左往右浮上来
   clear:both 认可前面浮动布局占用页面的位置。（不能算外边距）