web学习笔记——CSS整理（一）
今天开始学习CSS，一边看书，一边对着博客建立自己的学习笔记。
CSS的概念，应该稍微记一下，是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，即是“样式表”。好的，概念的东西就到这里为止，接下来正式开始学习基本语法。
CSS的基本语法：选择符 { 样式属性：取值; 样式属性：取值;}（记得要有分号）
选择符被分为“类选择符”，“ID选择符”，“包含选择符”三种。
话说我还不知道怎样正确去定义选择符，不过先照着书看吧。
1，类选择符的语法是：标记名.类名{ 样式属性：取值；样式属性：取值;}
书上说，其中的类名是类选择符，这是可以自己定义的名称。在实际应用中，还可以省去HTML的标记名。
例如：p.red {color:red}可以写成：.red {color:red}
三是与直接定义HTML中的标记样式不同的是：这段代码仅仅是定义了样式，并没有应用样式。如果要应用样式中的red类，还需要在正文中添加如下代码：
<p class=red>
2，ID选择符
先学习一下什么是ID，我也不知道，不过书上写着：在HTML中，需要唯一标识一个元素时，就会赋予它一个ID标识，以便在对整个文档进行处理时能够很快地找到这个元素。而ID选择符则用来对这个单一元素定义单独的样式。其定义的方法与类选择符差不多，不过要把（.）改成（#），而在调用的时候把class换成ID。
ID选择符的语法是：标记名#标识名 { 样式属性：取值; 样式属性：取值;}
例如在页面中定义了一个ID为exam的元素，这里要设置这一元素的文字颜色为红色，那么只需要添加如下代码：
#exam {color:#FF0000}
<p id="exam">
3，包含选择符
包含选择符也称为i关联选择符，是对某种元素包含关系定义的样式表。这种方式仅仅对被包含在内的元素定义。例如：
table a { font-size：12px }
这段代码只对在表格内的链接文字有效，设定了文字大小为12像素，而对于表格之外的链接文字不起作用。
然后就是添加CSS的方法。按照功能区分，分别是：链入外部样式表，内部样式表，导入外部样式表，和内嵌样式共四种！没的偷懒，接下来还是要一个个地看：
1，链入外部样式表
链入外部样式表是把样式表单独保存为一个文件，然后在页面中用<link>标记链接，而这个<link>标记必须放到<head>里面去。
基本语法：<link rel="stylesheet" type="text/css" href="样式表文件的地址">
在该语法中，浏览器从样式表文件中以文档格式读出定义的样式表。rel=“stylesheet”是指在页面中使用的是外部样式表;type=“text/css”是指文件的类型是样式表文本;href参数则用来设定文件的地址，可以为绝对地址或相对地址。
样式表文件保存为.css，其内容就是定义的样式，不包含HTML标记。
2，内部样式表
内部样式表是把样式表的内容直接放到页面里面 的<head>区域里，通过<style>标记插入。
基本语法：
<style type="text/css">
选择符 { 样式属性：取值; 样式属性：取值;……}
选择符 { 样式属性：取值; 样式属性：取值;……}
</style>
3，导入外部样式表
导入外部样式表是指在内部样式表的<style>区域里引用一个外部的样式表文件，导入时需要使用@import声明。
基本语法：
<style type="text/css">
@import url（样式表的地址）
选择符 { 样式属性：取值; 样式属性：取值;……}
选择符 { 样式属性：取值; 样式属性：取值;……}
</style>
4，内嵌样式
内嵌样式是混合在HTML标记里使用的，用这种方法可以很直观地对某个元素直接定义样式。内嵌央视的使用是直接在HTML标记里面加入<style>参数，在<style>参数里面的内容就是CSS的属性和属性值。
基本语法：
<HTML标记 style=“样式属性：取值; 样式属性“取值;……”>
唔……貌似这样看来，HTML语言里面的style参数其实全都是CSS咯……
接下来的东西就简单了，简单提提就可以了：
设置字体——font-family
设置字号——font-size
字体风格——font-style
设置加粗字体——font-weight
小型的大写字母——font-variant
复合属性：字体——font
背景颜色——background-color
背景图像——background-image
背景重复——background-repeat
背景附件——background-attachment
背景位置——background-position
复合属性：背景——background
单词间隔——word-spacing
字符间隔——letter-spacing
文字修饰——text-decoration
纵向排列——vertical-align
文本转换——text-transform
文本排列——text-align
文本缩进——text-indent
文本行高——line-height
处理空白——white-space
文本反排——unicode-bidi与direction（基本不用）
顶端边距——margin-top
其他边距离——margin-bottom，margin-left，margin-right
复合属性：边距——margin
顶端填充——padding-top
其他填充——padding-bottom，padding-right，padding-left
复合属性：填充——padding
边框样式——border-style
边框宽度——border-width
边框颜色——border-color
边框属性——border
定位方式——position
元素位置——top，right，bottom，left
层叠——z-index
浮动属性——float
清除属性——clear
可视区域——clip
设定大小——width，height
超出范围——overflow
可见属性——visibilty
列表属性——list-style-type
图像符号——list-style-image
列表缩进——list-style-position
复合属性：列表——list-style
光标属性——cursor
不透明度——alpha
动感模糊——blur
对颜色进行透明处理——chroma
设置阴影——dropShadow
对象的翻转——flipH，flipV
发光效果——glow
灰度处理——gray
反相——invert
X光片效果——xray
遮光效果——mask
波形滤镜——wave
好的，到这里，《HTML网页设计手册》这本书的关于CSS的内容我都记录完了，虽然远远还没有上手，但对CSS已经基本认识了一遍，知道它是怎么工作以及怎么跟HTML结合工作的。写这篇博客的目的已经达到，接下来我会着手做我的项目二，并且一边学习PHP。学习愉快！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
