css基础总结



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 组合选择符:
 后代选取器(以空格分隔,匹配父元素的所有子代元素)
 子元素选择器(以大于号分隔,职匹配父元素的第一代子元素)
 相邻兄弟选择器(以加号分隔,两个元素必须有相同的父元素,并且两个元素紧接在一起)
 普通兄弟选择器(以破折号分隔,两个元素有相同的父元素,两个元素相邻就行)
 
 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值