css学习教程和资料

CSS - 技术教程文章

记录一个CSS黑科技属性--pointer-events【代码】

最近在工作中遇到一个需要只读的表单字段也要可以提交过去，之前只读都是用的disabled，加上这个属性之后，表单字段就提交不过去了。后来发现可以换成readOnly，但是readOnly只支持 input，select不支持，所以就得想别的办法。然后就发现了CSS里pointer-events属性，简直是个黑科技。以下是pointer-events的介绍CSS pointer-events 属性实例设置元素是否对指针事件做出反应： div.ex1 {pointer-events: none; }div.ex2 {point...

css 书写顺序以及font简写顺序【代码】

//css书写顺序：1.位置信息position display float overflow clear//css书写顺序：2.大小 width height padding margin border//css书写顺序：3.文字信息//css书写顺序：4.文本信息 text-align:center;//css书写顺序：5.背景//css书写顺序：6.css3属性 font: normal normal normal 14px/50px Roboto; //倾斜，小体大写字母，加粗，字号大小/行高字体（可写多个）

CSS盒子模型——box-sizing属性、margin叠加和传递问题【代码】【图】

盒子模型：盒子模型包括content（内容区域）->padding（内边距）->border（边框）->margin（外边距）。注： 1、背景颜色会填充到margin以内的区域。 2、文字会在content区域。 3、padding不能出现负值，margin可以出现负值。标准盒子模型：标准盒子模型的width和height设置的宽度和高度指的是content区域的大小。box-sizing属性：box-sizing属性翻译就是盒尺存属性。即改变盒子模型的显示形态。默认值：content-box，即标准盒子模...

HTML+CSS方块跳动【代码】

HTML+CSS方块跳动核心思想是将小方块放在隐形的大方块上，让大方块转动（rotate）带动小方块转动将4个方块分别装上animation，注意：这4个方块的动画总时长必须是相等的，然后再用infinite无限循环，可以用不同数量的方块，但时间一定要掐好。初学可以copy过去慢慢琢磨，我也是琢磨了好久才弄出来的！核心思想是将小方块放在隐形的大方块上，让大方块转动（rotate）带动小方块转动将4个方块分别装上animation，注意：这4个方块的...

「HTML+CSS」--自定义按钮样式【003】【代码】【图】

前言Hello！小伙伴！首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～哈哈自我介绍一下昵称：海轰标签：程序猿一只｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料...

CSS弹性盒子Flex【代码】【图】

弹性盒子可以控制内部元素的布局display:flex 元素成为弹性容器，他的子元素成为弹性子元素弹性子元素像块级元素一样填充可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，高度由他们的内容决定。利用弹性盒子写一个菜单栏 /*外部容器设置为弹性*/.site-nav {display: flex;padding: .5em;background-color: #5f4b44;list-style-type: none;border-radius: .2em;}.site-nav > li {margin-top: 0;}.site...

vue中如何使用animate.css库【图】

文章目录 1. 如何vue中使用keyframe动画2. 如何自定义动画样式？3.如何使用animate.css库动画4.如何解决新页面无动画问题1. 如何vue中使用keyframe动画举个例子: 效果: 隐藏的时候，有放大缩小的效果，显示的时候也有放大缩小的效果。 2. 如何自定义动画样式？看下图操作即可:既然可以自定义vue的动画样式，那同理就可以使用vue的animate.css库 3.如何使用animate.css库动画动画首页网址: https://animate.style/4.如何解决新页...

「HTML+CSS」--自定义按钮样式【002】【代码】【图】

CSS【图】

目录CSS作用CSS语法例子CSS代码风格样式格式出写样式大小写空格规范CSS选择器的作用选择器的分类基础选择器id选择器与类选择器区别四种基础选择器区别标签选择器类选择器语法结构id选择器（唯一）通配符选择器 CSS作用CSS语法规范选择器{ color:red; } 属性: 结尾; 例子有点意思 CSS代码风格样式格式出写采用展开式样式大小写推荐小写空格规范例子： p {} color: blue CSS选择器的作用选择标签来使用选择器的分类基础选择器 ...

快速掌握CSS三大特性【图】

直奔主题，CSS的三大特性：继承性，层叠性，优先级一、继承性作用：给父元素设置的一些属性，子元素和后代元素也有权使用注意：并不是所有的属性都能够继承，只有color / font- / text- / line 开头的属性才可以继承例： <style> div{ color: blueviolet; font-size: 20px; text-align: center; line-height: 20px; background-color: ...

10 个最佳实践来改良你的 CSS【图】

1. 你真的需要框架吗？首先，决定是否真的需要使用 CSS 框架。现在，有许多替代轻量级健壮（robust）框架的方法。通常，你不需要使用框架中的所有选择器，所以你的包中会包含死代码（dead code）。如果你只对按钮使用样式，可以将它们加入到你的 CSS 文件，并去掉其余的样式。另外，你可以通过使用 DevTools 的 coverage 标识未使用的 CSS 规则。可以在 Chrome 控制面板中搜索 Coverage 来打开它。你可以通过快捷键 Ctrl + Shift...

Xpath 和 CSS的九大区别，附代码预防Xpath的坑【代码】

练习链接 http://cdn1.python3.vip/files/selenium/sample1.html 示例视频和讲解 https://www.bilibili.com/video/av64421994/?p=31&spm_id_from=pageDriver 原文Xpath文档 http://www.python3.vip/tut/auto/selenium/xpath_1/ 以下是个人手抄整理点 1.xpath 绝对路径里 Xpath 里/html 表示根节点 /html/body/div 等价于 css html>body>div 2.Xpath可以根据属性来选择元素 [@属性名=‘属性值’]；注意前面有@，属性值必须用单引号或...

CSS初体验【代码】【图】

CSS初体验一、何为CSS二、选择器id选择器class选择器三、CSS的应用外部样式表四、常用的美化颜色尺寸对齐五、盒子模型六、定位staticrelativefixedabsolute 七、溢出八、浮动九、不透明度十、组合选择器后代选择器：子选择器总结一、何为CSS CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。因此CSS能够将页面的内容进行美化，给浏览者更好的视觉感受和...

CSS3选择器 :nth-child()的用法【代码】【图】

:nth-child() 一、偶数:nth-child(2n)二、奇数 :nth-child(2n-1)三、第6个开始的，直到最后:nth-child(n+6)四、选择第1个到第6个 :nth-child(-n+6)五、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9):nth-last-child() 选择器 :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式。提示：请参...

CSS 浮动的作用以及高度塌陷的解决方案BFC【图】

前言　　浮动属性是css样式中非常重要的属性，网页的导航条和左右导航栏等都靠浮动属性来完成。浮动属性不仅能让文字拥有环绕效果，同时，其浮动特性在一些布局中还起到了至关重要的作用。　　一、float浮动是什么?　　浮动是什么?　　在正常div布局中，每个div块元素都占据完整的一行，因此下一个div元素会出现在上一个div元素的下一行，整个布局是由上到下依次排列的。　　浮动则打破了这样的排布。浮动属性会让本该从上到下排列...

关于CSS3 box-sizing属性的详细案例讲解【代码】【图】

关于 CSS3的box-sizing 属性还可以参考W3school box-sizing属性的语法和其他css属性一样，该属性有三个可取的值，具体语法： box-sizing: content-box|border-box|inherit;以下案例都是基于固定宽高的容器为例。 content-box（默认） box-sizing 属性的默认值就是 content-box。实例：<ul class="box"><li class="box-item content-box"></li><li class="box-item border-box"></li><li class="box-item inherit"></li> </ul>.bo...

Xpath CSS Selector【图】

xpath 和 css selector 方式的内容提取介绍 1.定位元素在目标网页中，找到相应的元素，右键检查元素，看到元素的代码信息，找到自己需要的，进行右击，这时候有两种方式可以获得标签的位置的具体描述方式：使用 copy selector使用 copy XPath 图示：这两种复制的路径有什么区别（以tr为例）? copy XPath复制出来的路径： /html/body/section/section/section/article/table[1]/tbody/tr[1] copy selector复制出来的： body > s...

css3基础【代码】【图】

CSS3 基础入门(一) 说明 CSS3 中相对于CSS2来说，新增加了很多的内容，其中较为常用的包括下面几点：选择器自定义字体(嵌入字体)和字体图标边框属性背景属性文本阴影和盒子阴影颜色属性渐变(线性渐变、径向渐变、重复渐变)过渡2d变换3d变换动画新的布局方案(flex 布局、多列布局、移动端布局、grid布局)在本篇文章当中，列出的都是一些css3当中新增加的较为常用并且兼容性较好的属性。选择器在这里主要说的是两部分选择器：属性...

CSS学习总结【代码】【图】

文章目录前言一、CSS是什么？二、CSS 语法2.1 选择器2.1.1 id 选择器2.1.2 class 选择器三、CSS 如何生效3.1 外部样式表3.2 内部样式表3.3 内联样式3.4 级联的优先级四、颜色, 尺寸, 对齐4.1 颜色4.2 尺寸4.3 对齐五、盒子模型六、边框与边距6.1 边框6.2 边距七、定位7.1 static7.2 relative7.3 relative7.4 absolute 八、溢出九、浮动十、不透明度十一、组合选择器11.1 后代选择器11.2 子选择器十二、伪类和伪元素总结前言前...

CSS - 技术教程分类

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS Backgrounds(背景) CSS Text(文本) CSS Fonts(字体) CSS 链接(link) CSS 列表 CSS Table(表格) CSS 盒子模型 CSS Border(边框) CSS 轮廓（outline）属性 CSS margin(外边距) CSS padding（填充） CSS 尺寸 (Dimension) CSS Display(显示) CSS Position(定位) CSS Overflow CSS Float（浮动） CSS 对齐 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 提示工具 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网页布局 CSS 总结 CSS 实例 Viewport 媒体查询图片视频(Video) 框架 CSS 参考手册 CSS 选择器 CSS Web安全字体 CSS 动画 CSS 单位 CSS 颜色 CSS 颜色值 css 全部

CSS - 最热教程

设置DIV的背景色有哪几种方法 js批量设置元素样式和封装似于jquery的...HTML5实战与剖析之CSS选择器——getEle...css如何设置文本元素内的空白填充？如何压缩css文件 cssright属性怎么用 cssanimation-timing-function属性怎么...jquery设置内联样式css()jQuery+HTML5+CSS3制作支持响应式布局时...jquery实现动态改变css样式的方法分析