CSS基础
Posted adobe软件探讨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基础相关的知识，希望对你有一定的参考价值。
一、准备工作
1. 新建站点：
操作步骤：
【站点】->【新建站点】->输入一个有意义的“站点名称（例如：学号）”、通过【浏览文件夹】按钮完成“本地站点文件夹”。
如果要用到图片，还需要设置图片文件夹：在刚才的对话框中，展开左边的【高级设置】，在【本地信息】中通过【浏览文件夹】按钮完成“默认图像文件夹”（例如“D:学号姓名images”）。
最后再单击【保存】按钮完成站点创建。
2. 新建“html”网页文件：
操作步骤：
【文件】->【新建】->【空白页】、页面类型【HTML】->布局【<无>】->文档类型【HTML5】->【创建】，修改网页标题为“班级-学号-姓名”，保存文件名为“你的学号姓名.html”到你的站点中。注：所有文件名中的“姓名”一律用小写全拼，例如：“5203121599zhujinhua.html”。
二、样式表的定义与使用实验
3. 直接定义标记的style属性：
操作步骤：
在“设计”视图中输入“直接定义段落标记的style属性：字体大小24像素”回车后继续输入“非直接定义段落样式”，切换到“代码”视图可以看到在“设计”视图中看到的两行，在“代码”视图中是由段落标签“<p></p>”包含的两个段落，将当前光标放在第一段的开始标签“<p>”的字母p后面，然后按空格键，出现代码提示（如果不出现的，请保存打开的所有文档，关闭Dreamweaver，再打开就可以了），选择“style”后回车，选择“font-size”后再回车，选择“24px”后回车，得到最终的代码为“<pstyle="font-size:24px">直接定义段落标记的style属性</p>”，再切换到“设计”视图，查看结果有什么变化。
注：如果代码提示内容太多，看不到要选择的对象，可以按该对象的第一个键（比如要找style，可以按s键就看到了，如果还没看到，继续按第二个）。
4. 定义内部样式表：
操作步骤：
单击右边“CSS设计器” 面板下方“源”窗格右边的按钮，选【在页面中定义】，如下图所示。
“CSS设计器”面板如下所示。
“代码”视图如下所示。
在“设计”视图，光标处于窗格内任何位置都可以，单击下面状态栏上的“<body>”就会选择整个页面内容，单击选择“源”窗格中的“<style>”，单击“选择器”窗格右边的按钮，此时“选择器”窗格中自动出现“body”标签（方法2：如果不先在状态栏选中<body>，则此时不会自动出现，必须自己输入），然后在“属性”窗格中单击“文本”按钮，设置“font-family”为“Times New Roman, 宋体”。注意：由于单击“font-family”右边的设置按钮弹出的列表中没有我们所需的字体，所以应该选“管理字体…”，选择“自定义字体堆栈”，出现如下所示对话框。
依顺序把右边的“可用字体”中的“Times New Roman”和“宋体”加入左边再单击“完成”，此时再单击“font-family”右边的设置按钮弹出的列表中就有我们所需的字体列表了。
设置“Font-size”选“12px”。注意：单击“Font-size”右边的设置按钮选“px”，然后在“px”前输入“12”。
此时，我们单击“设计”视图中任意位置，就可以看到第二段文字已经变小了一些（如下图所示）。
切换到“代码”图可以看到在“<head></head>”内多出了以下几行：
6.链接外部样式表：
操作步骤：
单击右边“CSS设计器” 面板下方“源”窗格右边的按钮，选【创建新的CSS文件】，在“文件/URL”右边输入“style.css”，再选择“链接”，如下图所示，最后单击“确定”。
在“代码”视图中多了一行：
切换回“设计”视图，单击下面状态栏上的“<body>”选择整个页面内容，选择“源”窗格中的“style.css”，单击“选择器”窗格右边的按钮，此时“选择器”窗格中自动出现“body p”复合标签，修改为“body”，在“属性”窗格中，设置“文本”中“Color”为深灰色“#333”。此时，我们在“设计”视图中可以看到所有文字没有原来那么黑了，切换到“style.css”文件窗口可以看到增加的代码为：“body {color: #333;}”。
样式的修改方法比较简单，先选择“源”窗格中的源，然后选择“选择器”窗格中的标签名称，最后在“属性”窗格中修改具体样式。
单击“文件”->“保存全部”。
三、选择器实验
CSS样式代码在不声明的情况下，默认定义到style.css这个外部文件中。
7. 通配选择器：
操作步骤：
选择“style.css”源，“添加选择器”名称为“*”，在“属性”窗格中，设置“布局”中的“Margin”和“Padding”都为“0”。完成后可以看到网页中的内容靠边了。CSS代码中自动增加了：“* {margin:0px;padding:0px;}”。
8. 类型选择器：
操作步骤：
切换回“设计”视图，光标置于任意一个段落中，单击下面状态栏上的“<p>”自动选择了刚才光标所在的段落，选择“style.css”源，“添加选择器”名称自动出现“body p”复合标签，修改为“p”，在“属性”窗格中，设置“文本”中的“Font-size”为“20 px”。完成后可以看到网页中的第2段文字“非直接定义段落样式”变大了。CSS代码中自动增加了：“p {font-size: 20px;}”。
9. 类选择器：
操作步骤：
对于直接针对标签定义的选择器，定义完成后就自动应用到相应的标签元素上了。但对类选择器和ID选择器来说，需要完成两个步骤：定义和应用。
定义过程跟前面的类型选择器的定义过程一样。
在“设计”视图中，将光标置于页面最后一行的末尾按回车键“<enter>”形成一个新的段落（如果不是段落，请把下面“属性检查器”中“格式”改为“段落”就可以了，后面如果遇到类似问题请自行处理，不再提示了），然后输入“类选择器应用”。
选择“style.css”源，“添加选择器”名称“.pred”，在“属性”窗格中，设置“文本”中的“Color”为红色“#F00”。
应用过程更简单了，只需在“设计”视图中把光标置于要应用的对象“类选择器应用”中任意位置，然后在“属性检查器”中的“类”中选择已经定义好的样式名称“pred”就可以看到该段变成红色了。
完成后，“代码”视图中可以看到HTML代码多了一行“<p>类选择器应用</p>”。CSS代码中自动增加了“.pred {color: #F00;}”。
10. ID选择器：
操作步骤：
ID选择器的做法与类选择器的做法完全一样，唯一的区别是定义的ID样式只能应用一次。但即使你应用了多次，浏览器中显示的效果还是正常的，只不过不符合Web标准的做法。
类似类选择器的操作：在“设计”视图页面最后按回车键换一段，输入“ID选择器应用”，此时我们发现这几个字跟前面一段一样都是红色的，所以我们还要在下面“属性检查器”中把“类”应用的“pred”改为“无”后，该段落就没有应用任何样式了。
选择“style.css”源，“添加选择器”名称“#pgreen”，在“属性”窗格中，设置“文本”中的“Color”为绿色“#0F0”。
然后，在“设计”视图中把光标置于要应用的对象“ID选择器应用”中任意位置，然后在“属性检查器”中的“ID”中选择已经定义好的样式名称“pgreen”就可以看到该段变成绿色了。
完成后，“代码”视图中可以看到HTML代码多了一行“<pid="pgreen">ID选择器应用</p>”。CSS代码中自动增加了“#pgreen {color: #0F0;}”。
如果前面忘记将该应用的类“.pred”取消，但只要应用了ID后也会变成绿色，也就是由于该段落即使适时应用了类和ID样式，结果也是ID的样式优先于类的样式。
11. 包含选择：
操作步骤：
切换到“代码”视图，将第2段“<p>非直接定义段落样式</p>”修改为“<p>非<span>直接<em>定义</em>段落</span><em>样式</em></p>”，浏览器中的效果为“”（其中span表示一个行内的区域；em表示强调，在浏览器中倾斜显示）。
选择“style.css”源，“添加选择器”名称“p em”，在“属性”窗格中，设置“背景”类中的“Background-color”为黄色“#FF0”。完成后可以看到网页中的第2段文字在浏览器中的效果为“”。CSS代码中自动增加了“p em{background-color: #FF0;}”。
从效果可以看出，不管em是p的子代还是孙代，只要是p的后代，具有包含关系都有作用。
12. 子对象选择器：
操作步骤：
选择“style.css”源，“添加选择器”名称“p>em”，在“属性”窗格中，设置“文本”类中的“Text-decoration”为“underline”。完成后可以看到网页中的第2段文字在浏览器中的效果为“”。CSS代码中自动增加了“p>em{text-decoration: underline;}”。从效果可以看出，p和em之间必须是父子关系的em才会起作用。
13. 相邻兄弟选择器：
操作步骤：
在“设计”视图中，将光标置于第2段“”的末尾按3次回车形成3个新的段落，分别输入文字为“这是二级标题”、“该三级标题将显示为红色”、“该三级标题的颜色不受影响”，将光标置于三段中的第1段然后选择下面“属性检查器”中的“格式”改为“标题2”，同样方法将后面两段的“格式”改为“标题3”，请查看浏览器中预览的效果，前一个按二级标题、后两个按三级标题的默认样式显示了。代码视图中看到的代码为“<h2>这是二级标题</h2><h3>该三级标题将显示为斜体</h3><h3>该三级标题的颜色不受影响</h3>”。
选择“style.css”源，“添加选择器”名称“h2+h3”，在“属性”窗格中，设置“文本”类中的“Font-style”为“italic”。完成后可以看到网页中的紧跟二级标题后的三级标题行变成斜体了，而后面那个三级标题行就有变化（见下图所示）。CSS代码中自动增加了“h2+h3 {font-style:italic;}”。
14. 属性选择器：
操作步骤：
在“代码”视图的</body>前输入以下代码“<p><spantitle="www.baidu.com">百度</span><spantitle="hi.baidu.com/uured">看好网</span><spantitle="www.yxc.cn">越秀</span></p>”，浏览器中的效果为“”。
选择“style.css”源，“添加选择器”名称“span[title]”，在“属性”窗格中，设置“文本”类中的“Text-decoration”为“line-through”。完成后可以看到三个词语都加上了删除线。CSS代码中自动增加了“span[title]{text-decoration: line-through;}”。
选择“style.css”源，“添加选择器”名称“span[title^=www]”，在“属性”窗格中，设置“文本”类中的“Font-size”为“24px”。完成后可以看到“百度”和“越秀”变大了，而中间的“看好网”没变。CSS代码中自动增加了“span[title^=www]{font-size: 24px;}”。
选择“style.css”源，“添加选择器”名称“span[title$=red]”，在“属性”窗格中，设置“文本”类中的“Font-size”为“24px”。新建CSS规则，选择器名称为“span[title$=red]”，“类型”分类中的“Font-style”为“italic”。完成后可以看到“看好网”变斜了。CSS代码中自动增加了“span[title$=red]{font-style: italic;}”。
选择“style.css”源，“添加选择器”名称“span[title*=baidu]”，在“属性”窗格中，设置“文本”类中的“Color”为红色“#F00”。完成后可以看到“百度”和“看好网”变红了。CSS代码中自动增加了“span[title*=baidu]{color: #F00;}”。
15. 群组选择器：
操作步骤：
群组选择器用得比较多，只要有任何两个以上的选择器用到的样式相同，都可以合并为分组形式。将“style.css”中的“body {color: #333;}”修改为“html, body {color:#333;}”。本例应该不会在浏览器在看到有什么变化。
16. 伪类及伪对象选择器：
操作步骤：
在“设计”视图最后按回车增加一段，然后输入“看好网百度越秀”，选中“看好网”三个字，然后在“属性检查器”的“链接”中输入“http://hi.baidu.com/uured”然后按回车就发现“百度”两字变成了蓝色并有下划线，同样的方法给“百度”和“越秀”加上链接“http://www.baidu.com”和“http://www.yxc.cn”。此是在IE浏览器中看的效果为“”，单击“百度”，就可以看到打开了百度的网页（注意暂时不要再点另外两个链接哟，否则后面有些效果就不一样了），关闭IE浏览器，重新用IE浏览器查看效果则变成了“”，看到区别了吧，已访问过的链接“百度”的颜色已经变了。下面我们开始对链接伪类进行设置。
选择“style.css”源，“添加选择器”名称“a:link”，在“属性”窗格中，设置“文本”类中的“Color”为黑色“black”。完成后可以看到除已经访问过的链接外其它链接颜色变黑了“”。CSS代码中自动增加了“a:link {color:black;}”。
选择“style.css”源，“添加选择器”名称“a:visited”，在“属性”窗格中，设置“文本”类中的“Color”为“#F00”。完成后可以看到已经访问过的链接颜色变成了红色“”。CSS代码中自动增加了“a:visited {color:#F00;}”。
选择“style.css”源，“添加选择器”名称“a:hover”，在“属性”窗格中，设置“文本”类中的“Font-size”为“32”px。完成后浏览器中预览时，当鼠标移动链接上时该链接就变大了“”。CSS代码中自动增加了“a:hover {font-size:32px;}”。
选择“style.css”源，“添加选择器”名称“p a:first-child”，在“属性”窗格中，设置“文本”类中的“Color”输入“green”。完成后浏览器中预览时，第一个链接颜色已经变成绿色了“”。CSS代码中自动增加了“p a:first-child {color: green; }”。
以上是关于CSS基础的主要内容，如果未能解决你的问题，请参考以下文章