CSS学习（上）前端入门很简单
@最好有HTML基础哦
一 CSS入门基础
为什么要在网页中加入CSS
CSS是Cascading Style Sheet的缩写，又称为“层叠样式表”，简称样式表。它是一种只做网页的新技术，现在为大多数浏览器所支持，成为网页设计必不可少的工具之一。
1.什么是CSS
为了满足更过文本样式的需求，1997年W3C颁布CSS1版本。样式表的首要目的是为了网页上的元素精确定位，其次，他把网页上的内容结构和格式控制相分离。网页设计中我们通常需要统一网页的整体风格。统一的风格大部分涉及到网页中文字属性、网页背景色及链接文字属性等，如果应用CSS来控制这些属性，会大大提高网页设计速度，更有利于统一网页总体效果。
2.使用CSS的好处
掌握基于CSS的网页布局方式，是实现web标准的基础。在网页制作时采用CSS技术，可以有效的面对网页的布局、文字、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。反正呢，好处多多。
3.如何编写CSS
与HTML编写一致，工具呢“记事本程序”、UltraEdit、Dreamweaver等。
4.CSS基本语法
CSS的语法结构仅由3部分组成，分别为选择器、样式属性和值
基本语法如下：
选择器{样式属性:取值；样式属性:取值;样式属性:取值;...}
- 选择器（Selector）。是指这组样式编码所要针对的对象，可以是一个XHTML标记，如body，h1；也可以是定义了特定id或class的标记，如#main选择器表示选择<div id=main>，即一个被指定了main为id的对象。浏览器将对CSS选择器进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。
- 属性（Property）。是CSS样式控制的核心，对于每一个XHTML中的标记，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。
- 值（Value）。是指属性的值，形式有两种，一种是指定范围的值，如float属性，只可以应用到left、right和none 3中值中；另一种是数值，如width能够取值于0~9999px，或通过其他数学单位来指定。
在实际应用中，往往使用以下类似的应用形式：
Body {background-color:blue}
表示选择符为body，即选择了页面中的<body>标记，属性为background-color，这个属性用来控制对象的背景色，而值为blue。页面中的body对象的背景色通过使用这组CSS编码，被定义为蓝色。
浏览器与CSS
CSS在各个浏览器之间还是有差异的，最好的办法就是编写时在两个不同的浏览器上进行预览，及时调整各个细节。
- 在HTML中使用CSS
在HTML网页中添加CSS有4种方法：链接方式、行内方式 、导入样式和内嵌样式。
- 链接外部样式表
连接方式就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内。这种方法适合大型网站的CSS样式定义。
基本语法
<link type=”text/css” rel=”stylesheet” href=”外部样式表的文件名称”>
语法说明：
.链接外部样式表时，不需要使用style元素，只需要直接用<link>标记放在<head>标记中就可以了。
.同样外部样式表的文件名称是要嵌入的样式表文件名称，后缀为.css。
.CSS文件一定是纯文本格式。
.在修改外部样式表时，引用他的所有外部页面也会自动的更新。
.外部样式表中的URL相对于样式表文件在服务器上的位置。
.外部样式表优先级低于内部样式表。
.可以同时链接几个样式表，靠后的样式表优先于靠前的样式表。
一个外联样式表文件可以应用到多个页面。当改变这个样式表文件时，所有应用到该样式的页面都随之改变。在制作大量相同样式页面的网站时，外联样式表非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。
2.行内方式
行内方式是混在HTML标记里使用的。用这种方法，可以很简单地对某个元素单独定义样式。行内方式的使用时直接在HTML标记里添加style参数，而style参数的内容就是CSS的属性和值，在style参数后面的引号里的内容相当于在样式表大括号里的内容。
基本语法：
<标记 style=”样式属性:属性值;样式属性:属性值...”>
语法说明：
.标记：HTML标记，如body、table、p等。
.标记的style定义只能影响标机本身。
.style的多个属性之间用分号间隔。
.标机本身定义的style优先于其他所有样式定义。
虽然这种方法使用比较简单、显示直观，但在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件容量过大，不利于搜索引擎（或网络爬虫）搜索，从而导致后期维护成本高。
3.嵌入外部样式表
嵌入外部样式表就是在HTML代码的主体中直接导入样式表的方法。
基本语法：
<style type=text/css>
@import url(“外部样式表的文件名称”);
</style>
语法说明：
.import语句后的“；”一定要加上！
.外部样式表的文件名称是要嵌入的样式表文件名称，后缀为.css。
.@import应该放在style元素的任何其他样式规则面前。
4.定义内部样式表
内部样式表允许他们所应用的HTML文档的内部设置样式，然后在整个HTML文件中直接调用使用该样式的标记。
基本语法：
<style type=”text/css”>
<!-
选择符1（样式属性：属性值；样式属性：属性值；...）
选择符2（样式属性：属性值；样式属性：属性值；...）
选择符3（样式属性：属性值；样式属性：属性值；...）
...
选择符n（样式属性：属性值；样式属性：属性值；...）
-->
语法说明：
.<style>元素是用来说明所要定义的样式，type属性是指stype元素以CSS的语法定义。
.<!--...-->隐藏标记：避免了因浏览器不支持CSS而导致错误，加上这些标记后，不支持CSS的浏览器会自动跳过此段内容，避免一些错误。
.选择符1...选择符n：选择符可以使用HTML标记的名称，所有的HTML标记都可以作为选择符。
.属性值设置对应也是属性的值。
选择器类型
选择器（selector）是CSS中很重要的概念，所有HTML语言中的标签都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。在CSS中，有各种不同类型的选择器，基本选择器有标签选择器、类选择器和ID选择器3中，下面详细介绍。
1.标签选择器
一个完整的HTML页面是有很多不同的标签组成。标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。例如p选择器，下面就是用于声明页面中所有<p>标签的样式风格。
p{
font-size:14px;
color:093;
}
以上的这段代码声明了页面中所有的p标签，文字大小均是14px，颜色为#093（绿色）。每一个CSS选择器都包含了选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标签声明多种样式风格。
2.类选择器
类选择器能够把相同的元素分类定义成不同的样式，对XHTML标签均可以使用class=””的形式进行名称指派。定义类型选择器时，在自定义类的名称前面要加一个“.”号。
标记选择器一旦声明，则页面中所有的该标记都会相应的产生变化，如声明了<p>标记为红色时，则页面中所有的<p>标记都将显示为红色，如果希望其中的某一个标记不是红色，而是蓝色，则仅依靠标记选择器时远远不够的，所以还需要引入类（class）选择器。
类选择器的名称可以由用户自定义，属性和值跟标记选择器一样，必须符合CSS规范。
.class {color:green; font-size:20px;}
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>class选择器</title>
<style type=”text/css”>
.red{color:red; font-size:20px;}
.green{color:green; font-size:18px;}
</style>
</head>
<body>
<p class=”red”>class选择器1</p>
<p class=”green”>class 选择器2</p>
<h3 class=”green”>h3同样适用</h3>
</body>
</html>
3.ID选择器
在HTML页面中ID参数指定了某一个元素，ID选择器是用来对这个单一元素定义单独样式。对于同一个网页而言，其中农的每一个标签可以使用“id=”””的形式来对id属性进行名称的指派。ID可以理解为一个标记，每一个标记只能用一次。在定义ID选择器时，要在ID名称前加上“#”号。
ID选择器的使用方法和class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，其格式：
#id {color:yellow; font-size:30px;}
类选择器和ID选择器一般情况下是区分大小写的。（网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记）
二 用CSS设置文本样式
设计网页中的文字样式
1.font-family属性：font-family属性用来定义相关元素使用的字体。
基本语法：
font-family:”字体1”,”字体2”,...
语法说明：
font-family属性中指定的字体要受到用户环境的影响。打开网页时，浏览器会先从用户计算机中寻找font-family中的第一个字体，如果计算机中没有这个字体，会向右继续寻找第二个字体，依次类推。如果浏览页面的用户在浏览器环境中没有设置相关字体，则定义的字体将失去作用。
代码实例：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>无标题文档</title>
<style type=”text/css”>
<!--
.font {font-family:华文琥珀，”华文琥珀”;}
-->
</style>
</head>
<body>
<div class=”font”>
<ul>
<li>我爱我家，爸爸和妈妈</li>
</ul>
</div>
</body>
</html>
2.font-size属性：用来定义字体大小
基本语法：
font-size：大小的取值
语法说明：
font-size属性的属性值可以有多种指定方式，绝对尺寸、相对尺寸、长度、百分比值都可以用来定义。
在CSS中，有两种单位。一种是绝对长度单位，包括英寸（in）、厘米（cm）、毫米（mm）、点（pt）和派卡（pc）。另一种是相对长度，包括em、ex和像素（px）。ex由于在实际应用中需要获取x大小，因浏览器对此处理方式非常粗糙而被抛弃，所以现在的网页设计中对大小距离的控制使用的单位是em和px（当然还有百分数值，但他必须是一个相对与另一个的值）。
实例代码：
<style type=”text/css”>
<!--
.font{
font-family:Arial, Helevetica, sans-serif;
font-size:24pt;
}
-->
</style>
3.font-weight属性：设置字体的粗细
基本语法：
font-weight:字体粗度值
语法说明：
font-weight的取值范围包括normal、bold、bolder、lighter、number。其中normal表示正常粗细；bold表示粗体；bolder表示特粗体；lighter表示特细体；number不是真正的取值，其范围是100~1000，一般情况下都是整百的数字。
实例代码：
<style type=”text/css”>
<!--
.font{
font-family: 方正姚体，”方正姚体”;
font-size:30pt;
font-weight: 300
}
-->
</style>
4.font-style属性：用来设置字体风格
基本语法：
font-style:样式的取值
语法说明：
font-style属性也可以在Dreamweaver中进行可视化操作。
其CSS代码如下，使用font-style：italic设置字体为斜体
实例代码：
<style type=”text/css”>
<!--
.font{
font-family: 华文行楷; font-size:24pt;
font-style: italic;
font-weight: bold
}
-->
</style>
5.font-variant属性：可以将小写的英文字母转变为大写，而且在大写的同时，能够让字母大小保持与小写时一样的尺寸高度。
基本语法：
font-variant:变体属性值
语法说明：
|
属性值 |
描述 |
|
normal |
正常值 |
|
small-caps |
将小写英文字体转换为大写英文字体 |
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>无标题文档</title>
<style type=”text/css”>
<!--
.font {font-family:黑体;font-size :24pt;
font-variant: small-caps;
}
-->
</style>
</head>
<body>
<div class=”font”>
<ul>
<li>dreamweaver</li>
</ul>
</div>
</body>
</html>
6.text-decoration属性：可以对文本进行修饰
基本语法：
text-decoration:取值
语法说明：
|
属性值 |
描述 |
|
none |
默认值 |
|
underline |
对文字添加下划线 |
|
overline |
对文字添加上划线 |
|
line-through |
对文字添加删除线 |
|
blink |
闪烁文字效果 |
设计文本的段落样式
1.line-height属性：设置对象的行高，行高值可以为长度、倍数和百分比。
基本语法：
line-height:行高值
实例代码：
<style type=”text/css”>
<!--
.font{
font-family:Arial,Helvetica,sans-serif;
font-size:24pt;
font-weight:bold;
font-variant:small-caps;
text-decoration: underline;
line-height: 50px;
}
-->
</style>
2.text-align属性
基本语法：
text-align:排列值
语法说明：
left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐
3.text-indent属性：可控制段落首行缩进及缩进的距离。
基本语法：
text-indent:缩进值
语法说明：
缩进值必须是长度值或百分比
4.word-spacing属性：设置英文单词之间的距离
基本语法：
world-spacing:取值
语法说明：
取值可以使用normal，也可以使用长度值。normal指正常的间隔，是默认选项；长度是设置单词间隔的数值及单位，可以使用负值。
5.first-letter首字下沉
基本语法：
p: first_letter{font-size:16px;color:red;float;left;}
语法说明：
首字下沉主要使用到CSS的first-letter，然后配合font-size和float来设置字体的样式即可实现。first-letter选择器选取指定元素文本内容的第一个字母，即用于设置第一个字母的CSS样式。
6.text-transform：用来转换英文字母的大小写
基本语法：text-transform:转换值
语法说明：text-transform的取值范围如下
|
none |
表示使用原始值 |
|
lowercase |
表示使每个单词的所有字母转换为小写 |
|
uppercase |
表示使每个单词的所有字母转换为大写 |
|
capitalize |
表示使每个单词的首字母转换为大写 |
@欢迎大家指出问题，谢谢。
- CSS学习（下）前端入门很简单
- CSS学习（中2/2） 前端入门很简单
- 前端入门学习笔记—CSS
- web前端开发学习经验分享——css,js入门篇
- web前端基础入门学习第三天css
- web前端开发学习经验分享——css,js入门篇
- 十九、python学习之前端:html及css入门
- 初学者第一周入门学习HTML、Css和JavaScript过程中遇到的问题和相关笔记
- 前端学习：css基本知识
- 【前端学习笔记】CSS属性position以及各个属性值详解，及清除浮动的方法
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
- Web前端从入门到精通-9 css简介——盒模型1
- Web前端学习第十二天·fighting_使用CSS布局和定位（二）
- 前端学习 -- Css
- 前端学习 -- Html&Css -- 层级和透明度
- Web前端入门学习（2）——HTML常用标签
- 前端学习随笔 css篇
- 前端学习 -- Css -- overflow
- web前端学习笔记(CSS盒子的定位)
- web前端学习之HTML CSS/javascript之一