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属性