今天开始学习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。学习愉快!