本帖最后由 鱼丸儿 于 2017-11-8 10:56 编辑
各位同学们，在完成了4天的HTML课程学习后，我们将要进入下一个阶段的学习----CSS的学习
CSS主要完成对网页的样式美化的工作，优化网页设计布局，另外CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
接下来我们一起来学习新课程------CSS
一、CSS简介
1.1什么是CSS
CSS（Cascading Style Sheets的缩写），翻译为“层叠样式表”或者“级联样式表”，简称样式表。
1.2 CSS的主要作用
它主要是用来给HTML网页来设置外观或者样式
外观或者样式：HTML网页中的文字的大小、颜色、字体，网页的背景颜色、背景图片！
二、CSS代码的书写方式
2.1什么是书写方式？
CSS代码应该书写在什么地方！
书写方式分为三种：行内式、嵌入式、外链式
2.2行内式
什么是行内式？
将CSS代码书写在HTML标签的style属性中
style是一个通用属性，每一个标签里面都拥有这个属性！
语法格式：
<标签名 style=”属性:值;属性:值;”></标签名>
示例代码：
[PHP] 纯文本查看 复制代码 <div style="height:30px;width:30px;background-color:red">这里是红色方块</div>
代码解析：赋予div标签style属性，属性值分别为----高300px，宽----300px，背景颜色-----红色。
代码显示效果
语法结构中，理论上可以书写多对 属性:值;
关于具体能够书写怎样的属性：值，我们将在后续的学习中学习。
2.3 嵌入式
什么是嵌入式？
将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的<style>标签将CSS代码嵌入到HTML网页中！
语法规则：
[PHP] 纯文本查看 复制代码 <style type=”text/css”>
/*书写CSS代码
选择器{属性:值;属性:值;}*/
</style>
示例代码：
[PHP] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌入式</title>
<style type="text/css">
/*嵌入式*/
/*
选择器{属性:值;}
*/
div{
width: 100px; /*设置宽度100像素*/
height: 100px; /*高度100像素*/
background-color: #FF0000; /*将背景颜色设置为红色*/
}
</style>
</head>
<body>
<!--要使用CSS代码给div设置宽度100像素高度100像素以及背景颜色为红色
把div理解为一个存放东西的盒子
-->
<div>这里是嵌入式代码</div>
</body>
</html>
案例效果：
注意：
1、如果我们使用的是HTML5的文档 type属性可以省略不写！
2、<style></style>它可以出现在HTML中的任何地方，但是一般情况我们只会将它放置在head标签里面
2.4外链式
什么是外链式？
外链式是指单独写一个以.css为扩展名的文件，然后在<head></head>标签中使用<link />标签，将这个css文件链接到html文件中
注意：
css文件不能单独的运行，它必须要依赖于HTML文件！
语法格式：
代码示例：
注意：
1、我们一定要确保css文件已经被正确的引入成功！
2、link标签可以有多个，一个HTML页面可以同时的引入多个单独的CSS文件
我们可以使用如下方式检查以.css结尾的样式文件是否引入成功。
总结：
使用嵌入式的方式来书写CSS代码，它只能作用于当前的HTML文件
使用外链式的方式来书写CSS代码，它可以作用于多个（一个CSS文件被多个HTML文件引入）HTML文件
下图为一个HTML加载多个css文件案例。
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
到这里我们完成了对于css三种添加形式的学习，接下来我们将对css的一些语法上的规则进行学习。
三、注释
格式：
/* 被注释的内容 */
注意：
千万不要在CSS代码中使用HTML的注释
四、选择器
4.1什么是选择器
选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
这里有一个问题给大家
我们有三种添加CSS样式的方式，是三种添加方式都需要选择器么？
答：
并不是三种添加CSS方式都需要选择器，行内式的添加CSS方式并不需要选择器的，因为行内式的代码直接书写到想要作用的标签上，并不需要选择器协助选择。
如下：
<div style="height:30px;width:30px;background-color:red">这里是行内式红色方块</div>
选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。
4.2基本选择器
基本选择器包含如下四种：
通用选择器
在这里"*"具有通配符的性质，即“*”代表着页面内所有标签，上图中这样书写，会将"{}"内的样式作用于页面中的所有标签，作用范围很广。这是通配符选择器最大的特点和优点，当然这也为通用选择器带来了一个负面的影响，一个页面中很少有一个样式需要页面内所有标签都需要。
标签选择器
相信同学们都发现了，标签选择器的选择方式就是讲标签名当做选择器来使用的，对应的“{}”中样式会作用到对应名称的标签上，如上图<h2></h2>标签上被赋予了
字体颜色为#f00的样式。
类选择器
用类名作为选择器。
ID选择器
用ID名称作为选择器。
4.3复合选择器
多元素选择器：
后代元素选择器：
子元素选择器：
相邻元素选择器：
4.4伪类选择器
什么是伪类选择器？
伪类选择器是用来给超级链接的不同状态来设置样式。
超级链接的不同状态
正常状态 超级链接没有被访问 :link
访问过后状态 超级链接已经被访问 :visited
鼠标放上状态 鼠标放在超级链接上面，但是并没有将鼠标的左键按下去 :hover
激活状态 鼠标左键已经按下去了，但是并没有将鼠标的左键弹出 :active
伪类选择器都是带有冒号“:”
这里我们来书写一个案例来讲解这个问题
[PHP] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*使用伪类选择器来给超级链接的不同状态来设置样式*/
/*正常状态*/
a:link{
color: #f00;
}
/*访问过后状态*/
a:visited{
color: #000;
}
/*鼠标放上状态*/
a:hover{
color: gold;
}
/*激活状态*/
a:active{
color: #0f0;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.133.com">133</a>
<a href="http://www.134.com">134</a>
</body>
</html>
:link
:visited
:hover
:active
注意：
超级链接的不同状态它其实是有顺序。也就是说伪类选择器设置其实是有顺序。
如果不按照伪类选择器的顺序，那么样式就会失效。
顺序：要遵守“爱恨准则”要先有爱，才有恨。“Love Hate”即先有:link 然后:visited 再有 :hover 最后:active
4.4.1超级链接的美化
我们通常会去掉超级链接的下划线，然后同时会给超级链接设置一个颜色。
一般情况下：
正常状态与访问过后的状态的样式设置为一样
当鼠标放上的时候给其设置另外一个颜色 激活状态一般不会设置 因为激活状态的时间太短
举例：
a:link,a:visited{去掉超级链接的下划线;设置一个颜色;}
a:hover{设置另外一个颜色;增加一张下划线;}
这样我们完成了关于CSS的简单认识，下节课我们将学习CSS具体能修饰什么样式
阅读推荐
【黑马程序员杭州】PHP课程笔记day01-HTML简介及标签
【黑马程序员杭州】PHP课程笔记day02-HTML组标签
【黑马程序员杭州】PHP课程笔记day03-HTML网页框架及表单标签
【黑马程序员杭州】PHP课程笔记day04表单控件
【黑马程序员杭州】PHP课程笔记day05-CSS基础
| 
收藏
淘帖
踩
，真厉害
