美文网首页web进阶
web进阶之三:css简介和样式

web进阶之三:css简介和样式

作者: 甚得朕心 | 来源:发表于2018-09-07 15:08 被阅读16次

CSS是什么

  CSS 指层叠样式表 (Cascading Style Sheets)。
在第一篇文章中我们介绍到,网页有三个部分组成,分别是结构(html),样式(css),表现(javascript)。 那么CSS主要就是做网页的样式。

css可以用来为网页创建样式表,通过样式表可以对网页进行装饰。

  层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖乘次低的,而css就可以分别为网页的各个层次设置样式。

样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

CSS基础语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器{样式名:样式值;样式名:样式值;}

在写申明的时候要用分号隔开

h1 {color:red; font-size:14px;}


001.JPG

行内样式

  字面意思,即在行内,直接申明样式

<p style="color: red;font-size: 30px"></p>
<!--在段落内申明,字体颜色为red,大小为30px-->

这种方式编写简单,定位准确。但是由于直接将css代码写到了html标签的内部,导致结构与表现耦合,同时导致样式不能够复用,所以这种方式我们不使用。

内部样式表

即:可以直接将演示写到<style>标签中,<style>标签是写在<head>内。

<style>
  p{color:red; font-size: 30px;}
</style>

这样使css独立于html代码,而且可以同时为多个元素设置样式,这是我们使用的比较多的一种方式。
** 但是这种方式,样式只能在一个页面中使用,不能在多个页面中重复使用。**

外部样式表

  可以将所有的样式保存到一个外部的css文件中,然后通过<link>标签将样式表引入到文件中。切记,在外部写样式表的时候,后缀一定是.css文件。

这种方式将样式表放入到了页面的外部,可以在多个页面中引入,同时浏览器加载文件时可以使用缓存,这是我们开发中使用的最多的方式。

<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<!--把外部样式表在head标签中提起引用。-->

这里我用webstorm编辑好,然后后缀名为.css,把它和网页文件保存在同目录下,这样引用比较简单。


003.JPG

有任何问题请给我留言,或者直接发我邮箱taijirenlijunyang163@.com。欢迎大家交流讨论。

相关文章

  • web进阶之三:css简介和样式

    CSS是什么   CSS 指层叠样式表 (Cascading Style Sheets)。在第一篇文章中我们介绍到...

  • 2018-06-09

    CSS基础 1、css简介 cascading style sheets汉译层叠样式表,WEB标准中的表现标准语言...

  • w3cshcool CSS笔记 - 草稿

    目录 ### CSS简介 ### CSS语法 ### CSS创建 ### CSS简介 - 样式层叠次序 - 一...

  • sass安装和sass基础知识

    一:sass简介 1. 什么是css预处理器 用一种别的专业语言写web样式,这些样式经过编译成为css语言 详情...

  • 好程序员web前端培训分享CSS基础篇

    好程序员web前端培训分享CSS基础篇 学习目标 1、CSS简介 2、CSS语法 3、样式的创建 4、两种引入外部...

  • HTML简介和网页结构

    1 HTML简介和网页结构 Web前段标准是一系列的标准,它由如下技术组成: HTML :结构标准 CSS: 样式...

  • web前端学习攻略

    web前端学习攻略 第一阶段: HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css...

  • CSS学习笔记

    一个在线的web编辑器学习内容来自菜鸟教程 一、简介 什么是 CSS? CSS 指层叠样式表 (Cascading...

  • Html-CSS基础入门

    CSS简介 css:Cascading style sheets 样式通常存储在样式表中 为什么要使用CSS样式...

  • CSS

    一、CSS定义 CSS就是web标准中的表现标准,专门用来对网页标签进行布局和样式设定的语言 CSS又叫层叠样式表...

网友评论

    本文标题:web进阶之三:css简介和样式

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