网页设计添加伪类

1、hover在网页设计中代码的意思是什么？

hover是用在网页中产生动态效果的，比如说你把鼠标移到有hover事件的区块上那么那个那个区块就会根据你自己改变的颜色而变色；说简单点就是把鼠标一上去就马上变为另一种颜色。

2、网页设计中的CSS是什么意思？？？

CSS是Cascading Style Sheets(层叠样式表)的缩写。
是一种对web文档添加样式的简单机制，属于表现层的布局语言。

1.基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
•其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
•样式声明写在一对大括号"{}"中；
•COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
•"#FF0000"和"#FFFFFF"是属性的值(value)。

2.颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。

3.定义字体
web标准推荐如下字体定义方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
•Lucida Grande字体适合Mac OS X；
•Verdana字体适合所有的Windows系统；
•Lucida适合UNIX用户
•"宋体"适合中文简体用户;
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;

4.群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
p, td, li { font-size : 12px ; }

5.派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italic; font-weight : normal；}
就是给li下面的子元素strong定义一个斜体不加粗的样式。

6.id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
<div id="menubar"></div>
然后在样式表里这样定义：
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
id选择器也同样支持派生，例如：
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。

6.类别选择器
在CSS里用一个点开头表示类别选择器定义，例如：
.14px {color : #f60 ;font-size:14px ;}
在页面中，用class="类别名"的方法调用：
<span class="14px">14px大小的字体</span>
这个方法比较简单灵活，可以随时根据页面需要新建和删除。

7.定义链接的样式
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

3、网页设计中关于新建CSS的选择器类型问题

仅对该文档--指的是css代码直接出现在网页的内部。

新建样式表文件--指的是在网页外部建立一个css文件，网页引用这个文件。

你用的应该是dreamweaver 8.0以下版，类、标签和高级其实在面板上都有一个简短的说明。

高级-----举一个例子，你可以制作导航栏文字，鼠标移动到文字，文字变色或变换背景。
标签-----也就是让你自己定制html元素，比如h1的字体，你可以随意设置大小、颜色等等。
类----你可以把网页里相同的元素定义为一个类，应用这个样式这些元素就会统一了。

4、css中的伪类和类的区别是什么？？

这是两个完全不同的概念，只是名字类似。

类是class的意思，你给一个元素添加了class，就是给这个元素添加了一个类。之所以这样称呼，是因为class可以重复利用。比如你给一个ul下的奇数的li加了一个odd的class名称，给偶数的li加了一个even的class，然后一个给红色背景，一个给蓝色背景，这样，明显就把li分成了两类。甚至一个网页、一个网站都可以出现一个class通用的情况。

伪类是：也可以用来区分元素，但是都是按顺序来的。写法是前面有个冒号。比如css3的first-child、last-child等，这个都是新版本的css才有的，低版本的IE是不能用的，如IE8。

总结一下：类其实就是给某个或者某些元素起一个名字，进而控制这个或者这个元素；伪类是按顺序来选择某些元素的，这个结果是动态的，比如第一个，最后一个，奇数行什么的。另外，因为伪类是添加在元素后面的，而类就是选择元素用的，所以类后面可以跟伪类进行使用的，这就更高级了。

另外，伪类还有一些特殊的，比如a标签的四个伪类，还有::after和::before（这两个的用法简直神奇，这俩货简直就是神器）。这些参考http://www.w3school.com.cn/这个网站吧。

5、CSS 选择器有哪些,在网页设计中如何选择使用

<div id="demo">
<div class="inner">
<p><a href="#">链接</a></p>
<p><input type="checkbox" name="" id="" /></p>
</div>
</div>
class 选择器 .inner{ width:100px;}
id 选择器 #demo{ width:100px;}
标签 选择器 p{ width:100px;}
后代选择器 p a{ color: #f60;}
伪类选择器 a:hover{ color: #f00;}
伪元素选择器 a:after{ clear: both;}
属性选择器 input[type=checkbox]{ margin-left: 10px;}
css3选择器
由于ie的问题，比较常用的是前4种选择器。

6、html css 网页设计 a:link ,a:visited,a:hover, 怎么 添加行内样式

a:link，a:visited，a:hover，貌似不可以用行内样式表示哦。

可以用内部样式：

<style>
    a:link {color:blue}
    a:visited{color:red} 
    a:hover {color:yellow}
</style>

也可以用css文件中的外部样式：

<link rel="stylesheet" type="text/css" href="test.css"></link>
test.css文件里：
    a:link {color:blue}
    a:visited{color:red} 
    a:hover {color:yellow}

但是貌似不可以用行内样式的。

如果一定要用，可以这样的方式来：

<a href="javascript:void(0);" onmouseover="this.style.color='yellow';" onmouseout="this.style.color='blue';" onclick="this.style.color='red';">链接</a>

其中，onmouseout对应的a:link，onclick对应的a:visited，onmouseover对应的a:hover

7、dreamweaver在设计视图里面制作网页界面很简单,但是为什么大多数人都选择写代码这么繁琐？

这也不是绝对的，纯代码开发的好处是，对于熟悉代码的人而言，不需要用鼠标到处点参数，而且dreamweaver里面的代码自动完成功能也很不错，只要输入一两个字母就能找到需要设置的参数了，当然它的缺点是不够直观，有的时候写完代码一测试，不是想要的效果，而且对于不熟悉代码的人而言，开发也是比较吃力的；纯视图开发的好处是，可以很直观地看到效果，但是缺点是，它隐藏了很多高级的样式，只能做一些基础的开发，例如要定义元素的伪类，在视图模式里面就很难做到了。比较好的开发习惯是用分屏的方式来制作，一边显示代码，一边显示视图，既方便代码书写，又可以看到效果

8、网页设计中的动态脸接中a:link a:visited a:hover a:active四种状态的含义是什么?

a:link 是指超链接正常的时候的状态
a:visited 是超链接被点击以后的状态
a:hover 是超链接鼠标经过状态
a:active 是超链接激活状态

呵呵~~希望帮到您

9、css用伪类如何制作左右箭头三角形

我在另一个问题里面涉及到了这个，你可以参考一下。网页链接

伪类你也可以理解为一个容器，不过为了展示顺利需要添加 content: ''; 和display：block；为了能够准确定位，需要结合其容器设置定位，这都是基础不需要多介绍。

使用伪类做左右的箭头主要是需要了解 边框的构成 

{
 border: 20px solid #333;
   border-top-color: #369;
   border-bottom-color: red;
   border-left-color: green;
   border-radius: 0;
}

如图，我用四个颜色分别给四条边上色，可以看出来每一个边在宽度大于1的时候表现出的样子就倾向于一个梯形。

而我们可以理解为三角形其实就是梯形的一条底边长度为零。

那么为了得到一个三角形那么我们只需要容器的宽高都为零就可以了,如图：

 {
   border: 20px solid #333;
   border-top-color: #369;
   border-bottom-color: red;
   border-left-color: green;
   border-radius: 0;
   font-size: 0;
   width: 0;
   height: 0;
   padding: 0;
}

下一步我们只留下一个三角形。

只要让不需要展示的边颜色为透明就可以了

{
   border: 20px solid transparent;
   /* border-top-color: #369; */
   /* border-bottom-color: red; */
   border-left-color: green;
   border-radius: 0;
   font-size: 0;
   width: 0;
   height: 0;
   padding: 0;
}

这样你拿到的是上下左右四个方向的三角形，同样的 你如果需要的是斜向右上角的或者其他角度的，只要自己凑出这个方向就可以，类似于七巧板。

如果希望三角形呈现的不是直角三角形可以修改各个边的宽度。。

{
   border: 20px solid transparent;
   border-top-color: #369;
   /* border-bottom-color: red; */
   border-left-color: green;
   border-radius: 0;
   font-size: 0;
   width: 0;
   height: 0;
   padding: 0;
}

10、网页设计题求解答。。

1、请简述网页内容与表现形式分离的具体含义。

答：把它们分别放到分开的文件中，XHTML文件可以链接并共享外部的CSS和JavaScript文档的，同时也便于管理和后期维护。
2．CSS3中，定义选择器有5种类别，请全部列举出来。

答：
标签选择器div{} ，这个不用解释了吧，都会。
属性选择器 例如E[foo*="bar"] 表示：选择匹配E的元素，且该元素定义了foo属性，foo属性值包含“bar”。E选择符可以省略，表示可匹配任意类型的元素。
结构伪类选择器 例如E:last-child 表示：选择位于其父元素中最后一个位置，且匹配E的子元素。
UI状态伪类选择器 例如E:enabled 表示：选择匹配E的所有可用UI元素。
CSS3其他选择器 例如E:not(s) 表示：否定伪类选择器类型。选择匹配E的所有元素，且过滤掉匹配s选择符的任意元素。s是一个简单结构的选择器，不能使用符合选择器，

3．DIV具有三个重要属性即border、margin、padding。请分别说明这三个属性的含义及定义方法

border 表示元素的边框，border:1px solid #ccc;
margin表示元素的外边距 ，margin:10px;
padding表示元素的内边距 , padding:20px;
以上三个的顺序是 上，右，下，左。如果使用不同的值，也可以分开写。