CSS基础与引入方法

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>

代码点这里

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,378评论 0 40
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,015评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,800评论 32 459
  • 安利给大家一个截屏软件,截表情专用的软件~先给大家看看效果 软件的名字叫 直接打开APP STORE,搜索GIPH...
    MaxZing阅读 819评论 0 5
  • 我们在招生过程中,最常用的方式就是在校门口做活动或者发单页。通过活动和单页,来收集家长电话,邀约家长上门。在这个过...
    绘客ART阅读 1,645评论 0 1

友情链接更多精彩内容