CSS定义问题.docVIP

CSS样式表 CSS样式表，可以用于控制网页中字体、颜色、图像、表格、链接和布局格式。是Web页面设计的重要技术，它使得网页内容与样式定义彻底分开，甚至可以将CSS保存为.css的文件，使用时再进行调用导入。这样就可以通过定义和修改CSS达到页面设计的效果。 1．常用CSS定义有三种方式 1）内联样式：在标签内通过style属性添加样式信息。如p style=”color:red;”红色字/p。 2）嵌入样式：在页面代码的head/head标签内放在单独的style元素中。如 style type=”text/css” p{ color:red; } /style 3）外部样式：将内联样式的内容存放在一个.css文件中进行调用。 2．CSS编辑器 可以使用记事本或Dreamweaver进行定义。CSS定义规则，包括: 1）针对标记选择符定义。如 style type=”text/css” h1{ color:red;} /style 2）针对Html标签中一个id选择符定义。如id=” title” style type=”text/css” #title {color:white; background-color:silver;} /style 3）针对Html标签中class选择符定义。如class=” title”，页面可以有多个该类。 style type=”text/css” .title {color:white; background-color:silver;} /style 另外，还有伪元素和伪类，标记语言中没有一种机制可以访问某个元素的首个字符或首行内容，而CSS可以创建这种虚拟元素访问或控制其样式。如： ：first-line为伪元素，某元素首行的样式；：first-letter为伪元素，某元素的首个字符。 Div+CSS规则 注意上、右、下、左的书写顺序： 1）关于边距（4边） 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px????（省略的左等于右） 1px 2px???????? (省略的上等于下) 1px????????????（四边都相同） 2）简化所有 body{margin：0}------------表示网页内所有元素的margin为0 #menu{ margin：0}------------表示menu盒子下的所有元素的margin为0 3）缩写（border）特定样式 Border：1px solid #ffffff; Border-width：0 1px 2px 3px; 4）关于文字的缩写规则 Font-style：italic;?斜体形式 Font-variant：small-caps/normal;?变体样式：小型大写字母/正常 Font-weight：bold; Font-size：12px; Line-height：1.2em(120%)/1.5em(150%); 缩写成： Font：italic small-caps bold 12px/1.5em arrial，sans-serif; 注意：Font-size和Line-height用斜杠组合在一起不能分开写。 5）关于背景图片 Background：#FFF url(log.gif) no-repeat fixed top left; 6）关于列表 List-style-type：square/none; List-style-position：inside; List-style-image：url(filename.gif); 缩写成： List-style：none inside url(filename.gif);? 2. 运用4种方法来引入CSS样式 1)link link rel=”stylesheet” type=”text/css” href=”a.css” 其中rel?关系、type?数据类型（有多种）、href?路径。 部分浏览器支持候选样式，关键字：alternate： link rel=”stylesheet” type=”text/css” href=”a.css” link rel=”alternate stylesheet” type=”text/css” href=”b.css” link rel=”alternate stylesheet” type=”text/css” href=”c.css” 2)内部样式块 style !– h1{color:red;} – /style 3)@import @import url{a.css} 注意：此指令必须放在style容器p style=”color:red;” 选择器是css的一个基本概念