CSS
什么是CSS
CSS的概念
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS发展史
CSS的优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS基本语法
选择器 { 声明1;
声明2;
…… }
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
HTML中引入CSS样式
行内样式
使用style属性引入CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
行内样式：通过在标签内使用style属性来设置样式，样式的语法--》属性名:属性值;
在style标签内可以写多个样式
行内样式只针对当前所在的标签有效果
行内样式的弊端：
1）如果多个标签的样式是一样，那么样式代码需要重复写好几遍
2）标签内样式与内容混在一块，不够简洁明了
-->
<p style="color: red;font-size: 40px;text-decoration: underline;">这是一个段落标签</p>
<p style="color: red;font-size: 40px;text-decoration: underline;">我也是一个段落标签</p>
</body>
</html>内部样式表
CSS代码写在<head>的<style>标签中
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
内部样式：在head标签内书写style标签，在style标签内写样式
样式的语法规则：
选择器{
属性名:属性值;
属性名:属性值;
......
属性名:属性值;
}
选择器：可以使用我们所学的标签名作为选择器，还有很多其它的选择器，比如id选择、class选择器、层次选择器、属性选择器、结构伪类选择器等选择器
使用标签作为选择器，样式就会作作用在当前页面中所有的选定标签上
*/
/* 我们需要给p标签设置样式 */
p{
/* 设置样式--->属性名:属性值; */
color: red;
font-size: 40px;
}
h2{
/*
设置颜色样式的时候，颜色属性值的主要有以下几种：
1）直接写颜色的英文单词名称，比如red、green、blue
2）十六进制表示颜色，使用#+6位或者3位十六进制数字表示，比如 #12ABCD #00f
3）RGB表示法，rgb(数字1,数字2,数字3) 这3个数字的范围都是0-255 比如 rgb(255,0,0)
4）RGBA表示法，rgba(数字1,数字2,数字3,数字4)，前面3个数字的范围是0-255，第4个数字的范围0-1，表示透明度,数字越小越透明 比如 rgba(0,0,255,0.3)
*/
color: rgba(0,0,255,0.01);
}
</style>
</head>
<body>
<p>我是一个段落标签</p>
<p>我也是一个段落标签</p>
<h2>我是二级标题标签</h2>
</body>
</html>外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
链接式
<link href="style.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/myStyle.css">
</head>
<body>
<h2>山居秋暝</h2>
<p>空山新雨后，天气晚来秋。</p>
<p>明月松间照，清泉石上流。</p>
<p>竹喧归浣女，莲动下渔舟。</p>
<p>随意春芳歇，王孙自可留。</p>
</body>
</html> 导入式
@import url("style.css");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
外部样式：
将多个页面中相同的样式提取出来，写在一个后缀名为css的文件中
然后HTML页面中只需要引入这个外部样式文件就可以实现样式的使用
因为外部样式文件的两种方式
方式一：@import url(样式文件的路径); --》此代码需要写在style标签内
方式二：<link rel="stylesheet" href="样式文件的路径"> --》此代码直接写在head标签内
*/
/* 引入外部样式文件 */
@import url(css/myStyle.css);
</style>
</head>
<body>
<h2>赤壁</h2>
<p>折戟沉沙铁未销，</p>
<p>自将磨洗认前朝。</p>
<p>东风不与周郎便，</p>
<p>铜雀春深锁二乔。</p>
</body>
</html> 链接式与导入式的区别
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
CSS选择器
CSS基本选择器
标签选择器
HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>
语法
p { font-size:16px;}
类选择器
<标签名 class= "类名称">标签内容</标签名>
.class { font-size:16px;}
ID选择器
#id { font-size:16px;}
基本选择器的优先级
ID选择器>类选择器>标签选择器
标签选择器不遵循就近原则，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级
CSS高级选择器
层次选择器
后代选择器
语法 body p{ background: red; }
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
子选择器
body>p{ background: pink; }
相邻兄弟选择器
.active+p { background: green; }
通用兄弟选择器
.active~p{ background: yellow; }
属性选择器
E[attr]属性选择器
a[id] { background: yellow; }
E[attr=val]属性选择器
a[id=first] { background: red; }
E[attr*=val]属性选择器
a[class*=links] { background: red; }
E[attr^=val]属性选择器
a[href^=http] { background: red; }
E[attr$=val]属性选择器
a[href$=png] { background: red; }
CSS美化网页元素
使用CSS设置字体样式和文本样式
<span>标签
<span>标签 的作用
能让某几个文字或者某个词语凸显出来
字体样式
字体类型
font-family属性
p{font-family:Verdana,"楷体";}
字体大小
font-size属性
单位
px（像素）
em、rem、cm、mm、pt、pc
字体风格
font-style属性
normal、italic和oblique
字体的粗细
font-weight属性
字体属性
font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 通过标签选择器来给h2标签设置字体样式 */
h2 {
/* font-family:设置字体类型，可以设置英文字体，也可以设置中文字体，如果同时设置英文字体和中文字体，英文字体需要在前面 */
/* font-family:"仿宋" ; */
/* font-size:设置字体大小 */
/* font-size: 50px; */
/* font-style:设置字体风格，主要用来设置字体是否倾斜显示 */
/* font-style: oblique; */
/* font-weight:设置字体的粗细 */
/* font-weight: 100; */
/*
上面设置字体样式是分开来写的，也可以合并写，使用font属性来写
font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
*/
font: oblique 100 50px "仿宋";
}
</style>
</head>
<body>
<h2>我是一个二级标题标签</h2>
</body>
</html>文本样式
文本颜色
color属性
RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb(r,g,b) : 正整数的取值为0～255
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
排版文本段落
水平对齐方式
text-align属性
首行缩进
text-indent：em或px
行高
line-height：px
文本修饰和垂直对齐
文本装饰
text-decoration属性
垂直对齐方式
vertical-align属性：middle、top、bottom
使用CSS设置超链接样式
超链接伪类
伪类样式
标签名:伪类名{声明;}
使用CSS设置超链接
设置伪类的顺序：a:link->a:visited->a:hover->a:active
使用CSS设置列表样式
列表样式
list-style-type
list-style
li {
list-style:none;
}
使用CSS设置背景样式
背景样式
常见的背景样式
背景颜色
background-color
背景图像
background-image
设置背景图像
背景图像
background-image属性
背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
背景定位
background-position属性
