CSS基础教程1——CSS简介
CSS基础教程1——CSS简介
在学习CSS之前，至少需要对HTML或者XHTML有所了解！！！
什么是CSS
CSS(层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言，通过使用 CSS 我们可以大大提升网页开发的工作效率！
CSS实例
CSS由两个主要的部分构成：选择器(选择器通常是您需要改变样式的HTML元素，也可以是自定义的类选择器或者id选择器等等)，以及一条或多条声明(每条声明由一个属性和一个属性值组成，属性是我们需要修改样式的属性，每个属性有一个值，属性与值之前用 : 隔开每条声明之间用 ; 隔开)，例如：p{color:red;text-align:center;}。
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
为了让CSS代码更具有美观，建议每一条声明独占一行。
p{ color:red; text-align:center; }
实现CSS方式
CSS引入方式有三种，内嵌式、外联式、行内式。
内嵌式
内嵌式CSS用<style>标签实现，一般写在HTML文件的<head>标签中(基本用于小案例)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS内联式</title> <style type="text/css"> p{ color: red; font-size: 20px; } </style> </head> <body> <p>这是一个段落</p> </body> </html>
外联式
外联式CSS代码写在.css文件中，通过在HTML文件的<head>标签中用<link rel="stylesheet" type="text/css" href="CSS文件的相对路径">引入(一般用于大的案例或者项目)，CSS文件推荐存放在项目文件中的CSS文件夹。
假设index.css文件存放于css文件夹中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS外联式</title> <link rel="stylesheet" type="text/css" href="./css/index.css"/> </head> <body> <p>这是一个段落</p> </body> </html>
行内式
行内式写在HTML文件中需要修改样式的标签中用style="一条声明或者多条声明"(一般配合js使用)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS行内式</title> </head> <body> <p style="color: red; font-size: 20px;">这是一个段落</p> </body> </html>
