css标签:colorcolor:用法color:指定文本的颜色color:red/#fff/unicode; direction:用法 direction:定义文本的方向.dirction:ltr/rtl(从左到右.从右到左)例子:div{  direction: rtl} letter-spacing:用法 letter-spacing:定义字符间距的标签例子:h1 {letter-spacing:2px}h1 {letter-spacing:-2px} line-height:用法 lin…
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元素选择器 选择器总是从左至右解析,不要私自添加()优先运算 基本选择器 h2{ /* 标签选择 */ } p,h1{ /* 使用逗号实现元素合集 */ } div h1,div h2{ /* 使用空格实现后代元素(子元素和子孙元素)查询,表示div的后代元素h1,h1和div的合集,在从合集中查找后…
css文件的创建:1.外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css" />注:rel必须指定,否则不能识别样式表,type最好指定文件的类型.2.内部样式表:<style type="text/css">  hr {color: sienna;}  p {margin-left: 20px;}</style>注:…
css派生选择器:是指在某个样式表或者dom元素的行内定义行内元素的属性,而其他同名样式在其他dom节点无效的样式表定义方式.例如:div ul li{border:1px solid red;}<div><ul><li>我是有边框的</li></ul></div><span><ul><li>我是无边框的</li></ul></span>定义了派生选择器的样式以后…
css简介:css指的是层叠样式表,cascading style sheets.用来定义html中的dom节点如何展示在页面中的问题.解决了内容与表现形式的分离问题.常见的样式表有外部链接样式表和内部样式表,简称,外链和内联. css基础表现形式:cssname{porerty:value} div{width:100px;} 注:样式表的声明是可以覆盖的,分为以下几种情况:1.外部样式表重新定义.在外部样式表中,定义了两次同样的名称,不同的样式属性的css,默认会以最后一次定义的为准或者最后…
outline:这只轮廓样式,与border类似.写法参考border. overflow/overflow-x/overflow-y:visible/hidden/scroll/auto/no-display/no-contentoverflow:溢出显示方式.overflow-x:水平方向溢出显示方式overflow-y:垂直方向溢出显示方式注:一般设置overflow-x/y属性以后,不管内容有没有溢出,滚动条会一直出现. max-height/min-height注:有时候我们需要定义元…
text-align:规定文本的水平对齐方式.left/right/center/justify(两端对齐)/inherit(继承) text-decoration:添加到文本的效果.下划线,中间线等.none/underline/overline/line-throuth/blink/inherit text-indent:文本缩进的距离.10px/10% text-shadow:文本的阴影效果.(x,y,width,color)横向,纵向,阴影宽度,颜色 text-transform:定义文…
css标签b:1.background:用法 background:可以指定颜色,背景,平铺效果以及背景定位.background:url(aa.png) #fff 0px 0px no-repeat注:该行背景指定该元素背景为aa.png的图片,背景色为白色,背景从0,0(x,y)的位置开始,不平铺 拆分写法:background-color:#fff;backgound-image:url(aa.png);backgound-position:0px 0px;background-repea…
margin/margin-left/margin-right/margin-top/margin-bottom设置边距属性margin:0;--所有外边距0margin:0 1px;--margin-top/bottom为0.margin-left/right为1pxmargin:1px 2px 3px 4px;--margin-top/right/bottom/left padding与margin类似,使用啦声明内边距的.用法同上 column-count:number:用来定义显示的列数…
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示): >>> 本节课源码 >>> 所有课程源码 1. CSS 也有 Tree Shaking? 是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码. 为了方便理解 Tree Shaking 概念,并且与 JS…