css是什么意思

html-css048

css是什么意思,第1张

css是层叠样式表。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

特点:

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

用了一段时间的quasar了,它里面封装的 css 类确实很好用,但是在帮助文档中,描述得零零散散,不方便使用,遂总结一下。

text-[ h1~6, subtitle1, subtitle2, body1~2, caption, overline ]

text-weight-[ thin, light, regular, medium, bold, bolder ]

text-[ right, left, center, justify, bold, italic, no-wrap, stike, uppercase, lowercase, captitalize ]

text-[颜色名称]:text-teal

primary(淡蓝),secondary(淡绿),accent(淡紫),dark(黑色),positive(深绿),negative(红色),Info(亮蓝),warning(黄色)

每种颜色由浅到深分为 1-14 级

red, pink, purple, deep-purple, indigo(靛蓝), blue, light-blue, cyan, teal(青色), green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey

在应用程序的 *.vue 文件中,可以使用 $primary , $red-1 等颜色。

|

|

|

|

|

|

子元素可以覆盖父元素上指定的对齐方式 。 这允许对单个Flex项进行对齐。

可用值有: self-start , self-center , self-baseline , self-end , self-stretch

与 flex 值使用类似

Quasar使用一个12分的列系统来分配子行的大小。 以下是可用的CSS辅助类的一些示例:

|

|

在上面的例子中,由于8/12 = 2/3 = 66%,col-8占据了行宽的三分之二(2/3),而col-2占据了六分之一(2/12 = 1 / 6〜16.67%)。

CSS辅助类 col-auto 使单元格只填充需要渲染的空间。 另一方面, col 试图填充所有可用的空间,同时如果需要也可以缩小。

CSS辅助类 col-grow 使单元格至少填充需要渲染的空间,并有可能在有更多空间可用时增长。

CSS辅助类 col-shrink 使单元格最多填充需要呈现的空间,并且当没有足够的可用空间时有可能收缩。

您可以使用 order-first 和 order-last CSS辅助类来设置子元素的顺序

默认情况下,Flex项按源(source)顺序排列。 但是,order属性控制它们在flex容器中的显示顺序。 如果您需要更多粒度,请使用 order CSS属性并分配所需的值。

例子:

|

|

以下是CSS order 属性的工作原理:

border属性 :在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。

语法:border: border-width | border-style | border-color

border-width :边框宽度。可以指定长度值。如1px,1em(单位为px,pt,em等)。或者使用关键字medium(默认),thick,thin。

 border-top-width:设置元素上边框宽度

 border-right-width:设置元素右边框宽度

 border-bottom-width:设置元素下边框宽度

 border-left-width:设置元素左边框宽度

border-style :边框样式。

 border-top-style:设置元素上边框样式

 border-right-style:设置元素右边框样式

 border-bottom-style:设置元素下边框样式

 border-left-style:设置元素左边框样式

 属性值有:

  none:无边框。

  hidden:隐藏边框。对于表,hidden 用于解决边框冲突。

  dotted:点状边框。

  dashed:虚线边框。

  solid:实线边框。

  double:双线边框。两条单线与其间隔的和等于指定的border-width值。

  groove:3D凹槽边框。

  ridge:3D垄状边框。

  inset:凹边框。

  outset:凸边框。

border-color :边框颜色。

1.1 边框各样式效果图

1.2 四条边颜色样式相同

1.3 四条边颜色不同,样式相同

1.4 四条边颜色相同,样式不同

1.5 设置上边框宽度、样式、颜色

1.6 设置右边框宽度、样式、颜色

1.7 设置下边框宽度、样式、颜色

1.8 设置左边框宽度、样式、颜色

以上对border边框属性进行了基础操作,大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解,那就在回复区畅所欲言吧,我定会吸取精华~如有写错欢迎大家回复,我以后定会更加细心 _