Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
一、CSS简介
（一）、什么是CSS？
CSS指层叠样式表 (英文Cascading Style Sheets)。
（二）、CSS能够干什么？
提升网页开发的工作效率，控制多重网页的样式和布局。
（三）、CSS语法结构
p{color: blue;}
h1,p：选择器，表示选择网页中所有的p标签（段落）
color：属性，表示段落字体的颜色属性
blue：值，设置p标签中字体的颜色为blue（蓝色）
;：分号用于分隔多个属性
（四）、CSS的使用方式
1、内嵌样式
使用标签style属性，在style属性是值中书写样式，只能控制当前的HTML标签。
<h1 style="color: teal;">书愤</h1>
设置这一个h1标签的字体颜色为teal，其它h1标签不受影响
2、内部样式
在head头部，使用style标签，在style标签内书写样式，控制整个网页样式。
<style type="text/css">
p{color: blue;}
</style>
type="text/css"：表示这是样式文件
p{color: blue;}：具体的样式内容
3、外部样式
写在css文件中，可以控制所有引用该样式文件的网页。
style1.css文件名，下面是内容，css文件内不需要style标签
body{
text-align: center;
background-color: cyan;
}
使用link标签引入：
<link rel="stylesheet" type="text/css" href="css/style1.css"/>
4、优先级比较
内嵌样式优先于内部样式和外部样式；
内部样式和外部样式和优先级取决于style标签位置和link引入标签位置，因为网页是从上往下解析，所以style标签（内部样式）和linl标签（外部样式引入）谁靠下谁优先级高，因为下面的后解析会覆盖先解析的数据。
因此网页若有外部样式表引入，建议先引入再写内部样式，服从控制范围越小，优先级越高的一般原则。
5、案例源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初识样式表CSS</title>
<link rel="stylesheet" type="text/css" href="css/style1.css"/>
<style type="text/css">
p{color: blue;}
</style>
</head>
<body>
<h1 style="color: teal;">书愤</h1>
<p>早岁哪知世事艰，中原北望气如山。</p>
<p>楼船雪夜瓜洲渡，铁马秋风大散关。</p>
<p>塞上长城空自许，镜中衰鬓已先斑。</p>
<p>出师一表真名世，千载谁堪伯仲间。</p>
</body>
</html>
6、案例运行效果
二、CSS选择器
选择器用于选择你想要的元素的样式。
（一）、基本选择器
1、标签选择器
格式：HTML标签{css语句···}
所有的HTML标签都可使用
若有多个标签，则标签之间以“,”分隔
控制范围：所有的div和p标签里的元素都会使用该样式
案例：
CSS代码：
<style type="text/css">
div,p{
color: red;
font-size: 20px;
}
</style>
HTML代码：
<body>
<h1>CSS选择器学习</h1>
<p>学习时间：2019/5/11</p>
<div >
<p>作者：Mr.C</p>
<h1>标签选择器（element，element）</h1>
<p>示例：div，p</p>
<p>说明：所有<div>元素和<p>元素</p>
</div>
<p>学习完标签选择器（element，element）了</p>
</body>
运行效果
2、类选择器
格式：.类名{css语句···}
控制范围：所有class="类名"的标签
案例：
.code{
font-weight: bolder;
font-size: 15px;
color: black;
}
使用：
<pre class="code">···</pre>
3、id选择器
格式：#ID{css语句···}
ID不可以以数字开头，可以字母数字混合
ID必须具有唯一性
控制范围：id="ID"的标签
案例：
#ID12{
color: chocolate;
text-decoration: underline;
}
使用： <p id="ID12">···</p>
4、嵌套选择器
格式：div p{css语句···}
控制范围：<div>元素里的<p>元素
案例：
CSS代码：
<style type="text/css">
div p{
color: red;
font-size: 20px;
}
</style>
HTML代码：
<body>
<p>学习时间：2019/5/11</p>
<div id="div1">
<p>作者：Mr.C</p>
<h1>嵌套关系（element element）</h1>
<p>示例：div p</p>
<p>说明：<div>元素里的<p>元素</p>
</div>
<p>学习完嵌套关系（element element）了</p>
</body>
运行效果：
5、父子关系
格式：div>p{css语句···}
控制范围：所有父级是<div>元素的<p>标签
案例：
CSS代码：
<style type="text/css">
div>p{
color: red;
font-size: 20px;
}
</style>
HTML代码：
<body>
<p>学习时间：2019/5/11</p>
<div>
<p>作者：Mr.C</p>
<h1>父子关系（element>element）</h1>
<p>示例：div>p</p>
<p>说明：所有父级是<div>元素的<p>元素</p>
</div>
<p>学习完父子关系（element>element）了</p>
</body>
运行效果
6、并列关系
格式：div+p{css语句···}
控制范围：选择所有<div>元素之后紧挨着的<p>元素（</div>之后紧挨的<p>）
案例：
CSS代码：
<style type="text/css">
div+p{
color: red;
font-size: 20px;
}
</style>
HTML代码：
<body>
<h1>CSS选择器学习</h1>
<p>学习时间：2019/5/11</p>
<div >
<p>作者：Mr.C</p>
<h1>并列关系（element+element）</h1>
<p>示例：div+p</p>
<p>说明：选择所有<div>元素之后紧挨着的<p>元素</p>
</div>
<p>学习完并列关系（element+element）了</p>
</body>
运行效果
7、属性选择器
格式：[target]{css语句···}
控制范围：选择所有带有target属性的元素
案例：
CSS代码：
<style type="text/css">
[target]{
color: red;
font-size: 20px;
}
</style>
HTML代码：
<body>
<h1>CSS选择器学习</h1>
<p><a href="#" target="_self">学习时间：2019/5/11</a></p>
<div>
<p><a href="#" target="_blank">作者：Mr.C</a></p>
<h1>属性选择器[attribute]</h1>
<p>示例：[target]</p>
<p>说明：选择所有带有target属性的元素
</div>
<p><a href="#">学习完属性选择器([attribute])了</a></p>
</body>
运行效果
三、常用（文本、字体、列表、背景、超链接）样式
（一）、常用文本、字体样式
<style type="text/css">
#right h1{
color: teal;/*文本颜色*/
text-align: center;/*文本水平对齐方式*/
text-decoration: underline;/*文本修饰（上划线，下划线，中划线等）*/
letter-spacing: 30px;/*文本字符间距*/
line-height: 40px;/*行高*/
height: 40px;/*边框（border）的高度，如果行高等于边框高度则文本垂直居中*/
}
#right p{
font-family: "楷体";/*字体样式，不建议设置*/
font-style: initial;/*字体风格（倾斜等等）*/
font-size: 25px;/*字体大小*/
font-weight: bolder;/*字体粗细*/
}
</style>
HTML代码：
<body>
<div id="left">
<h1>书愤</h1>
<p>早岁哪知世事艰，中原北望气如山。</p>
<p>楼船雪夜瓜洲渡，铁马秋风大散关。</p>
<p>塞上长城空自许，镜中衰鬓已先斑。</p>
<p>出师一表真名世，千载谁堪伯仲间。</p>
</div>
<div id="right">
<h1>书愤</h1>
<p>早岁哪知世事艰，中原北望气如山。</p>
<p>楼船雪夜瓜洲渡，铁马秋风大散关。</p>
<p>塞上长城空自许，镜中衰鬓已先斑。</p>
<p>出师一表真名世，千载谁堪伯仲间。</p>
</div>
</body>
运行效果
（二）、列表样式
CSS代码
<style type="text/css">
div{
float: left;
margin: 25px;
border: 1px solid blue;
}
#right ul li{
border: 1px solid cyan;/*显示li标签的边框*/
list-style: none;/*除去小圆点*/
list-style-image: url(img/icon.bmp);/*使用图片代替小圆点*/
}
#right ul #li1{
list-style-position: inside;/*定义小圆点的位置（在li标签的border内）*/
}
#right ul #li2{
list-style-position: outside;/*定义小圆点的位置（在li标签的border外）*/
}
</style>
HTML代码
<body>
<div id="left">
<ul>
<h1>书愤</h1>
<li>早岁哪知世事艰，中原北望气如山。</li>
<li>楼船雪夜瓜洲渡，铁马秋风大散关。</li>
<li>塞上长城空自许，镜中衰鬓已先斑。</li>
<li>出师一表真名世，千载谁堪伯仲间。</li>
</ul>
</div>
<div id="right">
<ul>
<h1>书愤</h1>
<li id="li1">早岁哪知世事艰，中原北望气如山。</li>
<li id="li1">楼船雪夜瓜洲渡，铁马秋风大散关。</li>
<li id="li2">塞上长城空自许，镜中衰鬓已先斑。</li>
<li id="li2">出师一表真名世，千载谁堪伯仲间。</li>
</ul>
</div>
</body>
运行效果
（三）、常用背景样式及雪碧图
background-color：背景颜色（也可用background）
background-image:url(...)：背景图片
background-repeat：背景平铺方式（repeat:x与y全平铺；no-repeat:不平铺；repeat-x: 在x轴上平铺 ；repeat-y: 在y轴上平铺）
background-position：背景显示位置
background-position-x : 正数为右移，负数是向左移动
background-position-y : 正数是向下移，负数是向上移动
CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景样式学习</title>
<style type="text/css">
*{/*清除所有格式*/
padding: 0px;margin: 0px;border: 0px;margin: 0px auto;
}
#div1{/*设置框体宽高，以及边框*/
width: 230px;height: 420px;
border: 1px solid #F14376;
}
h1{/*设置大标题格式*/
height: 45px;line-height: 45px;/*标题垂直居中*/
background-color: #F14376;/*设置标题背景色*/
color: #fff; font-size: 16px;text-align: center;/*设置字体样式及居中*/
}
h2{/*设置二级标题格式*/
font-size: 18px;/*设置字体大小*/
background-image: url(img/line.jpg);/*二级标题前的红色小竖线图片*/
background-repeat: no-repeat;/*设置图片不平铺*/
background-position: 8px;/*向右移动8px，向下移动8px图片到合适位置*/
padding-left: 18px;/*移动文字，以免覆盖图片*/
}
li{/*设置列表项格式，雪碧图应用*/
list-style: none;/*清除小图标，准备用图片代替*/
background: url(img/hot.jpg) no-repeat 0px 5px;/*设置背景图，不平铺，右移0px，下移5px*/
height: 40px;line-height: 40px;/*设置文本垂直居中*/
padding-left: 26px;/*设置字体右移动26px，不要和图片重叠*/
}
/*下面是为每个列表项设置图标，雪碧图应用，一张图片，可以显示4个图标*/
#icon2{
background-position-y: -28px;
}
#icon3{
background-position-y: -62px;
}
#icon4{
background-position-y: -95px;
}
/*超链接样式*/
a{
font-size: 15px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="div1">
<h1>优惠商品分类</h1>
<h2>热门分类</h2>
<ul>
<li><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li>
<li id="icon2"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li>
<li id="icon3"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li>
<li id="icon4"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li>
</ul>
<h2>热门分类</h2>
<ul>
<li><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li>
<li id="icon2"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li>
<li id="icon3"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li>
<li id="icon4"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li>
</ul>
</div>
</body>
</html>
运行效果
图片资源
（四）、常用超链接样式以及伪类
伪类的格式以及使用
伪类可以实现一下特殊效果，图鼠标悬停，链接字体变色，放大等。
在上面（三）、背景样式的使用中的CSS代码末尾添加以下代码即可实现这些效果
a:link{color: black}/*链接默认时候的样式*/
a:active{color: cyan;}/*链接按住不放时的样式*/
a:hover{color: blue;font-size: 150%;}/*鼠标悬停时的样式*/
a:visited{color: green;}/*链接被点击后的样式*/
运行效果
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
