CSS样式设置 ==> https://www.w3school.com.cn/h.asp

1.常用显示样式

上外边距: margin-top:5px

下外边距: margin-botton:5px

左外边距: margin-left:5px

右外边距: margin-right:5px

字体左中居中20px加粗: text-align:center;font-size:20px;font-weight:bold;

字体位置显示

居中：h1 {text-align:center}

居左：h2 {text-align:left}

居右：h3 {text-align:right}

字体粗体显示

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

元素在一排位置显示

按钮靠左显示: float:left

按钮靠右显示: float:right

元件离上面20px,居中显示: margin:20px auto;

合并表格列: html.colSpan

2.样式文件的位置

bootstrap框架

less语言处理:一门向后兼容的 CSS 扩展语言.

3.bootstrap文件夹中样式文件说明

<readonly>对输入框限制设置为禁止输入数据

 <Disabled>按钮不能点击

 <Visible>是否显示(也可以不隐藏其它显示元件)

4.CSS常用基础

4.1 HTML元素分为块元素(<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>,<div>)和行内元素(<a>,<stong>,<b>,<em>,<i>,<del>,<s>,<ins>,<span>)

(男人)块元素特点:

  1.比较霸道,自已独占一行

  2.高度,宽度,外边距及内边距都可以控制

  3.宽度默认是容器(父级宽度)的100%

  4.是一个容器及盒子,里面可以放行内或块级元素 

(女人)行内元素特点: 

  1.相邻行内元素在一行上,一行上可以显示多个

  2.宽和高设置是无效的

  3.默认宽度就是它本身内容的宽度

  4.行内元素只能容纳文本或其它行内元素,不能放块元素(<a>可以放块元素)

(人妖)行内块元素特点:

  1.<img/>,<input/>,<td>同时具有块元素和行内元素的特点

  2.和相邻行内元素(行内块)在一行上,他们之间会有空白缝隙,一行可以显示多个(行内元素特点)

  3.默认宽度就是他本身内容的宽度(行内元素特点)

  4.高度和行高,外边距以及内边距都可以控制(块级元素的特点)

4.2 元素晃示模式的转换(一个模式的元素需要另外一种模式的特性,比如想要增加链接<a>的触发范围,<a>是行内元素不能高高宽,如果要设就得转成块元素) 

  1.转换成块元素: display:block (display显示,block块)

  2.转换成行内素: display:inline

  3.转换成行内块元素: display:inline-block 

4.3 案例:简洁侧边栏(鼠标移到上面变色,点击跳转页面)

  1.每个分类是一个a链接,要将a链接转换成块元素,单独占一行,并且有宽度和高度

  2.鼠标经过a时,a链接变成橙色背景

4.4 单行文字垂直居中的代码:让文字和行高等于盒子的高度( line-height:盒子height的高度 )

4.5 CSS的背景(背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定)

  1. 背景颜色(颜色值)

  2.background-image:url(image/logo.png); 背景图片(url),默认平铺的,网页标志小的装饰图片或超大图片(与插入图片相比,背景图片非常便于控制位置)

  3.background-repeat:repeat/no-repeat/repeat-x/reapeat-y; 背景平铺/不平铺/向x轴横向向右平铺/向y轴纵向向下平铺

  4.background-attachment:

  5.background-position:x y;背景图片位置,两个值

    1.background-position:top/center/bottom/left/right; 背景图片位置,方位名词(取向上水居中或底部水平居中,两个值位置不分顺序,可以写一个参数,第二个参数默认水平居中或垂直居中),向上/水平居中/底部/向左/向右

    2.background-position:10px 10px; 背景图片位置,精确单位(百分数/数字/像素),第一个是x轴横向坐标,第二个是y轴纵向坐标

    3.background-position:10px center; 背景图片位置,混合单位,前面一定是x,后面是y的顺序

   6.background-attachment:scroll/fixed;背景图片固定,背景附着,可制作视差滚动的效果,滚动的/固定的

   7.合并到一起写:backround:背景颜色/背景图片/背景平铺/背景图片固定/背景图片位置;中间有空格隔开,没有固定顺序,这只是习惯性的顺序

    8.background:rgba(0,1,2,0.3);背景色半透明,0=r,1=g,2=b,0.3=a,最后一个参数是alpha透明度,取值范围在0-1之间,前面rgb就是颜色的三个值

4.6 网页布局(利用CSS摆盒子)

   1.border边框(样式和粗线同时要设才能显示)https://www.w3school.com.cn/css/css_border.asp

   2.内边距padding,如果盒子已经有了宽度和高度(不设就不会撑大盒子),此时再指它内边框,会撑大盒子,如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可.

   3.外边距margin,盒子与盒子的距离

   4.块级盒子水平居中,auto(自动的意思)

 4.7 网页布局(利用浮动float摆盒子) https://www.w3school.com.cn/css/css_float.asp

   1.浮动可以改变元素标签默认的排列方式,可以让多个块级元素一行内排列显示,并且没有间隙,如果用行内块转换,中间排列会有一个间隙.

  2.网页布局第一准则:多个块级元素纵向排列找标准流(块自带的本身特性),多个块级元素横向排列找浮动

  3.加了浮动后的特性

   4.清除浮动

4.8 定位 https://www.w3school.com.cn/css/css_positioning.asp

  1.定位模式 

   2.边偏移

   3.相对定位 relative

   4.绝对定位 absolute

   5.固定定位 fixed

   6.定位总结

===============================================================================================

上一篇:TERSUS无代码开发(笔记03)-常用快捷键

下一篇:TERSUS无代码开发(笔记05)-简单实例电脑端页面设计