1、css的发展史:
css 是用来表现我们html 文件的一种语言
1996年 发布第一个版本
2004年 发布的2.01版本
2010年 最新版本3.0版本
2、基本语法+选择器:
(1)基本语法
图1 基本语法
(2)选择器
选择器{
声明1;(声明里面包含了属性名和属性值)
声明2;
}
直接用标签改变样式,这个标签就称作标签选择器
(3)类选择器
类选择器 可以给多个标签设置一样的类名
<p class="c"> 我是p标签</p>
<h2 class="c">我是h2</h2>
id选择器 一个id名只能对一个标签(唯一性)
<h3 id="d">我是h3</h3>
选择器的优先级:
id 最大---class---标签最小
3、引入方式
(1)行内样式
图2 行内样式
在body段落中直接引入
(2)内部样式
图3 内部样式
(3)外部样式 (两种方法引入)
1、外部引用第一种 链接引入
<link rel="stylesheet" href"外部.css格式文本">
图4 使用link外部引用
2、外部引入第二种 导入本地css
@import url(导入本地.css文本)
图5 使用@import引入
优先级:
css样式遵循就近原则 行内样式>内部样式>外部样式
4、span标签
span标签没有实际意义
不能直接设置宽高,不独占一行
图6 span标签的使用
图6-1 span标签使用的效果图
5、字体样式
font-size: __px; 设置P标签里面的字体大小
font-family: "宋体" 设置P标签里面的字体类型
font-style: italic; 设置P标签里面的字体样式为倾斜
设置P 标签里面的字体粗细
font-weight: bold;加粗
font-weight: bolder;在bold基础上更粗
font-weight: lighter; 变得更细
font-weight: 100; 取值范围100-900,常用400 600 900(同样设置字体粗细)
亦可以简写为: font:italic 900 50px "楷体";
顺序: font : font-style(倾斜) font-weight(粗细) font-size(字体大小) font-family(字体类型)
6、文本样式:
color: #000; 黑色
color:#fff; 白色
color: #f00; 红色
color: #0f0; 绿色
color: #00f; 蓝色
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, .9);
rgba( );设置透明色,透明度的0.9可以写成.9
text-align: left; 文本居左
text-align:right 文本居右
text-align: center; 将文本居中
text-indent: __px; 设置首行缩进
line-height: 100px; 设置行高
设置行高等于高度,并且再设置text-align:center 就可以让文本水平居中
text-decoration:none; 设置文本的装饰(none为默认值,代表无)
text-decoration: underline; 给文本添加下划线
text-decoration: overline; 给文本上方加上一条线
text-decoration:line-through 给文本加上一条线,穿过这个文本
7、a标签的伪类
a:link 未访问时候的样式
a:visited 访问过后的样式
a:hover 鼠标悬浮上方的样式
a:sctive 鼠标未点击未松开时的样式
顺序不可错,记忆方式love hate
图7 a标签伪类的使用