Web网页开发之CSS基础

参与拿奖：本文已参与「新人创作礼」活动，一起开启掘金创作之路

1.开发环境准备

1.1 PHPstorm+Phpstudy

PHPstorm官网下载

网盘链接 提取码：1w2f

Phpstudy官网下载

安装好软件之后，开始配置环境，首先创建一个新项目，项目必须创建在Phpstudy安装路径下的WWW目录下，然后new一个.php程序，然后如下图所示点击Edit Congurations,安按照下图顺序完成配置

接着进入以下界面，根据下图来完成配置，新建PHP Web Application： 接着是修改配置，Name表示创建开发环境的名字（自定义）；Server表示服务，需要重新配置，Name表示服务器名称（自定义），接着是Host，如果是使用Phpstudy就修改为localhost，Port端口号默认为80，Debugger为Xdebug，完成后点击Apply保存；最后修改Start URL（项目的相对路径即可，默认是在WWW下），Browser表示运行浏览器，配置完成后，点击Apply保存： 运行时，需要打开Phpstudy，需要开启Apach和MySQl（需要使用数据库时开启）服务器 运行效果如下图所示：

2.基础样式：

2.1 标签

标签具有封装的作用，可以通过添加属性来修改封装内容的样式；例如：

<h1 align="center">
Hello World！
</h1><!--通过h1标签设置了Hello，World！的位置，在中间。-->

2.2 类

类是一个抽象，作用是封装一系列代码需要的属性值，通过类的封装可以有效的减少代码量。例如：

#header{
 height:150px;
 width:1300px;
 } /*通过'#'来声明header类，通过id来调用*/
#logo h3{
 padding:47px 0 0 20px;
 font-size:20px;
 color:#000000;
 font-family:"楷体"
 }/*通过'#logo h3'声明标签logo下的h3标签中的属性值，通过id来调用*/
 .sidebar ul{
 margin:0;
 padding:0;
 lift-style:none;
 line-height:normal;
 }/*说明类sidebar中的ul标签的属性值，通过class来调用

 .h1{
  text-align: right;
  color: red;
  
 }
 
 #header h1{
  text-align: right;
  color:green;
 }
 .logo h1{
  text-align: center;
  font-size: 50px;
  color:yellow;
 }

 <header id="header"><h1>Hello, World!</h1></header>
 <a class="logo"><h1>Hello,World!</h1></a>
 <p class="h1">Hello,World!</p>

运行结果：

2.3 链接： 内部链接：通过id来声明和#来调用

  <a href="#head">hello</a>
  <a id="head">Hi</a>

外部链接：

  <a id="head" href="Query1.html">Hi</a>

超链接：

<a href="http://www.iqiyi.com">爱奇艺高清</a><a