初识CSS

前端的组成：

​ 结构语言：HTML (盖房子、毛坯房) 涉及到布局设计

​ 表现语言：CSS (装修)

​ 行为语言：JavaScript (安装点电梯… 基于事件的)

1. 了解CSS

CSS：Cascading Style Sheet 级联/层叠样式表

它是用来给我们的HTML做美化的，事实上HTML也能做一些美化，但是为什么单独提出来CSS呢，因为降低耦合，面向对象。

CSS的样式非常丰富，这是HTML不可比拟。

CSS的文件格式：.css

2. 掌握CSS的基本语法

// 选择器：选中要美化的元素
// 声明：就是要给选中的元素美化什么？美化成啥样？
选择器{
    
    声明1; // 属性名:属性值;
    声明2;
    声明3
}

示例：要求将p标签内的字体颜色设置为红色
p{
    
    color:red;
}

CSS使用示例：

<!-- HTML中 标签都有特别的含义 我们如果想编写CSS代码就需要在特别的标签中使用 -->
<!--
	style标签是用来专门编写CSS样式代码的
规范来讲它需要放置在head标签内
-->
<style>
    h3{
     
        /* 设置字体颜色为红色 */
        color:red;
    }
</style>

3. 掌握CSS的引入方式

• **行内样式表：**直接在标签中通过style属性设置样式，每一个HTML标签都有此属性。

  <!-- 行内样式表
  	优点：直接 直观
  	缺点：耦合导致阅读困难、它只能对单个标签设立样式
  -->
  <h3 style="color: red;">离歌</h3>
  

• **内部样式表：**在head标签中添加style标签，然后编写完整的CSS语法。

  <!-- 内部样式表 -->
  <style type="text/css">
      h3{
         
          color: yellow;
      }
  </style>
  

• 外部样式表：

  • 本项目中的css文件
  • 公网的css链接(CDN加速)

  <!-- 外部样式表 href:外部CSS文件地址(可以在你项目中 相对/绝对，也可以在其他服务器上)  -->
  <!-- [最常用]它是多种CSS引入方式中最常用的    它也是外部样式表引入的最常用的-->
  <!--<link rel="stylesheet" type="text/css" href="css/index.css"/>-->
  <style type="text/css">
      /* CSS语法 用来引入外部样式文件时 如果出现不兼容CSS 2.x语法时 将无法使用 */
      @import url("css/index.css");
  </style>
  

**三种引入方式的优先级：**行内样式表优先级最高 > 内部样式表和外部样式表谁在后面谁优先级高(代码是由上而下执行的，后面的相同设置会覆盖前面的)

4. 掌握CSS的基本选择器

CSS中有三大基本选择器：

• **标签选择器：**标签名就作为一种选择器，表示给对应的标签统一设置样式。 例如：h3 p

  /* 标签选择器 */
  h3{
        
      color: deeppink;
  }
  
  p{
        
      font-weight: bold;
  }
  

• **类选择器：**需要借助标签的class属性 （应用最广泛的基本选择器）

  /* 类选择器：.标签的class属性值 */
  .poem{
        
      font-weight: bold;
  }
  
  .hehe{
        
      color: red;
  }
  

  <div>
      <h3>夏日绝句</h3>
      <!--  如果应用多个类选择器 可以以空格隔开 -->
      <p class="poem hehe">
         晨行梓道中，梓叶相切磨。<br/>
          与君别交中，缅如新缣罗。
      </p>
      <p class="hehe">
          呵呵
      </p>
      <p class="poem">
          哈哈
      </p>
  </div>
  

• **ID选择器：**需要借助标签的id属性（不常用）

  /* ID选择器 */
  #poem{
        
      color: greenyellow;
  }
  

  <!-- 严格来讲id选择器应该是唯一的  但是因为HTML是弱语法  所以你会发现ID选择器可以实现和类选择器一样的效果 -->
  <p id="poem">
     晨行梓道中，梓叶相切磨。<br/>
     与君别交中，缅如新缣罗。
  </p>
  

**基本选择器优先级(范围越小 优先级越高)：**ID选择器 > 类选择器 > 标签选择器

5. 掌握CSS的初级美化

5.1 字体美化

• 字体类型：font-family

  h3{
        
      /*font-family: "楷体";*/
      /*font-family: "宋体";*/
      /*font-family: "\u5b8b\u4f53";*/
      /* 如果这样设置是为了防止当前面的字体无法使用时  可以作为替换性内容 */
      /* 一般会对中文和英文分别设置字体 */
      font-family: tahoma, arial, "Hiragino Sans GB", "宋体", sans-serif;
  }
  

• 字体大小：font-size

  font-size: 16px;
  

• 字体的风格：font-style

  h3{
        
      /* 默认的 */
      /*font-style: normal;*/
      /* 采用字体原有的斜体设计 */
      /*font-style: italic;*/
      /* 采用固定的倾斜角度对字体倾斜 */
      /*font-style: oblique;*/
  }
  

• 字体的粗细：font-weight

  p{
        
      /*font-weight: bold;*/
      /* 加粗 */
      /*font-weight: 700;*/
      /* 更细的 */
      font-weight: lighter;
      font-weight: normal;
  }
  

• 一个字体属性设置所有字体样式：font

  body{
        
      /*font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;*/
      /* font-size: 12px/（行高）line-height: 1.5; */
      font: 12px/1.5 tahoma,arial,"\5b8b\4f53";
  }
  
  

（X）字体颜色：font-color （对勾）文本颜色：color

5.2 文本美化

• 文本颜色：color

  p{
        
      /* 可以使用关键字作为颜色值 */
      /*color: orangered;*/
      /* 可以使用16进制颜色值 */
      /*color: #D3C294;*/
      /* 配置三原色 红色 绿色  蓝色 */
      /*color: rgb(255,0,0);*/
      /*color: rgb(255,125,0);*/
      /* alpha 透明度 0 - 1之间  值越大透明度越低  */
      color: rgba(255,0,0,0.1);
  }
  

• 文本对齐方式：text-align (必须保证要设置的对齐文字是处于块元素内的)

  p{
        
      /*text-align: left;*/
      /*text-align: right;*/
      /*text-align: center;*/
      /* 两端对齐 */
      /*text-align: justify;*/
  }
  

块元素和行内元素：

​ 在标准文档流中，我们的HTML内的元素可以分为两大派。

• 块元素：独占一行、可以设置宽度和高度等信息。例如：div p h1-h6…

• 行内元素：多个行内元素可以在一行展示内容，它不可以设置宽度和高度等信息，内容撑开宽度和高度。 a image span…

• 文本缩进：text-indent

  p{
        
      font-size: 16px;
      /* 缩进 你根据字体大小计算缩进值 */
      /* px是绝对单位 */
      /*text-indent: 32px;*/
      /* em是相对单位 它会以当前字体大小进行计算 */
      text-indent: 2em;
  }
  

• 文本行高：（行间距）line-height

  line-height: 30px;
  

• 文本装饰：text-decoration

  span{
        
      /* 下划线 */
      /*text-decoration: underline;*/
      /* 上划线 */
      /*text-decoration: overline;*/
      /* 删除线：中划线 */
      /*text-decoration: line-through;*/
      /* 普通文字默认情况下为none */
      text-decoration: none;
  }
  
  a{
        
      /* 超链接标签默认文字拥有下划线  一般我们会对其进行下划线去除 */
      text-decoration: none;
  }
  

5.3 超链接美化

伪类选择器，可以应用其他的标签，但是常用于a标签。

选择器:伪类选择器名
示例：	a:hover 当鼠标悬浮在超链接标签上时触发选中

• hover 可以设置鼠标悬浮在超链接上的样式

  /* 鼠标悬浮其上时触发选中 */
  a:hover{
        
      text-decoration: underline;
      color: orange;
  }
  

• linked 可以设置超链接未点击前的样式(等价于标签选择器直接设置)

• visited 可以设置超链接被点击后的样式

• active 可以设置超链接被点击但还未释放的样式

5.4 鼠标指针

• 小手型指针

  /* pointer 小手 */
  cursor: pointer;
  

    - wait 加载中
    - help 帮助带问号
    - text 文本光标型
    - crosshair 十字型
    - default 默认光标样式
  

5.5 背景美化

• 背景颜色设置 background-color

• 背景图片 background-image

• 背景尺寸 background-size

• 背景平铺 background-repeat

• 背景定位 background-position

• 背景属性 background

  background: url(img/arrow-right.gif) no-repeat 170px center;
  

6. 掌握列表的使用

在HTML中为我们准备了三种列表形式：无序列表，有序列表，定义列表。

• 无序列表：以符号为前缀的列表 （应用最广是a标签之外的最常用的）

  <!-- 无序列表  默认带一个实心圆点 -->
  <!-- ul声明无序列表  ul标签内只能写li标签 -->
  <!--<ul type="square">-->
  <ul>
      <!-- li列表项 -->
      <li>星夜驰援，全力救人</li>
      <li>张建敏大使谈中美贸易争端</li>
      <li>学霸们的狂欢！剑桥大学俊男美女参加舞会庆祝考试结束</li>
  </ul>
  

• 有序列表：以有序的数字或者有序的符号(I II III A B C D)

  <!-- 有序列表 默认为1. 2. 3.有序数列前缀 -->
  <ol>
      <li>星夜驰援，全力救人</li>
      <li>张建敏大使谈中美贸易争端</li>
      <li>学霸们的狂欢！剑桥大学俊男美女参加舞会庆祝考试结束</li>
  </ol>
  

• 定义列表：带小标题的列表形式

  <dl>
      <!-- 标题 -->
      <dt>水果</dt>
      <!-- 标题下的列表 -->
      <dd>苹果</dd>
      <dd>香蕉</dd>
      <dd>西瓜</dd>
      <dd>胡萝卜</dd>
      <dt>蔬菜</dt>
      <dd>西红柿</dd>
      <dd>黄瓜</dd>
      <dd>冬瓜</dd>
      <dd>南瓜</dd>
  </dl>
  

对于列表的样式设置，CSS有专门的属性。

ul{
    
    /* 它其实是三个子属性的集合体  但是通常用它来去除列表前缀符号 */
    list-style: none;
    /*list-style: amharic;*/
}