前端入门——CSS

1 CSS入门

1.1 初识CSS

1.1.1 概述

在学习了基本HTML标签和样式后，接下来学习前端开发的第二门技术。

我们发现，虽然标签的属性可以调整一些样式，但是效果不够理想，而我们更愿意把样式编写在

今天开始变漂亮!!!

1.3 Chrome开发者工具

• 打开开发者工具

  打开浏览器，点击键盘F12键，显示开发者工具窗口。

• 查看开发者工具

  演示选择元素

  演示修改样式

1.4 总结

CSS是对HTML的补充，指定页面如何展示的语言。

CSS的主要部分有：

1. 选择器：用来选择页面元素的方式。
2. 声明：用来设置样式，格式属性名：值。

在学习CSS时，要抓住两个方面：

1. 掌握多种选择器，能够灵活的选择页面元素。
2. 掌握样式的声明，能够使用多种属性来设置多样的效果。

2 基本语法

2.1 引入方式

2.1.1 内联样式

了解,几乎不用,维护艰难

内联样式是CSS声明在元素的style属性中，仅影响一个元素：

• 格式：

<标签 style="属性名:属性值; 属性名:属性值;">内容

• 举例：

    Hello World!

• 效果如下：

虽然格式简单，但是样式作用无法复用到多个元素上，不利于维护，此格式了解即可。

2.1.2 内部样式表

内部样式表是将CSS样式放在style标签中，通常style标签编写在HTML 的head标签内部。

• 格式：

• 举例：

• 效果如下：

  内部样式只能作用在当前页面上，如果是多个页面，就无法复用了。

2.1.3 外部样式表

外部样式表是CSS附加到文档中的最常见和最有用的方法，因为您可以将CSS文件链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。

外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML 元素引用它，通常link标签编写在HTML 的head标签内部。：

• 格式：

rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档之间的关系，引入css文件固定值为stylesheet。

href：属性需要引用某文件系统中的一个文件。

• 举例：

1. 创建styles.css文件

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

2. link标签引入文件

  
    
    
  
  
    
Hello World!
  

• 效果如下：

当然也可以把CSS文件放在其他地方，并调整指定的路径以匹配，例如：

为了保证CSS文件的管理，建议在项目中创建一个css文件夹，专门保存样式文件。

注意：引入样式的优先级问题。

规则层叠于一个样式表中，其中数字 4 拥有最高的优先权：

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）

2.2 关于注释

了解讲解：

简单格式，提一下就可以了

与HTML一样，鼓励您在CSS中进行注释，以帮助您理解几个月后返回的代码工作方式，并帮助其他使用该代码的人对其进行理解。

CSS中的注释以/*和开头*/。在下面的代码块中，我已使用注释标记了不同的不同代码段的开始。

格式：

/* 设置h1的样式 */
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

2.3 关于选择器

重点讲解：

选择器作为CSS的重要部分，这里强调基本选择器的使用和其他选择器的基本格式。

讲到CSS就不得不说到选择器，为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。

每个CSS规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。

接下来我们将要详细的学习各种选择器的使用。

选择器的分类：

2.2.1 基本选择器

1）元素选择器

页面元素：

  

    
List item 1
    
List item 2
    
List item 3
  
  

    
List item 1
    
List item 2
    
List item 3
  

选择器：

选择所有li标签,背景变成蓝色
li{
    background-color: aqua;
}

2）类选择器

页面元素：

    

        
List item 1
        
List item 2
        
List item 3
    
    

        
        
List item 1
        
List item 2
        
List item 3
    

选择器：

选择class属性值为l2的,背景变成蓝色
.l2{
    background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
   color: wheat;
}

3）ID选择器

页面元素：

    

        
List item 1
        
List item 2
        
List item 3
    
    

        
List item 1
        
List item 2
        
List item 3
    

选择器：

#tow{
    background-color: aqua;
}

效果如图：

4）通用选择器

页面元素：

    

        
List item 1
        
List item 2
        
List item 3
    
    

        
List item 1
        
List item 2
        
List item 3
    

选择器：

所有标签 
*{
    background-color: aqua;
}

2.2.2 属性选择器

页面元素：

   

        
List item 1
        
List item 2
        
List item 3
    
    

        
List item 1
        
List item 2
        
List item 3
    

    

        p item
    

选择器和效果图，示例1

[属性名]{ }

选择器和效果图，示例2

标签名[属性名]{ }

选择器和效果图，示例3

标签名[属性名='属性值']{ }

2.2.3 伪类选择器

伪类选择器，用于选择处于特定状态的元素，例如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。

格式：

标签名:伪类名{ }

常用伪类:

• 锚伪类

  在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

  a:link {color:#FF0000;} 	/* 未访问的链接 */
  a:visited {color:#00FF00;} 	/* 已访问的链接 */
  a:hover {color:#FF00FF;} 	/* 鼠标悬停链接 */
  a:active {color:#0000FF;} 	/* 已选中的链接 */
  

  注意：

  伪类顺序 link ，visited，hover，active，否则有可能失效。

  代码示例：

  HTML 代码 ： 
  
      黑马 
  
      传智
  
  
  
  CSS 代码 ： 
  /* 选择a标签,class值为red ,设置访问后为红色链接*/
  a.red:visited {
      color: red;
  }
  

2.2.4 组合选择器

页面元素：

    

        
List item 1
        
List item 2
        
List item 3
        

            
List item 1
            
List item 2
            
List item 3
        
    

1）后代选择器

选择器：

.l1 li{
    background-color: aqua;
}

2）子级选择器

选择器：

.l1 > li{
    background-color: aqua;
}

3）同级选择器

选择器：

.l1 ~ li{
    background-color: aqua;
}

4）相邻选择器

选择器：

.l1 + li{
    background-color: aqua;
}

2.4 总结

1. CSS的引入方式有三种，建议使用外部样式表。
2. 注释类似于java多行注释。
3. 选择器是CSS的重要部分：
   1. 基本选择器：可以通过元素，类，id来选择元素。
   2. 属性选择器：可以通过属性值选择元素
   3. 伪类选择器：可以指定元素的某种状态，比如链接
   4. 组合选择器：可以组合基本选择器，更加精细的划分如何选择

3 CSS案例-头条页面

3.1 案例效果

3.2 案例分析

3.2.1 语义化标签

了解讲解：

简单介绍作用即可，后续在案例中使用。

为了更好的组织文档，HTML5规范中设计了几个语义元素，可以将特殊含义传达给浏览器。

标签结构示例如图：

3.2.2 常见样式属性

其他属性：

1）边框样式

在之前学习了简写属性来设置边框样式，接下来我们将研究如何创造性地使用边框。

div { 
  border: 1px solid black; 
} 

• 单个边框

设置一个方向边框的宽度、样式和颜色，例如：

.box { 
  border-top: 1px solid black; 
  border-left: 5px double yellow;
  border-bottom: 5px dotted green;
  border-right: 5px dashed red;
} 
border-top: 上边框
border-left: 左边框
border-bottom: 底边框
border-right:  右边框

• 无边框

当border值为none时，可以让边框不显示，用于特殊效果。

   div {
            width: 200px;
            height: 200px;
            border: none;
   }

• 圆角

通过使用border-radius属性设置盒子的圆角，虽然能分别设置四个角，但是通常我们使用一个值，来设置整体效果，例如

    div {
            width: 200px;
            height: 200px;
            border: 10px solid blue;
            border-radius: 50px;
    }

2）文本样式

• 颜色

  该color属性设置所选元素的前景色的颜色

  p {
    color: red;
  }
  

  颜色的值，可以由多种方式赋值，常见的有颜色单词，RGB十六进制，例如：

• 字体种类

  使用font-family属性-这允许您指定一种字体

• 字体大小

  字体大小使用font-size属性设置，可以采用常见单位：

  px：像素，文本高度像素绝对数值。

  em：1em等于我们要设置样式的当前元素的父元素上设置的字体大小，这是相对数值，能看懂即可。

• 文本修饰

  text-decoration:设置字体上的文本装饰线。

• 文本对齐

  该text-align属性用于控制文本如何在其包含的内容框中对齐。可用值如下，它们的工作方式与常规字处理器应用程序中的工作方式几乎相同：

  • left：左对齐文本。
  • right：右对齐文本。
  • center：使文本居中。
  • justify：使文本散布，改变单词之间的间距，以使文本的所有行都具有相同的宽度。

• 行高

  该line-height属性设置每行文本的高度，也就是行距。

3.3 使用技术

1. 使用语义化标签，header，footer，article，nav。
2. 使用CSS常见属性

3.4 实现步骤

1. 创建初始页面，拷贝图片素材。
2. 编写css文件，引入css样式，实现整体布局。
3. header部分
   1. 实现顶部条。
   2. 实现导航条。
4. 实现中部
   1. 实现左侧分享区域。
   2. 实现中间正文区域。
   3. 实现右侧广告区域。
5. 实现底部页脚。

4 CSS案例-登录页面

4.1 案例效果

4.2 案例分析

4.2.1 Table标签

1）什么是表格

表格是由行和列组成的结构化数据集(表格数据)。

2）表格标签

通过表格标签，我们可以创建出一张表格，代码如下

      

        
First name
        
Last name
      
      

        
John
        
Doe
      
      

        
Jane
        
Doe
      

3）跨行跨列========

让我们使用 colspan 和 rowspan 来改进现有的表格。

    

        
GROUP
        
 name
    
    

        
First name
        
Last name
    
    

        
G1
        
John
        
Doe
    
    

        
Jane
        
Doe
    

    

        
G2
        
Aohn
        
Doa
    
    

        
Bane
        
Dob
    
    

        
Cane
        
Doc
    

4）表格结构【了解】

了解讲解：

表格布局标签，作为了解内容，案例中的使用部分，可以省略

示例：

    

        

            
项目
            
金额
        
    
    

        

            
手机
            
3,000
        
        

            
电脑
            
18,000
        
    

4.2.2 常见样式属性

1）背景

CSS background属性用来设置背景相关的样式。

• 背景色

  该background-color属性定义CSS中任何元素的背景色。

  .box {
    background-color: #567895;
  }
  

• 背景图

  该background-image属性允许在元素的背景中显示图像。使用url函数指定图片路径。

  body {
     background-image: url(bg.jpg);
  }
  

  控制背景重复

  该background-repeat属性用于控制图像的平铺行为。可用值为：

  • no-repeat -停止完全重复背景。

• repeat-x —水平重复。

  • repeat-y —反复重复。
  • repeat—默认值；双向重复。

  body {
    background-image: url(star.png);
    background-repeat: no-repeat;
  }
  

2）轮廓

轮廓outline：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

设置为none时，可以取消默认轮廓样式，用于特殊效果。

 input {
        outline: none;
 }

3）显示

display属性，用来设置一个元素应如何显示。可以设置块级和行内元素的切换，也可以设置元素隐藏。

• 元素显示

  /*   把列表项显示为内联元素，无长宽*/
  li {display:inline;}
  /*   把span元素作为块元素，有换行*/
  span {display:block;}
  /*   行内块元素，结合的行内和块级的优点，既可以行内显示，又可以设置长宽，*/
  li {display:inline-block;}
  

代码演示：

    li {
              display: inline-block;
              width: 200px;
    }

• 元素隐藏

  当设置为none时，可以隐藏元素。

  li {
            display: none;
           
  }

4.2.3 盒子模型

万物皆"盒子"。盒子模型是通过设置元素框与元素内容和外部元素的边距，而进行布局的方式。

- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。

基本布局

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。在 CSS 中，width 和 height 指的是内容区域的宽度和高度。

增加内边距会增加元素框的总尺寸。

外边距

单独设置边框的外边距，设置上、右、下、左方向：

margin-top
margin-right
margin-bottom
margin-left

值含义：

1. 一个值时

   /*  所有 4 个外边距都是 10px */
   margin:10px;
   

2. 两个值时

   /* 上外边距和下外边距是 10px
   右外边距和左外边距是 5px */
   
   margin:10px 5px;
   
   margin:10px auto;
   auto 浏览器自动计算外边距，具有居中效果。
   

3. 三个值时

   /* 上外边距是 10px
   右外边距和左外边距是 5px
   下外边距是 15px*/
   
   margin:10px 5px 15px;
   

4. 四个值时

   /*上外边距是 10px
   右外边距是 5px
   下外边距是 15px
   左外边距是 20px*/
   
   margin:10px 5px 15px 20px;
   

内边距

与外边距类似，单独设置边框的内边距，设置上、右、下、左方向：

padding-top
padding-right
padding-bottom
padding-left

4.3 使用技术

1. div盒子布局
2. form标签和table标签
   1. input button
   2. thead， tbody ，tfoot，th，tr，td
3. 设置背景，字体等css样式

4.4 实现步骤

1. 设置背景
2. 整体布局，上中底三部分
3. 上部
   1. logo设置
4. 中部
   1. 表单表格布局
   2. 加入表头
   3. 加入输入框
   4. 加入按钮
5. 底部
   1. 底部布局
   2. 其他方式分割线
   3. 其他方式图片
   4. 底部文本

5 HTML案例-网站发布

将网站部署到服务器，浏览器通过URL地址访问页面

5.1 案例效果

在地址栏输入URL地址，访问服务器上的页面。

5.2 案例分析

5.2.1 Nginx服务器概述

Nginx是一种服务器软件，其最主要，最基本的功能是可以与服务器硬件(电脑)结合，让程序员可以将程序发布在Nginx服务器上，让成千上万的用户可以浏览。

? 除此之外，Nginx还是一种高性能的HTTP和反向代理服务器，同时也是一个代理邮件服务器。也就是说，我们在Nginx上可以：

1. 可以发布网站(静态, html,css,js)
2. 可以实现负载均衡,
3. 代理服务器
4. 可以作为邮件服务器实现收发邮件等功能

本课程我们只讨论Nginx发布网站的功能，其它的功能后续课程会深入学习.

5.2.2 在Linux上使用Nginx

1）下载Nginx

进入http://nginx.org/网站，下载nginx-1.17.5.tar.gz文件

2）上传到虚拟机

使用客户端将刚下载好的nginx-1.17.5.tar.gz文件上传到home目录下。

使用命令查看

3）准备依赖环境

#安装Nginx依赖环境，‐y表示所有提示默认选择y
yum -y install pcre pcre-devel
yum ‐y install zlib zlib‐devel  
yum ‐y install openssl openssl‐devel

4）解压和编译安装

# 进入home目录,解压
tar -zxvf nginx-1.17.5.tar.gz -C /home

# 进入 nginx目录
cd nginx-1.17.5

# 编译并安装【已经有gcc编译环境】
./configure
make
make install
# 安装成功之后,就会在/usr/local下多出了一个nginx目录.

5）启动服务器

#进入nginx的sbin目录
cd /usr/local/nginx/sbin

#在sbin目录下启动
./nginx
#在sbin目录下停止
./nginx ‐s stop
#在sbin目录下重写加载
./nginx ‐s reload

#开放linux的对外访问的端口80，在默认情况下，Linux不会开放80端口号
#需要编辑iptables文件,参考 4.5 操作
#查看是否有nginx的线程是否存在
ps ‐ef | grep nginx

6）浏览器访问

浏览器输入虚拟机ip地址，默认80端口

5.3 实现步骤

1. 发布项目
2. 配置Nginx服务器
3. 浏览器访问

5.4 操作实现

5.4.1 发布项目

在/home目录下，创建toutiao目录

# 进入home目录
cd /home 
# 创建目录
mkdir toutiao

上传项目文件到toutiao目录

项目文件:

toutiao目录:

5.4.2 配置 nginx.conf 文件

5.4.3 启动服务器

#启动服务器 ， 加载配置文件
/usr/local/nginx/sbin/nginx -c /home/nginx-1.17.5/conf/nginx.conf

5.4.4 浏览器访问

1. 浏览器输入虚拟机ip地址，默认80端口，访问首页 index.html
2. 跳转登录页面

http://172.16.17.99/login/login.html