本文出自 http://blog.csdn.net/shuangde800

------------------------------------------------------------------------------------------------

What CSS is（什么是CSS）

CSS（Cascading Style Sheets级联样式表）是一种描述你html的外观和格式的语言。

一个样式表（style sheet）是一个描述html页面看起来怎么样的文件。

我们说这些样式表是级联（cascading）的是因为这些表格可以应用超过一种的样式。例如，你想让所有的段落<p>的字都是蓝色的，但是只有其中某一个单词是红色的，CSS也可以做到这点。

只要这样子设置css文件：

p {

	color: red;

}

span {

	/*Write your CSS here!*/

	color: blue;

}

然后html文件中连接css文件后，直接使用<span>即可，就会自动设置css的样式：

<!DOCTYPE html>

<html>

	<head>

		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

		<title>Fancy Fonts</title>

	</head>

	<body>

		<p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p>

	</body>

</html>

效果图：

Why sparate from function?（为什么要把功能分开？）

有两个主要原因要把form/formating（css）和content/strutrue（HTML）分开来：

1. 可以给一种标签定制格式，以后使用这个标签就再也不需要在重写代码。

2. 可以把同一种样式表应用在多个html文件中，而不要重写代码

If it's in, it's out!（引用css文件）

在之前的课程中学习了html内联样式（inline styling），例如：

如果用这种方法制作网页，那么将会很可怕：你必须要写非常多相同的代码，这样会让html文件变得很大！而且如果要改变风格，那么就需要改变所有的代码！而如果使用css文件的话，只需要修改这个文件就可以了，多么轻松！

有两种方法给html文件设置css：

1. 内置在html中，即放在在html文件的<head>标签内，把css内容放在<style>标签内。

例如：

<!DOCTYPE html>

<html>

	<head>

		<style>

			p {

				color: purple;

			}

		</style>

		<title>Result</title>

	</head>

	<body>

		<p>Check it out! I'm purple!</p>

	</body>

</html>

2. 单独的css文件，然后在html链接它。这是一个更好的方法。

在head标签内增加<link>标签，然后在link标签里增加属性type = "text/css";rel="stylesheet";href="stylesheet.css"

<!DOCTYPE html>

<html>

	<head>

		<title>Result</title>

	    <link type="text/css"; rel = "stylesheet"; href="stylesheet.css"></link>

	</head>

	<body>

		<p>I want to be SIZE 44 font!</p>

	</body>

</html>

PSA: Self-closing tags（自关闭标签）

自关闭标签可以让我们写代码更加方便，如果标签<xxx> </xxx>之间没有内容，那么就可以使用自关闭标签，例如：

<linktype="text/css" rel="stylesheet" href="CSS file address"/>

<imgsrc="web address"/>

大多数标签都不是自关闭的，但是知道用这个可以节省时间。

CSS语法

css语法和html不一样，但是不必担心，它很简单！大多数都是下面这种格式的：

selector {

property: value;

}

selector可以是html的任何标签，例如<p>，<img>，<table>.

property是标签内的属性，例如可以设置font-family,color,和font-size等。

value是property属性的值，例如color的值可以是red。每个属性值之后要有分号；。

One selector, many properties（一个selector，多个properties）

CSS的另一种优势就是在一个selector里面可以设置多个properties，例如，你要设置段落<p>的font-size,font-family,color属性，可以这样设置：

p {

     font-family: Arial;

     color: blue;

     font-size: 24px;

}

记住，每个属性值之后要有一个分号。

一个css文件还可以有多个selector.

例如：

stylesheet.css

/*You can do this! Write your CSS below.*/

h3 {

    color:red;

}

p {

    font-family:Courier;

}

span {

    background-color:yellow;

}

index.html

<!DOCTYPE html>

<html>

	<head>

		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

		<title>I Know Kung Fu (er, CSS)</title>

	</head>

	<body>

		<div>

			<h3>What's CSS for?</h3>

			<p>CSS is for styling HTML pages!</p>

			<h3>Why use it?</h3>

			<p>It makes webpages look <span>really rad</span>.</p>

			<h3>What do I think of it?</h3>

			<p>It's awesome!</p>

		</div>

	</body>

</html>

效果图：

The importance of semicolons（分号的重要性）

当你添加越来越多的property-value给CSS文件中的selector时，记住在每个值之后添加分号是非常重要的！

分号告诉css一对property-value结束了，并且进入下一个。没有分号，会让你的代码看起来很难懂。

同时，也要记住每个selector后跟着一对花括号{ }

CSS的注释

CSS的注释和C语言一样，使用/* */ 的

RGB模式颜色的十六进制值

你可能注意到了，我们使用color:red或color:blue等来设置颜色，但是世界上的颜色千千万万，如果要其它颜色呢？比如要橘黄色，淡蓝色，深蓝色等等。设置这些颜色，就需要用到十六进制值了。

在网上有很多十六进制的颜色值，用搜索引擎搜一下就可以了。这个网站就不错链接

十六进制颜色值以“#”开头，然后跟着6位的0~9和A-F的十六进制数，每两位代表RGB颜色模式的红/绿/蓝三颜色的值。例如，#FF0000代表红色，#00FF00代表绿色，#0000FF代表蓝色。

Pixels and ems（像素）

我们经常会设置字体的大小，例如：

font-size: 10px;

}

其中的10px代表10像素，一个像素就是你电脑屏幕上的一个点，用像素来标识字体的尺寸，当用户电脑屏幕规格和你的差不多时，这个方法非常好。

如果用户电脑屏幕的差别和你的非常大呢？（例如用户使用智能手机浏览你的网页）

那么就要使用em了（注意不要和<em></em>斜体混淆）。

字体的ems尺寸是一个相对尺寸，一个em等价于用户设备的默认字体大小尺寸，那么2em就是两倍大小了，0.5em就是u一半大小

A font of knowledge(字体的小知识)

之前使用过font-family改变字体类型，那么CSS到底支持多少种字体呢？

答案是取决与具体的设备，大多数电脑都支持最常用的字体，例如Verdana, Courier, 和Garamond等，但是每台电脑可能会有安装不同的字体。

好消息是，CSS提供了一些内置的字体，这样就可以保证在任何设备和系统下都可以显示效果。

这些字体是：

serif: A font with little decorative bits on the ends of the strokes that make up letters. Do a search on "serif" to see what we mean.

sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies on the ends of letters like a serif font does.

cursive: A scripty font! It looks like cursive writing.

在之后我们会学习怎样导入自己的字体，这样就可以保证所有人即使是没有安装该字体的都可以显示效果。

下面显示三种字体：

stylesheet.css

/*Add your CSS below!*/

h1 {

    font-family:serif;

}

h2 {

    font-family:sans-serif;

}

h3 {

    font-family:cursive;

}

index.html

<!DOCTYPE html>

<html>

	<head>

		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

		<title>Result</title>

	</head>

	<body>

		<h1 >I'm going to be a serif font when I grow up!</h1>

		<h2>I'm going to be a sans-serif font.</h2>

		<h3>I'm going to be in cursive!</h3>

	</body>

</html>

效果：

Backup values(备份值)

你不需要直接指定使用内置的默认字体，例如cursive,sans-serif。你可以告诉CSS尝试多种字体，例如：

p {

font-family: Tahoma, Verdana, sans-serif;

}

CSS会依次按顺序尝试使用这些字体，一旦发现一个字体在用户机器上有，那么就会选择使用这个字体。

Border属性

很多html元素都支持border属性，这尤其对表格有用。

border支持多个值，例如，一个border是2px, solid, 和red:

selector {

border: 2px solid red;

}

Links and text decoration（链接和文字修饰）

链接有很多和文字相同的属性，可以改变它的颜色，尺寸等。

除此之外，链接默认会有一个下划线的属性，如果要取消下划线，就在text-decoration里设置。

这个属性允许对文本设置某种效果，如加下划线。

取消下划线：

a {

    text-decoration: none;

}

text-decoration的几种属性：

h1 {text-decoration:overline}   上划线

h2 {text-decoration:line-through} 中划线

h3 {text-decoration:underline}  下划线

h4 {text-decoration:blink} 定义闪烁的文本

[Codecademy] HTML&CSS 第七课：CSS: An Overview的更多相关文章

[Codecademy] HTML&CSS 第三课：HTML Basic II
本文出自 http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...
[css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
CSS前5课总结
CSS<精通CSS.DIV网页样式与布局>视频前5课总结: 地对地导弹第一课: 使用CSS控制页面: 1,行内样式 <p style="color:#0000FF; fo ...
萌新接触前端的第二课——CSS
前端知识——CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...
七种CSS左侧固定,右侧自适应两栏布局
一两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...
html学习第二天—— 第七章——CSS样式基本知识
外部式css样式,写在单独的一个文件中外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<s ...
妙味课堂——HTML+CSS(第三课)
常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...
[HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]
CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...
从零开始学习html（七）CSS样式基本知识
一.内联式css样式,直接写在现有的HTML标签中 <!DOCTYPE HTML> <html> <head> <meta http-equiv=" ...

随机推荐

QT基本数据类型（以前没见过qintptr和qlonglong）
QT的基本数据类型 qint8:signed char 有符号8比特数据 qint16:signed short 16位数据类型 qint32:signed int. 32位有符号数据类型 qint6 ...
slf4j 和 log4j合用的（Maven)配置(转)
简述:添加logger的日志输出,下面是配置信息供备忘步骤:1. 在Maven的porn.xml 文件中添加dependency如下 <dependency> <groupId&g ...
Android apk逆向实战
简介逆向Android apk其实是一个分析Android apk的一个过程,必须了解Android程序开发的流程.结构.语句分支.解密原理等等. 功能破解一个注册验证程序(自写一个简单的注册验证 ...
你会用swift创建复杂的加载动画吗(1)
时至今日,iOS 应用商店已经拥有超过了140万应用,让你自己的应用脱颖而出确实是个不小的挑战.不过,在你的应用掉入默默无闻的大黑洞之前,你拥有一个小小的机遇窗,它能帮你吸引用户的注意. AD: 时 ...
android Graphics（一）：概述及基本几何图形绘制
前言:我最近想抽空研究研究android的各种特效,android的特效真是其它平台无法比拟的,而且一个漂亮的UI交互,会给APP增色不少,而学习特效之前,有关graphics绘图的基础知识是必不可少 ...
ListView上拉刷新和分页加载完整的Dome
很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...
iOS 开发http post 文件的上传
iOS开发网络篇—文件的上传说明:文件上传使用的时POST请求,通常把要上传的数据保存在请求体中.本文介绍如何不借助第三方框架实现iOS开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代 ...
c++，派生类对象可以对基类赋值，基类对派生类不可以赋值
派生类对象可以对基类对象赋值,赋值时属于派生类独有的部分就舍弃不用. #include <iostream> using namespace std; class DemoA { publ ...
QGraphicsView中选中QGraphicsPathItem使之不出现虚线框
绘制一条贝赛尔曲线,当选中该曲线时,显示其控制点并把控制点和起始点连结起来,从而可以清晰的显示曲线的参数. # -*- coding: utf-8 -*-from PyQt4 import QtGui ...
ASP.NET MVC 5 学习教程：添加验证
原文 ASP.NET MVC 5 学习教程:添加验证起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器添加视图修改视图和布局页控制器传递数据给视图添加模型创建连接字符串通过控 ...

[Codecademy] HTML&CSS 第七课：CSS: An Overview