1、CSS(Cascading Style Sheet)叠层样式表。
用于控制网页样式并允许样式信息与网页内容分离的一种标记性语言。
2、CSS引入方式
1)行内样式
直接在标签后面加上 style,并设置CSS属性及属性值 <p style="color:red;">你好</p>
2)内嵌式
在<head></head>中间 加入 <style="type/css"> </style>
3)链接式(推荐使用)
<link rel="stylesheet" type="text/css" href="CSS/demo.css">
4)导入样式 (基本不用)
<style> @import url(1.css) </style>
3、CSS选择器
1)标签选择器
P{ font-size:12px; background-color:#00FFFF; color:#FF0033; }
2)类别选择器
.demoClass{ font-size:12px; background-color:#900; color:090; }
3)ID选择器
#demoID{ font-size:30px; background-color:#0099FF; color:#FFFF00; }
选择器优先级:ID选择器>类别选择器>标签选择器
4、CSS文字效果
1)字体:font-family
2)文字大小:font-size
3)文字颜色: color
4)文字粗细: font-weight
5)文字
下划线:text-decoration:underline;
删除线:text-decoration:overline;
定划线:text-decoration:line-through;
6) 英文字母大小写
单词首字母大写:text-transform:capitalize;
单词全部大写:text-transform:uppercase;
单词全部小写:text-transform:lowercase;
7)文字间距 letter-spacing 默认为 normal;
8)对齐方式 text-align
水平居中 text-align:center;
9)行间距 line-height
垂直居中 line-height:容器高度;
5、图片效果
1)图片边框 border
边框类型border-style dotted 点划线 dashed虚线 solid实线
边框颜色border-color
边框宽度border-width
2)图文混排
设置浮动float
3)背景
背景颜色:background-color
背景图片:background-image
图片重复
水平方向重复 background-repeat:repeat-x;
垂直方向重复 background-repeat:repeat-y;
不重复 background-repeat:no-repeat;
图片位置 background-position
固定背景图片:background-attachment:fixed;