CSS样式表的基础使用

作者: 辽A丶孙悟空 | 来源:发表于2019-03-29 23:09 被阅读234次

CSS基础理解
CSS
CSS3基础
HTML学习笔记（四）
03-CSS3
CSS基础知识
CSS基础1--基础及语法
CSS第一小节第一天
认识CSS（1）
css基础:语法规范与选择器

一、什么叫CSS

什么是CSS

CSS（Cascading Style Sheet，层叠样式表）是由W3C（万维网联盟）的CSS工作组创建和维护的。它是一种不需要编译，可以直接由浏览器执行的标记性语言，用于控制Web页面的外观。通过使用CSS控制页面各元素的属性显示，可以将页面的内容与表现形式分离。

CSS也被叫做级联样式表。

CSS本身也是文本。

CSS历史

CSS1作为一项W3C推荐，CSS1发布于1996年12月17日。1999年1月11日，此推荐被重新修订。

CSS2作为一项W3C推荐，CSS2发布于99年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。

CSS3计划将CSS划分为更小的模块。

CSS的工作环境

CSS的显示环境——浏览器。

CSS的编辑环境
能够编辑CSS的软件很多，例如Sublime、Dreamweaver、webstorm等。

CSS的优势

避免使用不必要的HTML元素。

缩短更新和维护时间。

做出HTML实现不了的特效。

二、DIV和SPAN标签介绍

认识两个新HTML标签<div> <span>

div标签：是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，中文我们把它称作“层”。

span标签：是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

三、CSS样式规则

CSS规则

选择符（selecter）：所谓选择符就是规则中用于选择文档中要应用样式的那些元素。该元素可以是（X）HTML的某个标签，也可以是页面中指定的class（类）或者id属性限定的标记。

声明：声明包含在一对大括号“{}”内，用于告诉浏览器如何渲染页面中与选择符相匹配的对象。声明内部由属性及属性值组成，并用冒号隔开，以分号结束，声明的形式可以是一个或者多个属性的组合。

属性（property）：属性是由官方CSS规则约定的，而不是自定义的，除个别浏览器私有属性以外。

属性值（value）：属性值放置在属性名和冒号后面，具体内容随属性的类别而呈现不同形式，一般包括数值、单位以及关键字。

例如：
       p{
           color: red;
       }
       .head{
           color: green;
       }
       #span1{
           color: gold;
       }

四、样式表的加载方式

样式表加载总结

一、内嵌样式表——直接在页面的标签里加。

代码：
<div style="color: red; width: 400px;">测试内嵌样式表</div>
二、内部样式表——在head部分加入。

代码：
<style>
       .inner{
           color: green;
           width: 400px;
       }
</style>
三、链入外部样式表——在head部分加入。

代码：
<link rel="stylesheet" href="css/demo01.css">
四、导入外部样式表——在head部分加入。

代码：
   <style>
   
       @import url(css/demo02.css);

   </style>
结果：

注意

五、选择器

通配选择符

在编写代码时，用“*”表示通配符选择符，其作用是定义页面所有元素的样式。

代码：
       *{
            padding: 0px;
            margin: 0px;
        }

类选择符

类选择符通过直接引用元素中类属性的值二产生效果，这个应用前面总是有一个句点“.”，这个句点是用来标识一个类选择符，类名可以随意命名，但是最好根据元素的用途来定义一个有意义的名称。

代码：
.outer{
   color: blue;
   width: 400px;
}

<div class="outer">测试类选择符</div>

ID选择符

ID选择符与类选择符及其相似，类选择符是以句点“.”开头，而ID选择符是以“#”开头。对于一个HTML文档来说，其中的每一个标签都可以使用id=“ ”的形式进行一个名称指派，但是需要注意，在一个HTML文件中id是具有唯一性，是不可以重复的。

代码：
#importer{
   color: black;
   width: 400px;
}

<div id="importer">测试ID选择符</div>

包含选择符

如果用户想对某个对象中的子对象进行样式指派，包含选择符就能发挥作用了。包含选择符又称为后代选择符，因为该选择符是作用于某个元素的子元素的，而且不限于两层标签元素。

代码：
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>测试</title>

   <style>
       div p span{
           color: red;
       }

   </style>

</head>
<body>
   <div>
       <p>
           <span>
               测试包含选择符
           </span>
       </p>
   </div>

</body>
</html>
结果：

群组选择符

群组选择符使用符号对选择符进行了分隔，这样书写的优点在于同样的样式只需要书写一次，减少了代码量，有利于改善CSS的代码结构。

代码：
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>测试</title>

   <style>
       div,#p1,.span1{
           color: red;
       }

   </style>

</head>
<body>
   <div>
       测试
   </div>

   <p id="p1">
       测试
   </p>

   <span class="span1">
       测试
   </span>

</body>
</html>
结果：

六、伪类

伪类

伪类可以让用户在使用页面的过程中增加更多的交互效果，例如应用最为广泛锚点标签<a>的几种状态（未访问链接状态、已访问链接状态、鼠标指针悬停在链接上的状态以及被激活的链接状态），具体代码如下所示。

代码：
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>测试</title>
   <style>
       a:link {color:#000000;}      /* 未访问链接*/
       a:visited {color:#00FF00;}  /* 已访问链接 */
       a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
       a:active {color:#0000FF;}  /* 鼠标点击时 */
   </style>

</head>
<body>
<p><b><a href="#" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>
结果：