1. css 概念
cascade style sheet
级联,层叠 样式 表格
控制网页上标签的各种样式: 颜色,字体,边框,间距...
#2. css 格式
1) 行内样式
每个标签加一个样式
<标签 style="多个样式"></标签>
缺点:样式代码重复
2) 内部样式表
<html>
<head>
<style>样式定义</style>
</head>
</html>
3. 行内样式
<标签 style="多个样式"></标签>
3.1 颜色控制
color:颜色值
颜色值可以是英文单词:red,blue,green,yellow, black, white
也可以是红绿蓝三原色: rgb(255,0,0)
还可以是16进制的值来表示: #FF0000
background-color: 背景色
3.2 字体相关的样式
font-size 像素 n px; 字体本身大小 n em;
font-family 字体名称:如宋体,隶书 ...
font-style: italic; 斜体
font-weight: bold; 粗体
3.3 对齐方式
text-align: center 居中, left 左对齐, right 右对齐
3.4 背景相关
background-image: url(背景图片路径)
background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复)
background-size: 110px 缩放背景图大小
3.5 div 标签
容器标签,可以容纳其它标签
<div>
<p>
<table>
</div>
作用:1)页面布局, 2) 统一处理
3.6 宽高
width: 宽度
height: 高度
单位可以以像素为单位 n px, 还可以是百分比 n %(以父元素为基准)
3.7 边框
border-color: 颜色
border-style: 样式(实线等)
border-width: 宽度
可以把它们合并为一个
border: blue solid 100%;
4.css 层叠式样式表 级联式样式表 cascade
格式: style="样式"
前颜色 color:值 (单词, rgb(红,绿,蓝) 0~255, #红绿蓝 0~FF)
背景色 background-color: 值
背景图片 background-image: url(图片路径)
控制背景图重复 background-repeat: 值(no-repeat, repeat-x, repeat-y)
文字 font-family: 字体值 (宋体,黑体...)
文字大小 font-size: 值 (px 像素, em 以原始大小比例)
文字样式 font-style: italic; 斜体
文字粗细 font-weight: bold; 粗体
对齐方式 text-align: 值(center, left, right)
文字修饰 text-decoration: 值(line-through 贯穿线, underline 下划线)
边框 border 边框颜色 线条样式 线条宽度;
border-color: 边框颜色
border-style: 线条样式( solid 实心线)
border-width: 线条宽度
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
5. 内间距
标签和内容之间的间隙,称为内间距
padding 可以同时控制4个方向上的内间距
padding : 10px 10px 10px 10px;
上 右 下 左
padding : 20px 5px;
上下 左右
padding : 10px
上下左右
padding-top
padding-right
padding-bottom
padding-left
6 外间距
同级标签之间的间隙,称为外间距
margin: 10px 10px 10px 10px;
上 右 下 左
margin :10px
上下左右
margin-top
margin-right
margin-bottom
margin-left
7. 盒子模型
外间距 --》 边框 --》 内间距 --》内容
8. z-index
代表该元素在z轴的位置,数字越大越向外, 要配合绝对定位使用
position:absolute; left:x坐标(向右); top:y坐标(向下)
绝对定位
rgba(红, 绿, 蓝, 透明度)
0~1 0 表示完全透明, 1 表示不透明
9. 样式表
重用样式
格式:
<html>
<head>
<style>
样式表
</style>
</head>
</html>