整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
转CSS系列-CSS简介及添加
大家可能都知道，如果一个网页只是使用HTML代码进行编写。在默认情况下是没有任何样式可言的，就像我们盖好一幢楼，但是还没有装修那样，而HTML就相当于我们刚盖好楼的主体，而咱们开始学习的CSS就是装修，只不过CSS是针对HTML实现美化，当然不只是美化，还有布局。
CSS 全称：Cascading Style Sheets中文翻译为层叠样式表 ，定义HTML中的标记以何种方式显示。如：我们想让网页中H1标记的文字显示的不要那么大，或者换个颜色等等诸如一系列这样的问题，都可以通过CSS来实现。目前所有的主流浏览器均支持CSS。
我们通过下边两张图对比一下：
我们先看一下添加过CSS样式的网页如下图
现在我们把CSS样式表文件去掉
通过这两种这两张图大家可以明显的看到。加完CSS的可以按照我们设计的想法实现我们网页元素的摆放
下边我们先学习如何把CSS添加到网页中去，而其还要注意学习CSS要明白一个重要的问题，CSS主要是解决与实现表现（CSS）与结构（HTML）的分离。我们编写完HTML之后，如何通过CSS对HTML实现控制呢。
行内样式
内嵌样式
链接样式
导入样式
我们这一节课的示例就先从行内样式开始
行内样式：就是直接在HTML上写样式，就是HTML上加属性style=””这种形式。如
<p style=”color:#f00”>dushuwu</p>，但是这种方法并不是被我们推荐的，因为不利于实现表现与结构分离。也为后期维护带来很多不必要的困难。我们只需要知道即可。
内嵌样式：针对当前一个网页可以使用的样式，一般写在html的<head></head>标记中。而且要使用一个示明，我们的样式都要写到这个声明中如下：
<style type=”text/css”>写我们的样式</style>
我们看一个示例文件为我们段落文字改成红色的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dushuwu第一示例</title>
<style type="text/css">
p
{
color:#f00;
}
</style>
</head>
<body>
<p>dushuwu</p>
<h2>www.</h2>
</body>
</html>
我们在这里又有一个新的知识点。如果我们想给段落添加一个样式的话。我们可以通过两步实现，第一步先找到这个段落，第二步添加CSS样式属性（PS：这些属性咱们现在可以理解为已经提供好的，咱们使用即可）。
那咱们现在就看一下这个CSS选择器：
CSS选择器的分类：
HTML标签选择器
群组选择器
包含选择器
自定义选择器有可以分为两种
Class选择器
ID选择器
HTML标签选择器：就是直接使用BODY中的HTML标记做为选择符,就像我们第一示例那样。
但是这种选择器有一种局限性。假设我们有两个段落。要设置不一样的效果。那怎么办呢？当然我们选择器必须结合起来用才可以。
假如我们要为网页中的H2和P的文字都要改成红色的，怎么办呢？这时候群组选择器就派上用场了。我们看个示例文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dushuwu第一示例</title>
<style type="text/css">
h2,p
{
color:#f00;
}
</style>
</head>
<body>
<p>dushuwu</p>
<h2>dushuwu提供CSS教程</h2>
</body>
</html>
语法规范就是
选择器,选择器{属性:属性值;}
总结：我们记得只要我们CSS属性一致的时候，都可以使用群组选择符。
包含选择器：找到含有的内容，就像我们HTML中UL LI a（PS：列表上加链接） 这种形式，如果我们要为列表中链接添加样式。这时候我们就能使用包含选择器
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>dushuwu第三示例</title>
<style type=”text/css”>
ul li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href=”#”>项目编号1</a></li>
<li><a href=”#”>项目编号2</a></li>
</ul>
<a href=”#”>我不会被改变</a>
</body>
</html>
语法规范是：
选择器 选择器{属性:属性值;}
注意：这里面是空格隔开的 HTML中的父级空格HTML中的子级
自定义选择器
引入：如果网页中有多个P标签，我们想为其中某一个P添加样式。该怎么办呢，之前的选择器都不能满足。
ID选择器：为网页中某一个标签添加属于自己的选择器，而且规范要求我们这个ID名称的选择器只能使用一次。（PS：也是为了以后JS好调用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>示例</title>
<style type="text/css">
#diyi li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href="#">项目编号1</a></li>
<li><a href="#">项目编号2</a></li>
</ul>
<ul id="diyi">
<li><a href="#">项目编号1</a></li>
<li><a href="#">项目编号2</a></li>
</ul>
<a href="#">我不会被改变</a>
</body>
</html>
语法规范就是：
#选择器名称{CSS属性：属性值;}
而在HTML中就是 id=”选择器名称”
为久经沙场的打工人，我们肯定经历过一次次难忘的面试，这其中有愉快的交谈，也有尴尬的对话，甚至还会有崩溃的瞬间...可以说，人类的面试悲欢喜乐，并不相通！近日看到一位程序员网友发帖吐槽：前端面试太难了，问啥啥不会，都快面哭了。
即使隔着手机屏幕，都已经感觉到了这位小伙伴的“崩溃瞬间”。当面对面试官的连环问题而完全不知所云，无法解答的时候，可能那时的我们只求找个地缝钻进去吧。
其实，上面这位网友的尴尬遭遇，在面试的时候并不少见。很多情况下是由于我们的技术基础并不扎实，也没有形成自己的知识体系，导致我们在面对新行业、新领域的问题时，无法快速适应和解决。
就拿前端学科举例，随着新形势下企业对于前端的综合能力要求更加高，物联网、大数据可视化、云计算、VR/AR、5G等新技术接踵而至，现在的前端工程师更是承担了更多责任，而这些都取决于扎实的基础之上，没有系统的理论基础，没有成体系的技术架构，完全无法真正形成自己的技术竞争力。
因此推荐所有的前端er一门必备的课程《浠浠呀老师html+css前端入门教程，快乐学习，小白必看》。课程由浠浠呀老师为小白入门前端倾力打造的前端基础教程。是零基础小白入门前端开发的不二之选。
先来隆重介绍一下浠浠呀老师吧：
千锋教研院执行院长，千锋学科部总监，小狮视觉总监，前端培训届扛把子-千锋HTML5大前端学科创建者。 毕业于布列斯特普希金国立大学，曾任北京市属高校师资培训中心特邀讲师，多年担任北京市属高校师资培训工作。著有《HTML5从入门到精通》、《Jquery从入门到实战》、《PhotoShop CC实战入门》、《Unity虚拟现实开发实践》、《数据结构与算法（C语言篇）》、《Nginx 高性能 Web 服务器应用与实战（微课版）》等多本书籍，被500多所高校选用，深受好评。 深耕IT职业教育行业十多年，学生遍布各大互联网大厂，热爱教育事业。对于教学研究、教学管理工作有深刻的理解。
视频不同于以往传统的前端教学视频。摒弃了传统教程填鸭式课堂讲授的方式，用最直观的动画效果解释原理，用最真实的案例巩固知识。是一种全新的讲课方式，对小白友好，能让前端入门变得清晰简单。
课程从最基础开始，讲解无废话不反复，节奏明快，直击痛点，直截了当地输出干货。将复杂的前端问题拆解成简单的知识点。将前端知识点系统整理，结合实用案例，以讲解+动画的形式展现，让学生真正地看到即学到。
课程设计十分用心，认真分析了小白们的日常学习习惯，思维习惯，知识背景。甚至对每一个小白可能出现疑问的地方做了预判。每个案例都悉心打磨，简单而典型。用前期大量的教研时间换取学生们的接收知识时间。
本课程共包括2季，内容涵盖，HTML，CSS和HTML5、CSS3。本次发布视频第一季上半部分——HTML。课程共 50 集，16个部分，58个知识点，30个案例。
辑：陈凌煜
本文出自微信公众号“August精彩编程”（ID：august-edu）
2019年8月12日
网站分静态网站和动态网站，相信小伙伴们对这两个词略有耳闻或者已经了解，那么小编还是啰嗦一下这两种网站有什么区别。
网页上的内容是随着数据库读取出来的内容不一样或者用户操作不一样而改变的，举个例子，比如网页上的用户登录，刚访问网页的时候用户登录状态是无登录状态，当用户点击登录，弹出输入账号密码的窗口的时候，这还不算是动态，还属于静态，那么接下来，用户点击登录按钮，网页将账号密码提交到服务器后台，服务器把账户密码拿去跟数据库里面存的做比较，如果一样，则登录成功，网页显示登录成功状态，如果核对没有完全一致，则登录失败，网页保持无登录状态。
像这种随着用户操作而改变内容的网站，才称之为动态网页。
看了上面的动态网站，其实对静态网站也能有一定理解了，不理解也没关系，这里再详细说明下！静态网站是指网站无论用户操作什么，都是一模一样的，不会有任何改变，那么有小伙伴可能又要问了，有些网站上有导航栏，我点击首页，会跳转到首页，点击关于我们，又换了一个页面，这难道不是动态吗？不是的，这是静态，你无论怎么操作，你会发现你跳转来跳转去的网页长得一摸一样，没有任何改变。
其实除了看网页变化来判断是静态网页还是动态网页之外，还有个方法，看网页地址栏的扩展名，如果.html就是静态网页，如果是.asp或者.php那就是动态网页。但是这种说法并不完全正确，现在可以动静分离，可以理解为有没有数据库支持！
如图所示是我在网络上找到的一个asp动态网站。Html网站网上非常多一抓一大把，php也不少，有兴趣的小伙伴可以自己上网搜索下！
接下来进入主题，我们先来看看我们今天要实现的效果是什么？
鼠标经过有效果对吧。
我们先看看效果图：
这是一个网站的导航栏
接下来我们把鼠标放上去看看会发生什么？
这种神奇的效果要如何设计呢？大家都知道网页设计的三大利器是什么？
答案：HTML+CSS+JavaScript
今天这个案例我们只需要用到HTML+CSS，还是很简单的，我们先来看看导航栏怎么写：
<!DOCTYPE html> <html> <head> <title>August精彩编程</title> </head> <body> <div class="header"> <a href="#"><img src="logo.png"></a> <div class="header-word"> <ul> <a href="#"><li>CONTACT</li></a> <a href="#"><li>EVENTS</li></a> <a href="#"><li>FACULTY</li></a> <a href="#"><li>GALLERY</li></a> <a href="#"><li>ABOUT</li></a> <a href="#"><li>HOME</li></a> </ul> </div> </div> <div class="clear"></div> </body> </html>
这样写我们的导航栏就写出来了，但是效果是什么样的呢？
我们需要对这个页面加上CSS（层叠样式表）。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>August精彩编程</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
}
html{
height: 2400px;
}
.header{
width: 100%;
height: 100px;
background:#07cbc9;
}
.header img{
height: 48px;
width: 260px;
padding: 26px 26px;
padding-left: 10%;
float: left;
}
a{
color: #fff;
text-decoration: none;
}
.header .header-word{
padding-right:75px;
}
.header .header-word ul li{
float: right;
font-size: 16px;
font-family: "微软雅黑";
padding-right: 10px;
padding-left: 10px;
list-style: none;
line-height: 100px;
color: #fff;
}
</style>
</head>
<body>
<div class="header">
<a href="#"><img src="logo.png"></a>
<div class="header-word">
<ul>
<a href="#"><li>CONTACT</li></a>
<a href="#"><li>EVENTS</li></a>
<a href="#"><li>FACULTY</li></a>
<a href="#"><li>GALLERY</li></a>
<a href="#"><li>ABOUT</li></a>
<a href="#"><li>HOME</li></a>
</ul>
</div>
</div>
<div class="clear"></div>
</body>
</html>
然后效果就出来啦，如图所示：
接下来就是今天我们所学内容最核心的内容，涉及到4个CSS的链接伪类。
链接伪类，是指链接的四个状态：激活状态（active）、已访问状态（visited）、未访问状态（link）、鼠标经过状态（hover）。
那么我们今天要使用的就是鼠标经过状态（hover），怎么使用呢？看已下这段CSS：
.header .header-word ul li:hover{
float: right;
font-size: 16px;
font-family: "Microsoft YaHei UI";
padding-right: 10px;
padding-left: 10px;
list-style: none;
line-height: 100px;
background: #000;
color: #fff;
}
是哒，这样就完成了我们今天要制作的效果。
接下来附上完整代码：
*请认真填写需求信息，我们会在24小时内与您取得联系。
