《网页样式设计--css》由会员分享，可在线阅读，更多相关《网页样式设计--css（73页珍藏版）》请在金锄头文库上搜索。
1、网页样式设计-CS1 1，在行内定义，在行内定义 CSSCSS上述定义也可以在行内实现，如下：这里写入文字 2.2. 用用 CLASSCLASS 和和 IDID 作为选择符作为选择符在 body 中如下方法调用：This is bold,periwinkle text.This text is hard to read3 3，选择符编组，选择符编组在 body 中如下方法调用：现在，所有的标识(,标识和)都将用同一个格式(蓝色、Arial 字体)。当然，它们将保留在原始 HTML 中未被 CSS 重新定义的样式选项，例如，保留它的字体大小，保留它的粗体。并且其他没有被这些标记包围的文本都将保留
2、原有样式。如果想要给其中一个选择符附加格式，仅仅重新定义即可:h1 font-style:italic4 4，用，用 CSSCSS 文件进行外部调用文件进行外部调用怎么样调用*.css 文件，相信大家都十分关心，其实这个也非常简单，只需要把中的全部内容另存为*.css，然后用如下方式在区域中调用:其它的 HTML 代码不变，这就像调用 javascript 的*.js 文件一样，对页面效果不会有丝毫影响，但是可以使页面代码变短，更容易读懂，页面也更简洁。5. 在页面中实现精确定位置怎么样在页面中实现精确定位呢？这可能是 CSS 一个很大的作用。如下代码可实现这个功能：写入相应内容上面的代码解释
3、为：position:absolute 表示位置是 absolute(绝对)，还有一个是 relative（相对）top:30px 表示内容显示在离顶部 30px 的地方，left:400px 表示内容显示在离左边 400px 的地方，width:150px;height:100px; 表示内容能显示的区域大小，background-color:green 表示整个区域是绿色的这些字是在离顶部 30px,离左边 400px 的地方,大小为 150*100，背景色为绿色6 6. 3D3D 层技术层技术在下面的例子中，两行文本基本上被安排在页面的同一个位置上(第二个文本被褥安排在比第一个低 10
4、象素的地方)。一般来说，第二个元素将覆盖一点第一个元素，但是设计者可以使用 z-index 属性来改变这种情况这些文字在离顶部 165px，离左边 20px 的地方这些文字虽然在上面文字的下面一点，但是它显示起来却会在上面文字的表面7 7，加入特殊效果，加入特殊效果 (效果演示)CSS 定位的剪切(clip)、溢出(voerflow)和可见性(visibility)的属性使 WEB 设计者很容易地为页面加入特殊效果。在下面的例子中，建立了一个元素调用隐藏类。在浏览器里是看不到这个文本的，但是可以注意到下面的一行字为它在屏幕上留了一个空间。下一个元素调用了溢出类。“容器“比文本要小，所以这里多余
5、文本被切除了。最后的两个元素演示了裁剪属性。最后的对象直接被褥放置在它前一个之上，但是被裁剪成一个小一点的尺寸；因此，前一个元素显示出来了This text is invisible on the pagebut this text is affected by the invisible items flowThis is way too much text for the little box that we have designated.The overflow property will hide it.This text is covered by the blue square
6、that follows.But since the square is clipped,some of this text shows through.This text is yellow on a blue square,but it is getting cut off by clipping8.8. 继承继承body color:black;background:url(luxiaoqing.gif) white;这里，“luxiaoqing.gif“成为背景图案。当该图案因为某些原因不可用时，背景色就用白色代替This is line 1This is line 2这里的第二行高取
7、第一行的 120%,即 12pt. (效果演示)9.9. “CLASS“CLASS“的选择符的选择符h1.pastoral color:#00ff00这里指在 h1 中的 pastoral 属性才起作用在页面中这样调用才起作用kajfidasj同样的，ID 属性也有同样的效果10.10. 伪类和伪元素伪类和伪元素伪类也可以被用在关联选择符里:A:link IMG border:solid blue也可以与通用类组合在一起:A.external:visited color:green邦联信息如果上面的例子中的链接被访问了，它将变成绿色。 (效果演示)12.12. 字母大小写、粗细、字体大小字母大
8、小写、粗细、字体大小This is slantedheadline1This is slantedheadline2在上面的例子中所有元素都以小体大写表示，同时，还让中的字符用斜体的小体大写显示This is headlineParagraph text goes herefont-weight 指字体的粗细程度，从 100 到 900 都是可以设置的，normal 指的是 400先看看下面的设置largex-largexx-large字符大小可以用 xx-small x-small small large x-large xx-large 从小到大表示 (效果演示)13.13. 颜色和背景属
9、性颜色和背景属性body background-color:yellowh1 background-color:red上面的语句指整个页面的背景色为黄色，h1 中的背景色为红色 body background-image:url(back.jpg)P background-image:none上面的语句指页面的背景图片是 back.jpg，P 中没有背景图片，当然你也可以加入背景图片body background:red url(back.jpg);background-repeat:repeat-y (效果演示)上面的语句指页面为红色(如果没有背景图片时)，而且背景图片垂直排列。注意:rep
10、eat-x 指水平排列，repeat-y 指垂直排列,no-repeat 指不重复 body background:red url(back.jpg);background-repeat:repeat-y;background-attachment:scroll注意:background-attachment:fixed 表示背景图片永远静止，文字在背景上面“流动“background-attachment:scroll 表示背景图片随着页面上的文字一起“流动“body background:url(back.jpg) right top /*right top=100% 0% */body
11、background:url(back.jpg) top center /*top center=50% 0% */body background:url(back.jpg) center /*center=50% 50% 指背景图片居中*/body background:url(back.jpg) bottom /* bottom=50% 100% */1414，文本属性，文本属性This is wide headlingThis is text negtive letter-spacing(效果演示)letter-spacing 属性定义了每一个字符之间的额外间距，而且正负值都是允许的，有
12、时能产生特殊的效果，如 a e，加上 h1 letter-spacing:-0.5em时，就会重叠在一起，有特殊效果 a:link text-decoration:nonea:visited text-decoration:line-througha:active text-decoration:underline如果在中写上上面的三句话，那么文档中所有未访问过的链接的下划线都被去掉，所有当前被激活的链接都出现了下划线(还有 overline)，而所有被访问过的链接都加上了删除线 15.15. 图片位置放置图片位置放置当文字和图片在同一行内出现时，可用如下方式调整文字的方位文字在图片下方 im
13、g vertical-align:baseline文字在图片中间 img vertical-align:middle (效果演示)文字在图片上方 img vertical-align:text-top16.16. 字符大小写以及缩进、突出字符大小写以及缩进、突出还有一个 text-transform 属性h1 text-transform:capitalize /*h1 中的每个单词的第一个字母大写*/h2 text-transform:uppercase /*h2 中的所有字母都大写*/h3 text-transform:lowercase /*h3 中的所有字母都小写*/想让每行的字符自动
14、空两隔吗？p text-indent:2em /*表示 P 中的字首字母都空两个 em,而且这个数值是可以正负都使用的*/(效果演示) 17.17. 整个页面设置整个页面设置body margin-top:0;margin-left:30指整个页面上方不空，左边空 30，一般默认值为上、左都空 5，这是许多网友开始做网页时所不明白的地方，有时明明写在最左边却离左边还有一定距离的原因。另外还有 margin-right,margin-buttom，但是这个一般用的人很少了还有一个 padding 参数p padding-top:15px 表示 p 中上方空 15px，padding-left,p
15、adding-right,padding-buttom 同理另外也可这么用 p padding:1em 2em 3em 4em，表示离上，右，下，左各 1,2,3,4em18.18. 图片边框的颜色图片边框的颜色img border-color:red 指四个边框色都是红色img border-color:red blue 指上，下边框是红色，左右边框是蓝色img border-color:red blue yellow 指上边框是红色，左右边框是蓝色，下边框是黄色img border-color:red blue yellow green 指上，右，下，左边框分别是红色，蓝色，黄色和绿色 (
16、效果演示)border-style 属性h1 border-style:solid 指边框为实线，none 指没有边框，边框不显示，dotted 指边框的样式为由短线组成的虚线，double 指边框线为双线，双线再加上它们之间的空白部分的宽度就等于 border-width 设置的宽度，groove 指 3D 沟槽状的边框，inset 指 3D 内嵌边框，outset 指 3D 外嵌边框h1 border-style:solid 指四个边框都是实线h1 border-style:solid dotted 指下，左边框值缺少，则取对边上，右值h1 border-style:solid dotted double 指左边框缺少，则取右侧的边框值h1 border-style:solid dotted double ridge 指四个边框都有值，按上，右，下，左分再看这句
