css基础知识

三种嵌套层叠样式的方法

嵌入式层叠样式表
连接式层叠样式表
<link href="main.css" rel="stylesheet">
引入式层叠样式表
@import url (main.css);

类别选择符

class一个类别
p.blod {font-weight:bold;}
<p class="blod">这个段落是粗体字 </p>

id选择符

ID选择符只能用在一个选择符
p#bold {font-weight:blod;}
<p id="blod">这个段落是粗体字 </p>

群选择符

你可以同时为多个选择符应用同一套规则
p,h1,h2 {text-align:left;}
群选择符中掺杂ID类别等
p.blod,h1#red {font-weight:blod;}

五种定义颜色的方法

<color keyword> 设置颜色为给定的值
常用关键字：aqua(浅绿色),black(黑色),blue(蓝色),fuchisia(粉色),gray(灰色),green(深绿色),lime(浅绿色),maroon(栗色),navy(海军蓝),olive(橄榄色),purple(紫色),red(红色),silver(银色),teal(蓝绿色),white(白色),yellow(黄色)
"#rrggbb" 用的16位进制来表示
rgb（rrr，ggg，bbb）制定RGB三种色的数值（0-255）
h1{color:rgb(255,0,0)}(r为红，g为绿，b为蓝)
rgb（rrr%，ggg%，bbb%）通过RGB三种颜色的百分比制定
h1{color:rgb(100%,0%,0%)}
inherit 继承父级

布局四属性

Margin（边界距）一个元素的border和另外一个元素的boder之间的距离。
Border（边框）一个元素的边框，它一定是存在的，不管你看不看的见。
Padding（填充）边框和内容间的间距。
Content（内容）可以是图片，可以是文本，可以是任何元素。

Border（边框）

边框宽度（需要在定义border-style后才能显现）
在css中，你可以用关键字来指定边框的宽度:
border-width:thin
border-width:medium (默认边框宽度)
border-width:thick
border-width:<length> （用具体数值来指定）
border-top-width:<length>（设置上边框）
border-right-width:<length>（设置右边框）
border-bottom-width:<length>（设置下边框）
border-left-width:<length>（设置左边框）
你也可以用具体数字来指定:
border-width:10px
border-with:2em
边框颜色
边框颜色属性的指定方式和其他颜色属性一样：
border-color:color name/hex value/rgb() value
边框的风格
border-style:none
border-style:hidden
border-style:dotted
border-style:dashed
border-style:solid
border-style:double
border-style:groove
border-style:ridge
border-style:inset
border-style:outset

Margin（边界距）

边界距
边界距属性是用来指定两个元素边框之间的距离：
margin：<top> <right> <bottom> <left>
margin-top：<length>
margin-right：<length>
margin-left：<length>
margin-bottom：<length>

Padding（填充）

填充属性用来控制元素边框内空间的大小，如下所示：
padding：<top> <right> <bottom> <left>
padding-top:<length>
padding-right:<length>
padding-bottom:<length>
padding-left:<length>

背景图片

在css中，你将可以对任何元素指定背景图片，比如：
body{background-image:url("相对路径/绝对路径");}
background-image: url("<location>")
background-image: none（无背景图片）
background-image: inherit（继承父级）

背景重复

你可以对背景显示的方式进行调整，通过background-repeat属性(默认为重复)。
background-repeat:repeat(重复背景)
background-repeat:repeat-x(仅平行重复)
background-repeat:repeat-y(仅垂直重复)
background-repeat:no-repeat(不重复)
background-repeat:inherit(继承父级)

背景附着

这个background-attachment属性可以控制背景是否随网页滚动。
background-attachment:scroll(背景随着滚动)
background-attachment:fixed(背景固定)
background-attachment:inherit(继承父级)

背景定位

背景定位属性用来指定背景图片在网页的展示位置
background-position:<x> <y> (用具体数值或百分比指定)
background-position:bottom right; (用关键字来定位)

字体属性

字体元素控制元素的字体

font-family:Verdana
font-family:Times
font-family:Georgia
font-family:Arial,Verdana,sans-serif(浏览器会逐个往下找可使用的)
font-family:Time,New Roman,serif
font-family:I Don't Have This Front,san-serif

字体风格属性

font-style:oblique; (斜体)
font-style:italic; (斜体)
font-style:normal;

字体粗细属性

font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:<100-900>

字体大小属性

font-size:12pt(Absolite)
font-size:12px(Absolite)
font-size:medium(Absolite)
font-size:smaller(Relative)
font-size:normal(Relative)
font-size:larger(Relative)
font-size:50%(Relative)

行间距属性

它来制定行与行之间的距离
line-height:16px;

字体变量属性

font-variant可以用来小写变大写
font-variant:normal;(没有风格)
font-variant:small-caps;(全部变大写，以前为大写的会变得比其他大写更大一些)

文本属性

文本缩进属性

通过text-indent的属性你可以在css中对每个断落的首行进行缩进
text-indent:<lenght> (根据具体数值对段落首行进行缩进)
text-indent:<percentage> (根据百分比缩进)

文本对齐属性

css支持水平对齐和适当的文本
text-align:left (文本左对齐)
text-align:right (文本右对齐)
text-align:center (文本居中对齐)
text-align:justify (文本两端对齐)

文本装饰效果

在css中，文本装饰效果涉及到上划线，下划线，删除线等对文本的一些装饰效果
text-decoration:none(无装饰)
text-decoration:underline(下划线)
text-decoration:overline(上划线)
text-decoration:line-through(删除线)

文本变形

文本变形指大小写转换字母大写等属性
text-transform:none(不变)
text-transform:capitalize(首字母大写)
text-transform:uppercase(全部变大写)
text-transform:lowercase(全部变小写)

连接

连接与化类别

用css的.link化类别用来指定没有访问过连接的属性

没有访问过的连接是绿色的；访问过的连接是蓝色的
:link a:link{...} (设置未访问连接属性)
:visited a:visited{...} (设置访问连接属性)
:active a:active{...} (鼠标点击与释放之间时)
:hover a:hover{...}(鼠标悬停时)
例子：
a.visited{color:green;}(访问过的连接变为红色)