锐客网

  1. 首页 > 生活百科 > it技术 > >

前端|css基础总结(css简介、css语法框架、css样式表格式、css选择器)

css前端htmlcss3

css基础总结 1-css概述

  1. css含义
    cascading style sheets——层叠样式表，也称css样式表、级联样式表。
  2. css作用
    html负责网页页面中“有什么”，而css负责网页页面中的内容“长什么样”，用来定义网页内容的格式
  3. css语法框架
/*展开格式——推荐 */ 选择器 { 属性:值; /* 每行称为一个“声明” */ ……; 属性:值/* 最后一个声明后不需要跟“; ” */ } /* 紧凑格式 */ 选择器 {属性:值; ……; 属性:值}

  1. 样式表格式
    css样式表的格式可以按照书写位置分为三类：行内样式表、内部样式表、外部样式表。
  • 行内样式表
    直接在元素标签中设定样式，可简单修改某些标签的样式。例如如下代码：
文字部分

  • 内部样式表
    首先回顾一下html文件的基本框架：
网页标题

内部样式表即把样式表写在html代码中，将样式打包放在标签中，因此，html文件的框架变为如下格式：
网页标题 > 选择器{声明} …… 选择器{声明}

  • 外部样式表：在开发中更加常用，结构（html）和样式（css）分离，将css部分单独写成.css文件，并引入html页面中。.css文件的基础结构如下：
选择器 { 属性:值; ……; 属性:值 } …… 选择器 { 属性:值; ……; 属性:值 }

而在html文件中，需要使用标签引入css样式表，操作如下：
网页标题

2-css选择器 前端|css基础总结(css简介、css语法框架、css样式表格式、css选择器)
文章图片

  1. 基础选择器
    1. 标签选择器
      选择一类标签，将此类标签全部应用某种格式
      标签名 { 属性:值; ……; 属性:值 }/* 在标签中 */ 标题1 标题2段落文字
      /* 如果选择器是h1，那个就选择所有h1标签进行格式处理*/

    2. 类选择器
      对于目标标签，设置class属性，即设置类名，根据类名选择若干个标签应用某种格式
      .类名 { 属性:值; ……; 属性:值 }/* 在标签中 */ 标题1 标题2 标题3 /* 如果选择器是.class1，选择第一个和第三个h1标签； 如果选择器是.class2，选择第二个h1标签 */

    3. id选择器
      对于目标标签，设置id属性，根据id值选择某一个标签（注意：只能选择某一个标签，因此id值不能重复）应用某种格式
      #类名 { 属性:值; ……; 属性:值 }/* 在标签中 */ 标题1 标题2 /* 如果选择器是#id1，选择第一个h1标签； 且第二个标签这样的写法是错误的。 */

    4. 通配符选择器
      选择页面中的所有标签，一般用于所有元素在格式处理前的风格统一化。
      * { 属性:值; ……; 属性:值 }/* 在标签中所有标签都会被应用某种格式 */

  2. 复合选择器
    首先介绍一下标签的关系，有两种基本的关系：父子关系（包含关系）、兄弟关系(并列关系)。如下是表格标签的基础结构：
    …… …… ……

    其中和是父子关系，
    和是兄弟关系。下面以表格标签为例介绍复合选择器
    1. 后代选择器
      选择父标签中的所有子标签
      table tr { 属性:值; ……; 属性:值 } /* table标签中的所有tr标签都会被选择 */

      【前端|css基础总结(css简介、css语法框架、css样式表格式、css选择器)】这里的“table”、“tr”是标签选择器，也可以使用其他基础选择器，例如如下代码：
      .choosen #special{ 属性:值; ……; 属性:值 }

      ……
      ……

    2. 子选择器
      选择父标签中最近的一级子元素。
      table>tr { 属性:值; ……; 属性:值 } /* table标签中选择第一个tr标签，即选择第一行 */

    3. 并集选择器
      选择多个并列的标签进行相同样式设置
      th,td { 属性:值; ……; 属性:值 } /* table标签中的所有th、td标签都会被选择 */

    4. 伪类选择器
      比较特殊的一类选择器，主要用来给某些标签添加特殊效果。
      • 链接伪类：主要针对链接标签文本或图像
      a:link{声明} /* 选择所有未访问过的链接 */ a:visited{声明} /* 选择所有已访问过的链接 */ a:hover{声明} /* 选择鼠标放于之上的链接，很常用 */ a:active{声明} /* 选择鼠标已经点击但是尚未结束点击的链接，即被选中的链接（活动链接） *//* 开发过程中四个链接伪类不一定都需要写出来，可以只写a:hover{} ,但是四个链接伪类都写的话，需要按照link --> visited --> hover --> active 的顺序 */