美文网首页
CSS基础与引入方法

CSS基础与引入方法

作者: 杨慧莉 | 来源:发表于2017-02-09 19:09 被阅读0次

CSS基础

CSS选择器(selector),以及一条或多条声明(declaration)

selector {
declaration1; 
declaration2; 
... declarationN 
}

每个声明用分号隔开,最后一个声明不用
而每一个声明由一个属性名和一个值组成。属性名和值被冒号分开

selector {property: value}

一般来说,我们让选择器单独占一行,在{}内一行只写一个声明,冒号前紧跟属性名,冒号后面空一格写属性值

h1 {
  font-size: 12px;
  color: #ffffff;
  font-family: sans-serif;
}

CSS引入方法

CSS的作用:为HTML提供显示效果
在HTML中引入CSS的方式有三种:

  • 内联属性(inline style attribute)
  • 写在style标签里
  • 用link标签引用外部文件

下面是对这三种方式的具体介绍。

内联属性

  • 使用方法:直接修改想要改变样式的HTML元素的style属性,将css代码直接写在style属性里。例如:
    <h1 style="font-size: 12px;">我的字号被修改了</h1>

写在style标签里

-使用方法:直接写在style标签里,一般要求写在head标签里。例如:

<head>
    <style>
        h1 {
          font-size: 12px;
        }
    </style>
</head>

用link标签引入外部文件

  • 使用方法:使用link标签引入外部css文件,一般也写在head标签里。例如:
<head>
     <link rel='stylesheet' href='style.css' />
</head>

代码点这里

相关文章

  • CSS基础与引入方法

    CSS基础 CSS选择器(selector),以及一条或多条声明(declaration) 每个声明用分号隔开,最...

  • css-note

    css学习内容 css基础语法 css使用方法 css选择器 css继承与层叠 css优先级 css命名规范 学习...

  • 前端新手常见问题(三)

    一、CSS基础: CSS全称:Cascading Style Sheets(层叠样式表) CSS有几种引入方式 在...

  • css使用方法

    css基本语法 css的定义方法是:选择器 { 属性:值; 属性:值; 属性:值;} 例: css页面引入方法: ...

  • swiper

    swiper 官网 1 使用方法 引入js(可与jQuery.js同时使用)与css文件 html写法: ...

  • CSS介绍

    CSS简介 CSS基础选择器 CSS字体属性 CSS文本属性 CSS的引入方式 CSS简介 CSS是层叠样式表(C...

  • vue2-animate

    概述 css的运动库 类似 animate.css 安装: 引入:入口文件引入(注意路径) 使用方法 针对单个标签...

  • 学习CSS,这些内容你都知道了吗?

    CSS介绍 引入css样式表方法 CSS选择器 CSS常用属性 CSS介绍: CSS全称是(Cascading S...

  • js实现网页数字滚动效果代码

    使用方法: 1、head引入css文件 2、head引入js文件 3、body引入HTML代码

  • css基础

    本文简介CSS的基础用法 CSS的引用方式 1.通过 引入 CSS。 @import的引用方式注释:@impo...

网友评论

      本文标题:CSS基础与引入方法

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