我的CSS 入门1
CSS(Cascading Style Sheets)级联样式表。我现在所知的，她的存在能够更好的管理多个HTML文件，或者是为了使得网页设计更为丰富多彩，“简单可依赖”。
如果你对HTML一无所知，没事，花二十分钟看之前写的HTML速成，然后就可以着手CSS了，你会发现CSS用起来真是爽。
开始吧：
1.初识CSS
你是否还记得当初在HTML中设置背景颜色我们用：
<p style="background-color: #FF0000"> This is red </p>
如果现在我们要将100行设置成如上，那是不是每一行都来一个style=XXXX呢。NO
如果我们在<head>中如下设置
<head>
<style type="text/css">
p{background-color: #FF0000;}
</style>
</head>
然后来几个<p>
<p> First paragraph </p>
<p style="background-color: #FFFFFF"> Second </p>
<p>Third </p>
则会出现如下：
这个还需要解释吗？如果再head中的style中定义了p那么默认就是用那个格式，所以对于一百个我们需要的目标格式就用默认的就行，但是中间有特殊情况我不想默认怎么办呢(例如上例中Second背景为白色)，那就直接在定义过格式，其实后面我们可以发现，我们可以给不同的格式不同的id，可以随心所欲的确定某些行用什么格式。
如上，就是已经用到了CSS了，我们称在当前HTML中的head中定义style的方式叫做内部样式表。上述说了CSS的好处之一是可以管理多个HTML，如果用内部样式表，显然不知如何。其实大工程用的肯定就是外部样式表了。
2.外部样式表
新建html文件一样，我们新建一个后缀名为.css的文件，然后用notepad++打开它，在里面操作（其实就是将内部样式表中style包含的东东赋值到css文件里头）。之后，在需要用该样式表的html文件的head中：
<head>
<link rel="stylesheet" type="text/css" href="name.css">
</head>
这样相应的html文件就会用该css文件中的样式。这就叫做外部样式表。所以如果有一百个文件的格式统一要改的话，我们只要改一下css文件中的格式就可以了啊，真实爽爆天啊。
下面我们通过几个例子来多深入了解一下CSS。
3.背景设置
拼爹的时代，我们就从背景开始。例子：背景灰色，在页面中间插入图片，并且在该行平铺，随着鼠标滚动运动。
原始图片：
在style.css文件中写上：
body
{
background-color: #DCDCDC;
background-image: url("ball.jpg");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: center center;
}
然后新建一个html：引用这个css文件。
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head>
<link rel="stylesheet" type="text/css" href="style.css">
</head> <body>
</body> </html>
然后双击该html文件就会出现如下图了：
看到结果就是我们想要的。现在我们来每条语句学习。
background-color: #DCDCDC; 使得背景为#DCDCDC的颜色，这个颜色可以自己根据RGB表定，哪个看着爽，哪个来
background-image: url("ball.jpg"); 图片的路径
background-repeat: repeat-x; 平铺方式，还可以是repeat，repeat-y，no-repeat，挨个试试效果去吧
background-attachment: scroll; 随着屏幕往下运动它往上消失，还可以是fixed，总是在页面中
background-position: center center; 就是一个图片的位置，如果是no-repeat，那么这个图片就只在中间了，除了中间还可以有对于x：left right 对于y：top bottom。
好了，到这，你已经可以给自己设置背景了。最后来一条语句概括所有五个功能。
body{ background: #DCDCDC url("ball.jpg") repeat-x scroll center center; }
这条效果和如上一样，是偷懒的写法，按照顺序的，如果缺省，则为默认值。
4.字体设置
为什么接着介绍字体设置呢，因为你刚学习了背景设置，以及背景设置的偷懒方法，现在告诉你，字体也是类似的，很快你就接受了。
同背景设置，我们直接分析字体的五个功能吧。
font-style: normal; 正常的方式，也可以是斜体，用italic或者oblique，记得我们之前说过的<i>是斜体吧，这个可以直接代替她。
font-vatiant: normal; 不做变换，也可以是small-caps，显示小体的大写字母。
font-weight: normal; 默认正常，也可以是bold加粗，还记得<b>加粗吧，同样可以代替。
font-size: 2px; 表示2pixels大小，可以用磅pt，可以用百分比 ~% 或者~em，em我不知道什么。
font-family: "宋体"; 确定字体，也可以是“Time NewRoman”，arial，等。据说在字体后面加个字体所属的族，那么如果计算机没有该字体就会在相应族类中选择。
例如：font-family:arial,sans-serif;
偷懒的方式就是：
font：- - - - -
5.文本操作
我们也通过例子来说吧。目标：对一句话，缩进10px，左对齐，下划线，字符间距2px，将首字母大写。
在css中我们写入：
p
{
text-indent: 10px;
text-align: left;
text-decoration:underline;
letter-spacing:2px;
text-transform:capitalize;
}
在html中：
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head>
<link rel="stylesheet" type="text/css" href="style.css">
</head> <body> <p>hello everyone do you like english </p> </body> </html>
显示：
因为我们刚才设置了背景是灰色，所以还是灰色，发现都达到要求了。我们来学学这几个功能：
text-indent: 10px; 缩进功能，可以是像素或百分比
text-align: left; 对齐方式还可以是居中center，右对齐right，两端对齐justify
text-decoration:underline; 下划线修饰，可以是上划线line-through，删除线overline
letter-spacing:2px; 字符间距
text-transform:capitalize; 首字母大写，还可以是转换为大写字母uppercase，转为小写字母lowercase，不做变化none
我没有发现他们的偷懒写法，你可以去试试。
先到这吧。好好消化一下。
我的CSS 入门1的更多相关文章
- [HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]
CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...
- CSS入门教程——定位(positon)
CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 胖虎都看得懂的CSS入门
CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
- HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版
HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...
- css入门知识点整理
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
- H5教程（二），CSS入门（一）选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
随机推荐
- python 3.4.0 简单的print 'hello world',出错--SyntaxError: invalid syntax
问题描写叙述: win7下安装的python 3.4.0版本号, 在命令行里写入简单的输出语句: print 'hello world' 然后enter,结果返回结果为: SyntaxError: i ...
- atittit.表单验证性质的原则和实施，以及选择和定义自己的兼容easyui dsl窗体身份验证规则
atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...
- tc-SRM-626-DIV1-250
枚举alice投掷骰子得到的结果的每一种情况极其数量. 枚举bob投掷骰子得到的结果的每一种情况极其数量. 然后枚举alice投掷骰子得到的结果的数量和bob投掷骰子比alice低的数量. 然后计算结 ...
- 半平面交总结and模板
博客原文地址:http://blog.csdn.net/xuechelingxiao/article/details/40859973 这两天刷了POJ上几道半平面交,对半平面交有了初步的体会,感觉半 ...
- Log4j 2.0在具体解释发展先进的使用—SocketAppender远程输出(五岁以下儿童)
Log4j2的Appenders充分考虑输出日志事件.包装和过滤可以被转发,它包含的主要输出到本地文件.输出到远程主机, 文件包.注射.而且,根据该日志文件的时间点.自己主动文件大小的储存条件. 例如 ...
- SpringMVC + Spring 3.2.14 + Hibernate 3.6.10
SpringMVC + Spring 3.2.14 + Hibernate 3.6.10 集成详解 注:此文档只说明简单的框架集成,各个框架的高级特性未涉及,刚刚接触框架的新人可能需要参考其他资料. ...
- Redis 缓存 + Spring 的集成示例(转)
<整合 spring 4(包括mvc.context.orm) + mybatis 3 示例>一文简要介绍了最新版本的 Spring MVC.IOC.MyBatis ORM 三者的整合以及 ...
- HDU 1203 I NEED A OFFER!（dp）
Problem Description Speakless很长时间,我想出国.现在,他已经完成了所有需要的检查.准备好所有要准备的材料,于是,便须要去申请学校了.要申请国外的不论什么大学.你都要交纳一 ...
- 大数据系列修炼-Scala课程07
由于昨天下班后有点困,就没有来及写博客,今天会把它补上!把这个习惯坚持下去! 关于Scala高阶函数详解 1.Scala高阶函数代码实现:高阶函数就是在我们函数中套用函数 2.高阶函数代码详解:高阶函 ...
- jsmart 前结合案例
前绑定jsmart这是一个不错的选择.之前通过经常使用的项目中的.最近涉及的领域的后端部.jsmart有些使用相对较少,主要是因为他想引用文件,我写的模板,在一个简单的项目,直接使用js界,很复杂的前 ...