[Codecademy] HTML&CSS 第七课:CSS: An Overview
本文出自 http://blog.csdn.net/shuangde800
[Codecademy] HTML && CSS课程学习目录
------------------------------------------------------------------------------------------------
What CSS is(什么是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?(为什么要把功能分开?)
If it's in, it's out!(引用css文件)
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: purple;
}
</style>
<title>Result</title>
</head>
<body>
<p>Check it out! I'm purple!</p>
</body>
</html>
<!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(自关闭标签)
CSS语法
One selector, many properties(一个selector,多个properties)
p {
font-family: Arial;
color: blue;
font-size: 24px;
}
/*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(分号的重要性)
CSS的注释
RGB模式颜色的十六进制值
Pixels and ems(像素)
A font of knowledge(字体的小知识)
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.
/*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(备份值)
Border属性
Links and 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=" ...
随机推荐
- Archive for required library: ‘WebContent/WEB-INF/lib/xxx.jar cannot&n
今天导入一个项目到eclipse,出现感叹号,而且报1. Archive for required library: ‘WebContent/WEB-INF/lib/xxxxx.jar cannot ...
- File中操作路径的API(转)
这几天一直在搞Java,模板引擎系列和程序猿执业修养系列都暂停了,在Java上忙的不亦乐乎!由于对Java还不太熟悉,经历了各种纠结终于完成了任务.以下是关于Java获取当前目录的方法的备忘录. 原文 ...
- c显示数字的LED(数字转LED)
实现这么一个函数:传入一个int值,在屏幕输出类似LED显示屏效果的字母拼图,例如: 输入1234567890,输出: 请注意每个字符的固定宽度和高度,两个数字间保留一个空格. 函数名:void LE ...
- IT第六天 - eclipse快捷操作、万年历项目的编写、菱形的打印输出、代码简化
IT第六天 上午 小项目 1.程序提前结束的退出标志 2.登录用户的模拟,给出适当的提示信息 3.根据要求,寻找规律,然后编写程序 Eclipse的使用 1.快捷键的使用 下午 中小项目 1.九九乘法 ...
- VC++中的头文件包含问题
在一些大的工程中,可能会包含几十个基础类,免不了之间会互相引用(不满足继承关系,而是组合关系).也就是需要互相声明.好了,这时候会带来一些混乱.如果处理得不好,会搞得一团糟,根据我的经验,简单谈谈自已 ...
- uva11021 - Tribles(概率)
11021 - Tribles GRAVITATION, n.“The tendency of all bodies to approach one another with a strengthpr ...
- 设计模式(一)工厂模式Factory(创建型)
设计模式一 工厂模式Factory 在面向对象编程中, 最通常的方法是一个new操作符产生一个对象实例,new操作符就是用来构造对象实例的.可是在一些情况下, new操作符直接生成对象会带来一些问题. ...
- SEOR要懂得如何建立完善的seo运营团队
网站运营要想能做大做全面,完善的seo运营团队是不可缺少的,跟企业管理一样的道理,seo运营的成功也在于对团队的合理利用,发挥团队中每个成员的优势才能运营好网站.网站的运营CEO要懂得如何建立完善的s ...
- iOS UILabel 使用姿势大全(标红关键字)
一.初始化 ? 1 2 3 UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 40, 120, 44)]; ...
- 转化为用欧几里得算法判断互质的问题D - Wolf and Rabbit
Description There is a hill with n holes around. The holes are signed from 0 to n-1. A rabbit must h ...