CSS基础学习
|
一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）。 举例：伪类的常见状态值 <style type = “text/css”> <!-- a:link {color: blue; text-decoration:none;} //未访问：蓝色、无下划线 a:active:{color: red; } //激活：红色 a:visited {color:purple;text-decoration:none;} //已访问：purple、无下划线 a:hover {color: red; text-decoration:underline;} //鼠标移近：红色、下划线 --> </style> 5．4．2 伪元素 两个伪元素：:first-letter和:first-letter。它们常常和像<p>这样的元素引导的一段文字一起使用，用来影响其中首字母或者首行的显示，如p:first-letter和p:first-line。 <style type = “text/css”> <!-- p:first-line {background-color:yellow;} p:first-letter{color:red;font-size:150%;} --> </style> 5．5 情景选择（contextual selection） 情景选择允许对位于某嵌套层次内的某元素进行样式控制，该规则通过按照嵌套的顺序列出元素的名称，然后给出样式规则来创建。 举例：使所有出现在<p>元素内的<strong>元素都有黄色的背景颜色。 p strong {background-color : yellow;} 六．样式规则的继承与嵌套 该性质允许对元素的多种规则进行组合，既可以从父元素那里继承一些属性，也可以重写某些属性。层叠（CSS中的C）的一般思想有效地创建了一个系统以确定在有多个样式表的文档中哪些规则将被应用。例如，使用id属性为一个特定的<p>元素指定规则，这相对于通过class规则指定的规则具有优先权，而class规则相对于为<p>元素自身指定的规则有优先权。相对于应用于整个文档的样式或链接进来的外部样式，通过一个style属性指定的行内样式是更重要的。考虑究竟哪一个规则将最终生效的简单方法是：越专门的规则优先级越高，和标记位置越近的规则优先级越高。 如果需要一个特定的规则永远不被后面的另一条规则重写，可以用!important声明。对希望绝不被忽略的规则，可以在这个规则的分号之前插入声明!important，它一定要放在规则的最后，分号之前的位置，否则将被忽略。另外，许多老版本的浏览器并不支持该声明。 举例：使用!important声明不被重写的规则。 P {color:red !important;font-size:12pt;} <p style=“color:green;font-size:24pt;”}...</p> <p>元素最终将以红色、24点大小显示。 七．CSS1属性 3．1 font属性 字模、字体样式、字体大小、字体效果等。常用属性有： ① font-family：字模，Cursive、Fantasy、Comic Sans MS等。 ② font-size：字体物理大小或相对大小，物理大小包括：xx-small、x-small、small、medium、large、x-large、xx-large分别对应1～7号字体。 ③ font-style：是否斜体， normal、italic、oblique（＝italic）。 ④ font-weight：文字粗细，normal、bold、bolder、lighter。 ⑤ font-variant：小型大写字母，normal、small-caps（小型大写字母）。 <!--[if !supportEmptyParas]--> <!--[endif]--> <!--[endif]-->3．2 text属性 ① text-transform：单词大小写，none、capitalize、uppercase、lowercase。 ② text-decoration：特殊效果，none、line-through、overline、underline。 ③ word-spacing：单词间距，normal、英寸（in）、厘米（cm）、point（pt）、pica（pc）、em（em）、像素（px）。 ④ letter-spacing：字母间距。 ⑤ vertical-align：文本或图像的垂直定位，baseline（默认）、sub、super、top、text-top、middle、bottom、text-bottom。 ⑥ text-align：文本水平对齐方式，left、right、center、justify。 ⑦ text-indent：为段落元素第一行产生缩进。 ⑧ line-height：当前行的高度，这样设置的行上下会空出相同的距离。 ⑨ white-space：控制元素内空格的处理方式，normal（默认）、pre（不压缩空格）、nowrap（即使文本行超出了元素内容的宽度也不会换行） <!--[if !supportEmptyParas]--> <!--[endif]--> 3．3 color属性和background属性 ① color：文字颜色 ② background-color：背景色 ③ background-image：背景图像，背景色显示在背景图像的下面，以提供不透明的背景，比④ background-repeat：决定当背景图像比元素的画布空间小时该如何排列。 repeat：默认，在水平和垂直两个方向上平铺； repeat-x：仅在水平方向平铺； repeat-y：仅在垂直方向平铺； no-repeat：不平铺。 ⑤ background-attachment： scroll：默认，图像和文本一起滚动； fixed：图像不动，水印效果。 ⑥ background-position：背景图像在元素画布空间中的定位方式，指定了图像左上角相对于画布的水平间距和垂直间距。可以用绝对距离（像素）、百分比或特殊关键字。 水平方向关键字：left、center、right 垂直方向关键字：top、center、bottom <!--[if !supportEmptyParas]--> <!--[endif]--> 举例：background-image属性使用。 b{background-image：url(donut-tile.gif);background-color：white;} p{background-image：url(picture.gif);background-position：20% 40%;} body{background-image：url(picture.gif);background-position：center center;} <!--[if !supportEmptyParas]--> <!--[endif]--> 3．4 box属性 像<p>元素这样的块级元素可以作为屏幕上的一个矩形容器来考虑。可以通过样式属性来控制这些容器的三个方面。可以控制的box属性如下： ① margin属性：决定元素的box的边和相邻元素的边的距离。 ② border属性：决定包围元素的边的边框的视觉特性。 ③ padding属性：决定元素内它的边和它的实际内容间的距离。 ④ height，width和positioning属性：决定由元素产生的box的大小和位置。 <!--[if !supportEmptyParas]--> <!--[endif]--> 3．4．1 margin属性 单边距的设置规则： ① margin-top：上边距 ② margin-right：右边距 ③ margin-bottom：下边距 ④ margin-left：左边距 <!--[if !supportEmptyParas]--> <!--[endif]--> 举例：单边距的设置。 body {margin-top:20px; margin-bottom:20px; margin-left:30px; margin-right:50px;} p {margin-bottom:20mm;} div.fun {margin-left:1.5cm; margin-right: 1.5cm;} <!--[if !supportEmptyParas]--> <!--[endif]--> 也可以用margin属性来一次性为四条边设置边距。 <!--[if !supportEmptyParas]--> <!--[endif]--> 举例：通过margin属性设置边距的规则。 ① 如果仅指定了单个值，则该值被应用到4个“空白”。 如：p{margin:1.5cm;} ② 如果四个值都指定了，则它们按照顺时针方向应用到各个空白（上、右、下、左的顺序）， 最后一个距离后加分号，之间用空格相隔。 如：p{margin:10px 5px 15px 5px;} ③ 如果在规则中仅指定了两个或三个值，缺少一边的取值将由它的对边决定。 如：p{margin:10px 5px ;} 将设置上边、下边的空白为10像素，右边、左边的空白为5像素。 <!--[if !supportEmptyParas]--> <!--[endif]--> 3．4．2 border属性 border位于空白（margin）和间隙（padding）之间。 （一）border-style属性 ① none：无边框 ② dotted：点边框 ③ dashed：虚线边框 ④ solid：实线边框 ⑤ double：双边框 ⑥ groove：蚀刻边框 ⑦ ridge：突出边框 ⑧ inset：凹进边框 ⑨ outset：凸起边框 也可以通过border-top-style，border-right-style，border-bottom-style，border-left-style来单独设置各边的边框类型。当使用border-style来设置四边时，规则同margin类似。 <!--[if !supportEmptyParas]--> <!--[endif]--> （二）border-width属性 border-width、border-top-width、border-right-width、border-bottom-width、border-left-width可以分别设置边框的粗细。典型取值有：thin、medium、thick，当然也可取其他长度值。 （三）border-color属性 border-color、border-top-color、border-right-color、border-bottom-color、border-left-color可以分别设置边框的颜色。 <!--[if !supportEmptyParas]--> <!--[endif]--> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
