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;}(访问过的连接变为红色)
