建模网站素材,茂南网站建设公司,app制作教程课,济南建设网点电话1.css是给HTML标签添加 样式 的语言#xff0c;通过选择器#xff08;标签、id、class#xff09;建立连接
2.css三种形式 内嵌式#xff1a;在 head/ head中写 stylecss/ style 外链式#xff1a;在 head/ head中写通过选择器标签、id、class建立连接
2.css三种形式 内嵌式在 head/ head中写 stylecss/ style 外链式在 head/ head中写 link rel”stylesheet” href”css/css.css” 行内式在标签上直接写h2 style”color: red;”标题/ h2 导入式
3.基本语法 选择器括号对K:V;
4.选择器详解 标签选择器“覆盖面”非常大所以通常用于标签的初始化 Eg.ul{list-style:none;} 列表样式没有去掉列表的圆点 Class有个原子类的玩法就是把类名class”px color”也写成css的样式用空格隔开不同的。
5. 复合选择器
后代选择器空格如.box p .ddd。元素2可以是儿子也可以是孙子等只要是元素1 的后代即可子选择器如元素1元素2。元素2必须是亲儿子其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器并集选择器逗号如ul,ol。并集选择器通常用于集体声明交集选择器又h1又spec类名连在一起如h1.spec
6.伪类选择器伪类选择器书写最大的特点是用冒号:表示比如 :hover 、 :first-child。其中pfirst-child的正确理解是假设p的父元素是xx的第一个叫做p的儿子。
7.~元素关系选择器
8.序号选择器、属性选择器、CSS3新增伪类empty等、CSS3新增伪元素::
::before 和 ::after 伪元素给元素设置伪元素的时候必须设置其content属性浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串content: “”。允许您在任何非替换元素之前或之后插入内容这不是实际内容是装饰性内容。开发中典型的用法在文字后加入红色星号表示必填表单内容。
9.CSS样式层叠性 style scoped 使用场景为在vue中我们为了避免父组件的样式影响到子组件的样式会在style中加 style scoped这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候就不会影响到子组件的样式。由于scope引出了/deep/的玩法 /deep/ 如果去掉scoped的话就会影响全局样式但是加上scoped又不能在当前组件修改子组件的样式这个时候就可以使用 /deep/了。 /deep/表示深度选择器可以做到既不影响到别的地方又能修改子组件在当前的样式。 除了 /deep/ 以外 和 ::v-deep也可以实现同样的效果。注意/deep/ 只能在像 less , sass 等css预处理器中使用在原生css中使用无效所以原生css当中应使用 遇到冲突可以根据idclass标签来算也可以计算权重个人认为不会写出这样的代码除非解决问题 实际例子 ::-webkit-scrollbar 修改整个滚动条的样式
10.字体 font xx
11.段落和行的属性也可以通过css设置
12.color front- list- text- line有继承性祖先设置标签既可在后代所有标签中生效。
13.盒模型HTML标签都是盒子 width宽、height高、padding填充、border边框 margin 盒子与盒子之间的距离margin不叠加塌陷现象以大的为准因为body等有默认的margin所以在开始制作时初始化清0。将盒子左右两边的margin都设置为auto盒子将水平居中 Eg.box{ margin: 0 auto;}上下是0左右居中 盒子垂直居中需要使用绝对定位技术实现。 盒模型计算来设计布局 添加box-sizing:border-box默认是content-box传统的盒模型后就变成内缩而不是外扩该属性大部分应用到移动页面中。 行内元素块级元素display属性可以将两种元素互转。display:block;、display:inline;、display:inline-block; 脱离标准文档流浮动、绝对定位、固定定位下面的元素会占据原来的位置即丢掉了当前的位置。
14.浮动float 浮动float属性的最本质功能是用来实现并排div作为块级元素天生是竖直排列的 子盒子会按顺序进行贴靠如果没有足够空间则会寻找再前面一个兄弟元素 设置float以后行内元素也有宽和高。 1垂直显示的盒子不要设置浮动只有并排显示的盒子才要设置浮动。 2一个大盒子带着小盒子大盒子内部的小盒子设置浮动。 3多用div一层一层的分块。
15.BFC编程不规范涉及的操作、清除浮动涉及到再仔细看让内部有浮动的父盒子形成BFC他就能关闭住内部的浮动overflowhidden
16.相对定位 .box1{ position:relative; top: 100px; left: 100px; } 相对自己原来的位置进行位置调整 相对定位的元素本质还是原来的位置只不过渲染在新的地方产生影子不会对页面其他元素产生影响。 微调元素位置调那些不怕被覆盖的地方。
17.绝对定位 .box1{ position:absolute; top: 100px; left: 100px; } 与相对定位不同就是实际不是影子会覆盖其他。 绝对定位的盒子会以自己祖先元素中离自己最近的拥有定位属性的盒子当作基准点。通常用相对定位作基准点。子绝父相。 父盒子写positionabsolute但不动不设置left啥的子盒子绝对定位就能以该父盒子进行绝对定位了。
做垂直居中 .box{position:absolute; top: 50%; /上边线是百分之50上边线居中了/ left: 50%; margin-top-自己高度的一半; /往上拉回了自己高度的一半/ margin-left: -自己宽度的一般;} 此时不能用margin: 0 auto;了因为绝对定位脱离了标准文档了。
z-index属性数值大的覆盖数值小的。
三大作用 覆盖压盖效果 结合css精灵 结合js实现动画
18.固定定位 position:fix; 页面卷动它也不变只以页面为参考点脱离标准文档流可以用来做返回顶部顶部导航栏不动z-index:999、楼层导航等等。
19.css提供了很多小属性它的目的是层叠大属性类似于继承多态的感觉。
20.边框border有很多种玩法变虚线、变三角、变圆角。
21.box-shadow可以设置阴影.
22.背景与渐变background系列属性用时看
23.变形transform旋转变形、位移变形跟相对定位一样兼容性不如相对定位、3d变形旋转、空间移动
24.transition 过度属性一个元素在不同样式之间变化自动添加“补间动画”。其他用时再看
25.overflow overflow: auto与scroll在内容超出时浏览器均会显示滚动条但在元素没有超出时auto会隐藏滚动条scroll依旧显示滚动条但是禁用该滚动条
26.在CSS样式中很多样式名前缀都带有’-webkit-‘但在CSS提供的API中查询不到这些样式名
原因CSS3中新增了一些属性针对不同的浏览器规定其内核名称让它们可以对这些新增属性进行解析。
解释前缀为“-webkit-”的属性能够在以webkit为内核的浏览器中正常使用。
各个不同浏览器内核列表-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性-o代表Opera私有属性 使用原因为了浏览器兼容某些css的API只支持IE10例如transform直接使用为W3C的标签对IE9不支持要兼容浏览器需要添加前缀 { transform:translate(10,10) // W3c标准 -webkit-transform:translate(10,10) // Safari Chrome -moz-transform:translate(10,10) // firefox -ms-transform:translate(10,10) // IE9 -o-transform:translate(10,10) // opera }
30.calc() 注意±前后必须有空格如calc(100% - 20), calc(100%-20)没有空格写法错误
31.css做文字后跟省略号效果 text-overflow: ellipsis; // 显示省略号代表被修剪的文本 white-space: nowrap: // 文本不换行 overflow: hidden;
32.css做文字换行效果 width: 300px; // 设置宽 word-break: break-word; // 超过后换行
后续将持续更新…
