CSS创建:
插入样式表方式有三种:1)外部样式表<link rel="stylesheet" type="text/css" href="css文件
路径">
2)内部样式表 <style type="text/css"></style>
3)内联式样式表 <p style=" 内容">
CSS backgrounds(背景):
background-image:url('图片路径')
background-color:(背景颜色)
background-repeat:repeat-x(水平方向平铺),repeat-y(竖直方向平铺),no-repeat(不平铺)
background-position:(left,right,bottom,top)图片位置
CSS Text(文本):
指定css颜色样式:
1)颜色名;2)十六进制;3)RGB(,,,)函数《红绿蓝》
文本对齐方式:
text-align:(center,left,right,justify<每一行被展开为宽度相等,左,右外边距是对
齐>)
文本修饰:
text-decoration:(none(无下划线),overline(下划线在文本上面),line-through(下划线
在文本中间),underline(下划线在文本下面).
文本装换:
text-transform:(uppercase(所有字母变为大写),lowercase(所有字母变为小
写),capitalize(首字母大写).
文本缩进:
text-indent:
文本其他应用:
字符之间的空间:letter-spacing:
指定行高:line-height:(文本行与行之间的距离)
如何改变元素的文本方向:direction:rtl(从右到左).
单词之间的空间:word-spacing:
设置文本与图像的对齐位置(文本包含图像):vertical-align:text-top/bottom/center
给文本添加阴影:text-shadow:(2px,3px(阴影效果),color(阴影颜色)
CSS font(字体):
font-family:文本字体
font-size:字体大小
字体样式:font-style:(normal(正常),italic(斜体))
字体加粗:font-weight:
CSS link(链接):
未访问链接样式:a:link:
访问过得链接样式:a:visited:
鼠标移动到链接上:a:hover:
也可以插入图片:list-style-image:url("图片位置")
链接被点击的那一刻:a:active:
a:hover必须放在link,visited后面,active必须放在hover后面
CSS 列表:
无序列表:list-style-type:circle/square
有序列表: list-style-type:upper-roman/lower-alpha
CSS table(表格):
表格边框: border:2px solid red;
折叠边框: border-collapse:collapse;(最好定义在<table>标签内)
表格的宽度和高度:
widht: height:
表格文字对齐: text-align:
垂直对齐属性: vertical-align:
表格填充:padding:《这个最好设置在td和tr内》
CSS 盒子模型:
当我们指定CSS元素的宽度和高度属性时,我们只是设置了内容区域的宽度和高度,要知道完全大小
的元素,你还必须添加填充,边框和边距。
CSS 边框:
边框样式:border-style:
none: 默认无边框
dotted: dotted:定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色值
边框颜色:border-color:
边框宽度:border-width:
也可以单独对某一边的边框进行设置:border-left-style:
CSS 轮廓(outline):
于边框用法基本相同,功能与margin相反
CSS margin(外边距):
基本的意思:我的理解就是元素之间的距离,(margin清除周围的元素,没有背景颜色,是完全透明
的)
外边距的值:auto(依赖于浏览器);
margin-bottom/top/left/right:值
CSS padding(填充):
用法和margin相同,功能和margin相反。(margin是清理周围元素,而padding是清理内部,内容周围
的空间。
CSS 尺寸:
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
CSS position(定位):
Fixed定位:元素的位置相对于浏览器窗口是固定的。它定义的元素不占用空间,可以与其他元素重
叠。
relative(相对定位):
相对定位是定义相对于元素正常出现的位置
absolute(绝对定位):
绝对定位定义的元素的位置是相对蔚最近已定义的父元素,如果元素没有已定位的父元素
,那么他的位置相对于<html>,它定义的元素不占据空间,可以与其他元素重叠。
重叠元素:z-index:value;value越大定义的元素在最上面
处理内容的溢出:overflow设置当元素的内容溢出其区域时发生的事情。
(auto,hidden,scroll,visible,inherit)
overflow-y
指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto,hidden,scroll,visible,no-display
no-content
overflow-x
指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto,hidden,scroll,visible,no-
display,no-content
更改光标:
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
CSS 组合选择符:
后代选取器(以空格分隔,匹配父元素的所有子代元素)
子元素选择器(以大于号分隔,职匹配父元素的第一代子元素)
相邻兄弟选择器(以加号分隔,两个元素必须有相同的父元素,并且两个元素紧接在一起)
普通兄弟选择器(以破折号分隔,两个元素有相同的父元素,两个元素相邻就行)