CSS的基础语法及插入到HTML中的方法?

    互联网/前端 43次点击 · 1205天前 · 嘻莹
通俗易懂带你正确理解栈和堆?安装vue.js报错? 嘻莹

1条回答我要回复

    梁国强1205天前


      本文主要介绍CSS的基础语法,以及插入到HTML中的方法,供遗忘时快速查阅。(本文内容结合W3C教程编写)


       CSS基础语法
      CSS规则由选择器和声明组成 选择器是要改变样式的HTML元素,也可以是表示多个元素的id或class; 声明是要改变的属性和属性值,以冒号隔开;声明之间用分号隔开
      h1 {color:red; font-size:14px;} /*改变h1元素的样式*/
      .div {color:red; font-size:14px;} /*改变class为div的所有元素的样式*/ 
      CSS插入HTML
      当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:
       
      1、外部样式表最常用的插入方法,将所有的样式存放到一个后缀为“.css”的独立文件中。这样既易于修改,与内容分离又保证了HTML代码的简洁,更重要的是,独立出来的样式可以应用于多个页面。
      插入方法和插入JS类似,href的值为URL,规定css文件所在的位置。
      *<link>在HTML中没有结束标签,结尾有"/",且只能存在于head部分,没有出现次数限制<head>
      <link type="text/css" href="mystyle.css" />
      </head>
       
      2、内部样式表
      当样式较少,只应用于单个页面时,内部样式表是合适的选择。
      使用<style>标签在文档头部定义内部样式表<head>
      <style type="text/css">
      hr {color: sienna;}
      p {margin-left: 20px;}
      body {background-image: url("images/back40.gif");}
      </style>
      </head>

       3、内联样式
      内联样式将样式和内容合为一体,这种方法会使文档代码变得复杂,除非样式只在需要的元素上应用一次,否则不要轻易尝试。
      直接在元素标签内使用style属性,用""把所有声明括起,声明间以分号隔开<p >
      This is a paragraph
      </p>
       4、多重样式
      层叠次序
      内联样式(在 HTML 元素内部) 内部样式表(位于 <head> 标签内部) 外部样式表 浏览器缺省设置

      当一个页面同时使用以上3种方法插入样式时,相同样式使用哪个由层叠次序来决定。 即最先考虑的是内联样式,内部样式表次之,外部样式表再次之;而不同的样式都会被应用。
       

    请先登录后,再回复