美文网首页Python知识锦集
Python HTML和CSS 3:CSS基本语法以及样式引入的

Python HTML和CSS 3:CSS基本语法以及样式引入的

作者: IIronMan | 来源:发表于2019-02-21 22:38 被阅读4次

    一、简单的介绍

    为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSSCascading Style Sheets 的首字母缩写,意思是 层叠样式表。有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html 文档变得更加简洁。

    二、css基本语法

    • css的定义方法是:选择器 { 属性:值; 属性:值; 属性:值;},选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:

      div{ 
           width:50px; 
           height:50px; 
           color:blue 
      }
      

    三、css页面样式引入方式

    • 3.1、外联式:通过link标签,链接到外部样式表到页面中,首先我们需要建一个 .css 结尾的样式文件,暂且命名为 main.css,写一个简单的 div 选择器,内容如下

      div{
         font-size: 22px;
         color: red;
         background-color: blue;
      }
      

      main.css 的使用方式如下

      <link rel="stylesheet" type="text/css" href="./CSS/main.css">
      

      提示: href 后面在导入main.css 路径是以当前html 文件为基准寻找的

      代码图如下,link要写在当前 html 文件的 <head></head> 标签里面

      • 代码图

      外联式:推荐使用

    • 3.2、嵌入式:通过style标签,在网页上创建嵌入的样式表,如下,在<head></head> 标签里面写<style></style>标签,里面再写 选择器

      <style type="text/css">
          h3{
             font-size: 27px;
             color: brown;
          }
      </style>
      

      代码图如下


      嵌入式:通过style标签,在网页上创建嵌入的样式表

      嵌入式:在一些访问频繁的网页上建议使用

    • 3.3、内联式:通过标签的style属性,在标签上直接写样式,如下以 <a></a> 标签为例,把 style 样式写到标签里面,不推荐使用

      <a href="https://www.jianshu.com/u/8fed18ed70c9" style="color: purple;font-size: 23px;">我的简书</a>
      

      内联式:不推荐使用

    相关文章

      网友评论

        本文标题:Python HTML和CSS 3:CSS基本语法以及样式引入的

        本文链接:https://www.haomeiwen.com/subject/hwmgsqtx.html