CSS(Cascading Style Sheet),层叠样式表。用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
\n
\n相关质料:CSS 教程 http://www.w3school.com.cn/css/
\n
使用CSS的方法:
\n
1、行内样式(<p style="color:red; font-size:12px;>正文内容</p>")
\n
2、内嵌式 (<head><style type="text/css">p{color:red; font-size:12px;}</style></head>)
\n
3、链接式 (<link href="1.css" type="text/css" rel="stylesheet">)
\n
4、导入样式 (<head><style type="text/css">@import url(1.css);</style></head>)
\n
\n
CSS基本语法
\n
CSS选择器
\n1、标记选择器 (h1 {color:red; font-size:12px;})
\n2、类别选择器 (.abc {color:red; font-size:12px;} 优点可重复使用)
\n3、ID选择器 (#abc {color:red; font-size:12px;} 在JAVAscript里不能重复使用)
\n
选择器的声明
\n1、集体声明 —使其具有相同的属性(h1, h2, h3, h4, h5, p {color:red; font-size:12px;} 或者 h2.special, .special, #abc {color:red; font-size:12px;})
\n2、选择器的嵌套 —设置某标记内的一个标记的属性(p b {color:red;} | <p>a<b>b</b>c</p>这样直接指定b的颜色是红色并加粗,而a和c则为默认。)
\n
CSS的继承
\n<style type="text/css">p {font-size:20px;}; p b {color:red;} </style>
\n<p>a<b>b</b>c</p>
\n显示效果为:ABC全部是字体大小为20px,但b是红色。这样b就继承了P标记的20px的属性。
\n
CSS文字效果
\ncss文字样式:
\n字体:p {font-family:黑体, 幼圆}; 如果系统中有黑体就是用黑体,如果没有就是用幼圆字体。
\n大小:p {font-size:2in;2cm;2mm;2pt;2pc;};这里使用了不同的单位。如果CM里面,MM毫米,PT像素等
\n颜色:p {color:red; #ffffff; rgb(20%,30%,50%);};这里有3中颜色的表示方法。
\n粗细:p {font-weight:bold; normal; lighter; 500;};这里有3中粗细的表示方法。
\n斜体:p {font-style:italic; normal; };
\n下划线、顶划线、删除线、闪烁:p {text-decoration:underline; overline; line-through; blink;};闪烁只有火狐浏览器支持。IE6,IE7都不支持。
\n英文字母大小写:p {text-transform:capitalize; uppercase; lowercase;};分别代表首字大写、全部大写,全部小写。
\n
css段落文字:
\n水平对齐:
\n垂直对齐:p {vertical-align:top; bottom; middle;};分别为:顶端、底端、中间对齐
\n行间距,字间距:
\n首字放大:
\n
\n
图片样式
\n图片边框:img.test1{border-style:dotted;点画线。;dashed;虚线。border-color:red;红色。border-width:5px粗细。};
\n简写方式:img.test1 {border:dashed 2px blue;}
\n边框分别设置:border-left左边框,border-right右边框,border-top上边框,border-bottom下边框。
\n
图片缩放:img.test1 {width:50%;相对宽度。width:80px;宽度为80px的绝对宽度。高度:hight}
\n对齐方式:水平对齐:text-align:left; center; right; 垂直对齐:vertical-align:top;bottom;…
\n图文混排:img {float:left;}