css

白嫖有罪 点赞 评论 加关注

我的nt毕设历程

• 先学习了mybaits的后台数据库，了通过后台的xml文件配置了数据库。提高了JDBC代码的重用，避免了大量代码的修改。体会到了约定大于配置的思想。

• 学到这，觉得暂时没必要继续学习spring+springmvc。开始着手做一个项目。

• 卡在了前端，之前只是学过html标签，style样式表，js简单语法以及快要忘记的jquery库。只是学习了知识，但是想要实现具体功能，需要对知识运用的足够熟练和项目开发经验。

• html每个标签什么时候用，每个标签的属性的含义，都有哪些值。这些都没有熟练到能完整开发一个网页的程度，何况是开发一个现在十分美观的，交互性很强的网页呢？？？

• css的选择器，常用样式,盒子模型如何居中，位置???

• js基本不会用

• 几乎不可能开发出一个美观的前端

• 使用了前端的轻量级框架，解决了css不会写的问题

• 在了解了html标签的所有功能之后，学会按照功能去找代码。按照菜鸟教程上的代码示例删改。

• 基本了解了bootstrap上每一个css类标签的效果，按照功能查bootstrap表，找到想要使用的css类。

学习css

• css做什么用

• css怎么使用

• 如何选中一个标签

  • 标签选择器，类选择器，id选择器 p{} .class{} #id{}
  • 层次(空格，>,+,~)选择器 A B{} A+B{} A>B{} A-B{}
  • 伪类选择器与层次选择器的组合 :nth-child() {} nth-of-type(){}
  • 属性选择器 []

• 什么是标准文档流，块元素和行内元素从上到下，从左到右的自然排列，行内元素不能包含块元素

• 什么是盒子模型

  • 盒子模型总尺寸=border+ padding+margin+内容宽度

style的键值对

1.通用标签键值对

• 内容宽度 高度width height: 计算实际宽度 定义宽度 基于父元素的百分比宽度 继承父元素宽度 auto length % inherit

• 字体 字号 风格 粗细 全部属性font-family 、font-size、 font-weight、 font

• **文本样式 颜色 首行缩进 行高 ** font-style、 color 、 text-indent、 line-height

• 文本阴影 text-shadow: color x-offset y-offset blur-radius

• 水平对齐方式 text-align : 左对齐 右对齐 居中 两端对齐 left right center justify

• 垂直对齐方式 vertical-align: middle、top、bottom

• 文本装饰 text-decoration:下划线 上划线 删除线 underline overline line-through

• 背景样式

  • 背景图像
    • background-image: url()
    • background-repeat: repeat no-repeat repeat-x repeat-y
    • background-position : xpx ypx; x% y%; left center right left center right ;
    • background-size:计算图片大小 图片百分比大小 放大平铺至整个容器 保持纵横比缩放 auto percentage cover contain
    • background:背景颜色 背景图片 图片位置 平铺方式

• 背景颜色 background-color:

• border边框:

  • border-color:
  • border-width: thin medium thick 像素值
  • border-style:none hidden dotted dashed solid double
  • border:粗细 样式 颜色
  • border-radius:左上角 右上角 左下角 右下角| ?%

• 外边距 margin:

  • margin-top -right -bottom -left : ?px

• margin: 上下外边距为0 左右外边距根据实际长度计算

• 内边距 padding:

  • pading -left -right -top -bottom :?px

• padding:

• **box-sizing:**盒子总大小 计算内容大小(内外边距为0) 继承父元素的盒子模型 context-box border-box inherit

• box-shadow:阴影类型 水平便宜量 竖直偏移量 模糊半径 阴影颜色

• display: 块级 行内 行内块元素 隐藏 block inline inline-block

• **float:**不换行向左飘 不换行向右飘 不飘 left right none

• clear:左侧不允许浮动 右侧不允许浮动 左右两侧都不允许浮动

• overflow溢出处理: 不裁剪内容 裁剪内容 滚动显示裁剪内容 如果内容被裁剪则用滚动条 visible、hidden、scroll、auto

• position

  • 相对于原来位置position:relaive top:?px left:?px
  • 以其他元素或者浏览器窗口为基准偏移 position:absolute right=?px
    • z-index:int 大的在上，小的在下 ** 绝对定位脱离文档流**
  • 以浏览器为基准定位 position:fixed

• 透明度

  • opacity: 0-1 值越小透明度越高
  • filter:alpha(opacity=x) x为0-100 值越小越透明

  2.其他标签键值对

• 超链接伪类 a:hover {color:#ff7300}

• li标签

  • list-style-type :无标记，圆，实心圆，实心正方形，数字none disc circle square decimal
  • list-style-image
  • list-style-position
  • list-style

  最后，附上超好用的css手册