韩顺平轻松搞定网页设计(html.css.js)(完整版)(8)

韩顺平J2EE视频教程第二版

《轻松搞定网页设计html+css+javascript》全42讲笔记

选择器练习题：

[css11.html]选择器练习题

[mycss11.css]选择器 .s1{

font-size: 50px; color: blue; } .s2{

font-style: italic; color:red; } .s3{ }

注：笔记中所有示例，均通过测试!

36 / 199

韩顺平J2EE视频教程第二版

《轻松搞定网页设计html+css+javascript》全42讲笔记

.s4{

font-style: italic;

text-decoration: underline; }

.s3,.s2,.s4{

font-weight: bold;

background-color: gray; }

------------------------------------------------------------------------------- 练习2：

网页所有的超链接，要求这样的格式：

1、默认样式是红色，24px，华文新魏字体没有下划线。

2、当鼠标移动到超链接时，自动出现下划线，字体大小变成40px，字体变成宋体 3、点击后，超链接变成灰色。

[css12.html]练习2源码(注意：在IE9中调试正常，其它版本IE中测试显示有偏差)

[mycss12.css]html选择器 /*使用html选择器*/

37 / 199

注：笔记中所有示例，均通过测试!

韩顺平J2EE视频教程第二版

《轻松搞定网页设计html+css+javascript》全42讲笔记

a:LINK {

color: red;

font-size: 24px;

font-family: 华文新魏; text-decoration: none; }

a:HOVER {

color: green; font-size: 40px; font-family: 宋体;

text-decoration: underline; }

a:VISITED {

color: gray; }

*******************************************************************************

块元素和行内元素

块元素和行内元素--概念

行内元素(inline element)，又叫内联元素：

内联元素只能容纳文本或其他内联元素(不同浏览器的支持是不一样的)，常见内联元素

特点：只占内容的宽度，默认不会换行。

块元素(block element)：

块元素一般都从新行开，可以容纳文本，其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满。常见块元素

特点：不管内容有多少，它要换行，同时占满整行。

[div1]演示行内元素与块元素的区别

38 / 199

注：笔记中所有示例，均通过测试!

韩顺平J2EE视频教程第二版

《轻松搞定网页设计html+css+javascript》全42讲笔记

[div01css.css]选择器 .s1{

background-color: pink; } .s2{

background-color: gray; } .s3{

background-color: pink; }

------------------------------------------------------------------------------- 块元素和行内元素

块元素和行内元素--区别

1、行内元素只占内容的宽度，块元素内容不管内容多少要占全行。

2、行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素(与浏 览器类版本和类型有关) 3、一些css属性对行内元素不生效，比如margin,left,right,width,height建议尽可能使用块元素定位。(与浏览器类版本和类型有关)

块元素和行内元素--相互转换

39 / 199

注：笔记中所有示例，均通过测试!

韩顺平J2EE视频教程第二版

《轻松搞定网页设计html+css+javascript》全42讲笔记

请注意：行内元素和块元素可以相互转换 display:inline-->转为行内元素(比如div) display:block-->转为块元素(比如a)

[div02.html]行、块互换示例

/*行转块style=\

[div02css.css]选择器 .s1{

background-color: pink;

/*display:block;写入到css中，就会让引用选择器的所有引用行全转成块*/ } .s2{

background-color: gray;

/*display:liline;写入到css中，就会让引用选择器的所有块全转成行*/

40 / 199

注：笔记中所有示例，均通过测试!