Web前端·CSS基础入门

前端讨论班第二次课程——CSS

Author/AllenHUSH

什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)

为什么使用CSS

HTML 标签原本被设计为用于定义文档内容。
通过使用 <h1>、<p>、<table>这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。
同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。

如何使用CSS>>>

• 内联样式参数

<span style=”font-size: 15px; color: #FFF;”>Hello World</style>
<h1 style=”font-family: Arial;”>Hello World</h1>

• 头部样式标签

<style>
    body{
        width: 100%;
    }
    h1 {
        color: #FFF;
    }
</style>

• 头部链接标签

<link href=”filename.css” rel=”stylesheet”>

CSS基础语法

/*选择器{声明}*/
selector {declaration1; declaration2; ... declarationN }

/*选择器{属性：值}*/
selector {property: value}
selector {
    property1: value；
    property2: value；
    property3: value；
    property4: value；
}

CSS选择器

• 基本选择器>>>

  名称	选择器	描述
  全部	*	选择全部的元素
  元素	element	选择特定的元素
  类	.class	选择该类名的元素
  id	#id	选择该ID名的元素

• 组合选择器

  选择器	描述
  div,p	选择所有<div>元素和所有<p>元素。
  div p	选择<div>元素内部的所有<p>元素。
  div>p	选择父元素为<div>元素的所有<p>元素。
  div+p	选择紧接在<div>元素之后的所有<p>元素。
  div~p	选择前面有<div>元素的每个<p>元素。

• 亲属选择器>>>

  特征	全部子元素	特定子元素
  次序	p:first-child	p:first-of-type
  唯一	p:only-child	p:only-of-type

  特征	全部子元素	特定子元素
  次序	:first-child :last-child :nth-child(n) :nth-last-child(n)	:first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type(n)
  唯一	:only-child	:only-of-type

• 属性选择器&更多

  /*在每个 <p> 元素的内容之前插入内容*/
  p:before{
      declartion;
  }
  /*选择鼠标指针位于其上的链接*/
  a:hover{
      diclartion;
  }
  /*为 target="_blank" 的 <a> 元素设置样式*/
  a[target=_blank]{ 
      background-color:yellow;
  }
  
  

  参考文档CSS选择器参考手册

CSS能用来做什么

• 背景

  • 背景色
    所有的元素都可以设置背景色，包括块级和行内元素；不能被继承，默认为transparent。
  • 背景图像
    不能被继承，默认为transparent。
    • 背景重复background-repeat
    • 背景定位background-position
    • 背景关联background-attachment:fixed

• 文本
  关键词text

  • 文本颜色
  • 对其文本
  • 装饰文本
  • 文本缩进

• 字体
  关键词font

  • 字体系列
  • 大小
  • 加粗
  • 风格与变形

• 链接

  • 参考属性选择器

• 列表
  从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
  由于列表如此多样，这使得列表相当重要，所以说，CSS 中列表样式不太丰富确实是一大憾事。

  • 列表类型list-style-type
    修改列表项的标志,可以是字母、数字或其他符号
  • 列表项图像list-style-image
  • 列表标注位置list-style-position
  • 上述简写list-style

• 表格

  属性	描述
  border-collapse	设置是否把表格边框合并为单一的边框。
  border-spacing	设置分隔单元格边框的距离。
  caption-side	设置表格标题的位置。
  empty-cells	设置是否显示表格中的空单元格。
  table-layout	设置显示单元、行和列的算法。

• 轮廓

  属性	描述
  outline	在一个声明中设置所有的轮廓属性。
  outline-color	设置轮廓的颜色。
  outline-style	设置轮廓的样式。
  outline-width	设置轮廓的宽度。

• 位置

  • 盒模型
  • 浮动与定位

几点注意事项

• 颜色

  • CSS使用了RGB算法
    (x,y,z) 0-255 00-FF

    颜色	16进制表示	rgb表示
    黑色	#000000	rgb(0,0,0)
    白色	#FFFFFF	rgb(255,255,255)

  • 256色调色板-40种系统保留色=216种网络安全色

  • RGBA颜色

    • RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
    • RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
    • RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

• 文件结构

  • 根目录
    • pages
    • resources
      • css
      • img
      • js
      • font
      • …
  • 根目录
    • pages
    • resources
      • common
        • css
        • js
        • …
      • page1
        • css
        • js
        • …
      • page2
        • css
        • js
        • …
      • …

• 文件命名

  • 作业命名
    • 部门_姓名_前端第几次作业
  • 英文

• Lcss\Sass\Scss

  • 都是动态样式语言
    1. 混入(Mixins)——class中的class；
    2. 参数混入——可以传递参数的class，就像函数一样；
    3. 嵌套规则——Class中嵌套class，从而减少重复的代码；
    4. 运算——CSS中用上数学；
    5. 颜色功能——可以编辑颜色；
    6. 名字空间(namespace)——分组样式，从而可以被调用；
    7. 作用域——局部修改样式；
    8. JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
  • Less是基于JavaScript，是在客户端处理的,也可以在在服务器端处理。
  • Sass是基于Ruby的，是在服务器端处理的。

作业

做一个导航栏

• 参考
  • 淘宝
  • Apple
  • 网易云
  • 腾讯云
  • 自行设计