CSS教程

TERSUS无代码开发(笔记101)-CSS样式设置说明 (2021-06-07 09:51)

本文主要是介绍TERSUS无代码开发(笔记101)-CSS样式设置说明 (2021-06-07 09:51),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

1.常用显示样式

大小尺寸说明 间距边距说明 各类颜色说明 
width margin 外边距         color  颜色       
height padding 内边距 background-color  背景色
font-weight 字体加粗 float 浮动  详见下面4.6笔记  块盒子水平居中
font-size 字体大小 text-align 水平对齐  详见下面4.4笔记  文字垂直居中

上外边距: 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文件夹中样式文件说明

文件名称定义内容说明
001-reset.less 音/视频显示块定义、HTML页/图片/按钮/输入框显示位置及大小基本定义
002-variables.less 变量定义:常用的颜色值、链接/按钮/表格/布局/表单等元件等使用的颜色及字符大小的变量定义、Bootstrap图标文件地址定义
003-mixins.less Mixins可以将一部分需重用的样式抽出,只需定义一次,可被重复使用
004-scaffolding.less HTML 主体/链接/图片的默认样式
005-grid.less Grid网格对象中的样式定义
006-layouts.less 布局元件使用,定义一个container名称的样式类,并定义其中子元件显示样式
007-type.less 页面中字符样式定义、特别的字号、标题标签如h1 h2 h3…、表头样式、列表样式、缩写类样式、引用内容样式、地址样式
008-code.less 代码内容显示的样式
009-forms.less 表单的样式、带标签的输入框样式、各类输入框元件样式、勾选等元件样式
010-tables.less 表格对象的样式、基本样式/紧凑样式/带边框样式/斑马条样式/滑动变色样式/单元格大小样式/背景色样式等定义内容
011-sprites.less Bootstrap图标名称位置定义,黑色及白色类定义,注意对应的图标文件地址在002-variables.less有定义
012-dropdowns.less 下拉按钮的样式定义
013-wells.less 一种会引起内容凹陷显示或插图效果的容器样式定义
014-component-animations.less 渐变等动态效果样式
015-close.less 关闭图标的样式
016-buttons.less 按钮的样式定义,包括按钮颜色样式/尺寸/状态/背景色
017-button-groups.less 按钮组样式,按钮组中各类不同按钮显示样式
018-alerts.less 报警类提示类的样式,不同颜色定义
019-navs.less 导航类的样式定义
020-navbar.less 导航条的样式定义
021-breadcrumbs.less 面包屑导航样式定义
022-pagination.less 分页为每个页面做导航的样式
023-pager.less 翻页导航样式
024-modals.less 弹窗的样式,包括正常弹窗/大弹窗定义/弹窗头部样式/内部主体样式/底部样式定义
025-tooltip.less 工具提示框样式,包括提示框内部设定图标
026-popovers.less 简单弹窗样式,标题/内容/图标等样式
027-thumbnails.less 缩略图的样式
028-media.less 媒体类型的样式
029-labels-badges.less 标签显示及徽章类的样式
030-progress-bars.less 进度条样式定义
031-accordion.less 垂直手风琴效果样式
032-carousel.less 轮播图样式,控制及图中文字显示样式
033-hero-unit.less 巨幕样式,用于展示放大提示的样式
034-utilities.less 类对象属性的样式,如是否显示,靠左靠右等
035-responsive-utilities.less 响应式处理样式
responsive-767px-max.less 响应式处理样式,最大767px
responsive-768px-979px.less 响应式处理样式768px-979px
responsive-1200px-min.less 响应式处理样式,最小1200px
responsive-navbar.less 导航条响应式处理样式
 4.H5标签属性 <Value>将变变量中的值放到里面显示 <placeholder>对输入框文本提示

 

<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)-简单实例电脑端页面设计

 

这篇关于TERSUS无代码开发(笔记101)-CSS样式设置说明 (2021-06-07 09:51)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!