CSS简明教程
CSS语法
如同下面形式p {color:red;text-align:center;}
CSS由选择器和{}包含的声明组成。每条声明必须由;结束,是一个由:分隔的键值对。
HelloWord程序
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p { color:red; text-align:center; } </style> </head> <body> <p>Hello World!</p> <p>这个段落采用CSS样式化。</p> </body> </html>
效果是 所有的<p>标签的内容都变红和居中
CSS选择器
id选择器
#para1 { text-align:center; color:red; }
使用
<p id="para1">Hello World!</p>
class选择器
选择器名字由.开头
.center { text-align:center; }
使用
<h1 class="center">标题居中</h1> <p class="center">段落居中。</p>
p.center {text-align:center;} 选择class为center的p标签元素
标签选择器
选择器名称使用标签名, 比如p,h1,div,表明相应的标签会匹配对应css。
p {color:red;text-align:center;}
嵌套选择器
p{ }: 为所有 p 元素指定一个样式。 .marked{ }: 为所有 class="marked" 的元素指定一个样式。 .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。 p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
复合标签选择器
/*选择并设置所有 <h1> 样式和所有 <p> 元素的样式:*/ h1,p { background-color:yellow; }
/*选择并设置位于 <div> 元素内部的每个 <p> 元素的样式*/ div p { background-color:yellow; }
/*选取父元素是 <div> 元素的每个 <p> 元素,并设置其背景色*/ div>p { background-color:yellow; }
/*选择 <div> 元素之后紧跟的每个 <p> 元素,并设置其背景色*/ div+p { background-color:yellow; }
//选择器 http://www.w3school.com.cn/cssref/css_selectors.asp
插入样式表
外部
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
mystyle.css内容可能如下
hr {color:sienna;} p {margin-left:20px;} body {background-image:url("/images/back40.gif");}
内部
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
内联
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
优先级:内联>内部>外部
背景
body { background-color:#6495ed; background-image:url('img_tree.png'); /*有图片会覆盖颜色背景*/ background-repeat:no-repeat;/*默认在X和Y轴方向重复,值还有repeat-x,repeat-y*/ background-position:right top;/*图片位置,其他值参考 http://www.runoob.com/cssref/pr-background-position.html*/ background-attachment:fixed;/*图片是否随滚轮滚动,默认值scroll*/ }
文本
.myclass { color:#00ff00; text-align:center;/*文本居中,right,文本靠右,justify,所有行宽度相等,左右*/ text-decoration:overline;/*文字上方有线,还有line-through,underline*/ text-transform:uppercase;/*还有lowercase,capitalize*/ text-indent:50px;/*首行缩进*/ }
字体
.myclass { font-family:"Times New Roman",Times,serif; /*font-family:Arial,Helvetica,sans-serif;*/ font-style:normal;/*italic,oblique*/ font-size:40px; font-size:2.5em;/*1em的默认大小是16px*/ font-size:100%;/*使用百分比,默认字体大小16px*/ }
链接
a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ /*注意顺序*/ /*例子2*/ a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
列表
ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} /*use image*/ ul { list-style-image: url('sqpurple.gif'); }
表格
table,th,td { border:1px solid #00ff00; } /*此表格为绿色双边框,如果需要边框为单线条边框,增加*/ table { border-collapse:collapse; } /*表格宽度和高度*/ table { width:100%; } th { height:50px; } /*表格颜色*/ table, td, th { border:1px solid green; } th { background-color:green; color:white; }
盒子模型
div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }
边框
border-style:solid; /*其他值dotted,dashed,groove,*/ border-width:5px; border-color:#98bf21; /* 边框四周风格可以单独设置*/ border-right-style:solid;
例子
<p>两个不同的边界样式。</p> <style> p { border-bottom: 1px solid #ccc;padding:14px;border-color: #f44336; } </style>
{border: 1px solid #ccc;padding:14px;border-radius: 16px;}
{background-color: #ddffff;padding: 14px;border-left: 6px solid #ccc;border-color: #2196F3;}
Margin 和Padding
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; /*简写 margin后面可以是1~4 个数值 1:四个外边距都是这个值 2:上下, 左右 3:上,左右,下 4:上,右,下,左 */ padding 同理
显示隐藏,块和内联
/*隐藏元素的两种方法*/ {visibility:hidden;}/*空间依然占用*/ {display:none;}/* 不占用空间*/
块元素是一个元素,占用了全部宽度,在前后都是换行符,可设置宽和高。
块元素的例子:
- <h1>
- <p>
- <div>
- li、dt、dd
内联元素只需要必要的宽度,不强制换行,不能设置宽和高。
内联元素的例子:
- <span>
- <a>
- b、i、u、em
/*把列表作为内联*/ li {display:inline;} /*把span作为block*/ span {display:block;}
定位
{ position:XXX; left:32px; } XXX可以是static,fixed,relative,absolute,sticky /* static 是默认值 fixed相对于浏览器窗口的位置 relative相对于元素本来应该的位置 absolutex相对于最近定位父元素,如果没有就是html sticky在relative和fixed之间 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。 */
浮动
一般用于图像,img { float:right; }
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center;
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
img { display: block; margin: auto; width: 40%; }