石家庄企业自助建站系统,ui毕业设计代做网站,视频怎么转wordpress,南通公司网站模板建站要说css的变化那是发展比较快的#xff0c;新增的选择器也很多#xff0c;而且还有很多都是比较实用的。这里举出一些案例#xff0c;看看你平时都是否用过。
1 新增的一些写法#xff1a;
1.1 导入css
这个是非常好的一个变化。这样可以让我们将css拆分成公共部分或者多…
要说css的变化那是发展比较快的新增的选择器也很多而且还有很多都是比较实用的。这里举出一些案例看看你平时都是否用过。
1 新增的一些写法
1.1 导入css
这个是非常好的一个变化。这样可以让我们将css拆分成公共部分或者多个模块化的css,然后在需要的地方按需导入实用。
styleimport url(css/style.css);/style
1.2 变量和函数
变量这个自然不用多说大家用的可能比较多但是大家也要注意变量的作用域问题。
函数这里重点谈一下。
attr函数函数用于获取被选中元素的某个 HTML 属性值并在样式文件中使用该值。
官方说主要是为了给伪类中content做内容使用经过测试color属性使用attr我这里不生效。其余可以生效。 div classbtn2 data-colorred width200px按钮/div....btn2 {width: attr(width);height: 30px;line-height: 30px;text-align: center;color: #fff;background-color: var(--parimaryColor);background-color: attr(data-color); /*这里的颜色不被支持*/cursor: pointer;}rgb/rgba函数这两个大家可能用的比较多。不过还能像大家在less或者这sass里面直接写十六进制值。
background-color: rgba(100, 1000, 100, 0.5);background-color: rgba(red, 0.5); // 这样写不被支持
background-color: rgba(#f60, 0.5); // 这样写不被支持
计算类函数这主要包括calc,min,max等
width : max ( 10vw , 4em , 80px );
渐变颜色类函数这个后面专门出个文章再来写。
三角函数 sin/cos等用的不多。
counter()和counters(): 计数器
stylearticle {counter-reset: paragraph; /* 初始化计数器 */}article p:before {content: counter(paragraph) . ; /* 显示计数器值 */counter-increment: paragraph; /* 每个段落后计数器递增 */}/style/headarticlep这是第一段。/pp这是第二段。/pp这是第三段。/p/article2 新的选择器
2.1 并集选择器(交集选择器)
这是我自己取得名字写法就是必须没有空格连在一起表示多个选择器同时存在才会生效的选择器。
style.style1{background-color: #f60;width: 100px;height: 100px;}.style2 {background-color: red;width: 100px;height: 100px;}.style1.style2 {background-color: green;width: 100px;height: 100px;}/style
/headdiv classstyle1风格样式1/divdiv classstyle2风格样式2/div/divdiv classstyle1 style2两个风格同时存在/div
2.2 伪类选择器
1 :root 选择文档的根元素即html元素
2 :empty 选择没有子元素的元素包括文本节点。注意空格和换行符也被视为子节点因此这些元素不会被视为空。
3 :has() 它允许你选择包含特定子元素的父元素。这个选择器可以用于更精确地控制样式而不需要改变HTML结构。
/* 选择包含有.child类的元素 */
.parent:has(.child) {/* 样式规则 */
}
4 :focus 选择获得焦点的元素 常用于表单输入元素如文本框、单选按钮、复选框等上以指示当前哪个元素处于激活状态
5 :enabled和:disabled 分别选择启用和禁用的表单元素如输入框、按钮等 这对于提高表单的可用性和清晰度非常有用
6 :checked 选择被选中的input typeradio、input typecheckbox或option元素 这允许你为选中状态提供自定义样式
7 :read-only和:read-write 分别选择只读和可编辑的表单元素如文本框 这些伪类可以帮助你区分不同状态的表单元素并相应地调整它们的样式
8 :valid和:invalid 分别选择通过验证和未通过验证的表单元素 这些伪类对于实现表单验证反馈非常有用可以直观地告诉用户哪些字段需要更正 9 :required和:optional 分别选择被标记为必填和可选的表单元素 这些伪类可以帮助你为不同类型的表单字段提供不同的样式或提示
2.3 浏览器滚动条相关
::-webkit-scrollbar系列 注意也支持相关伪类比如:hover也可以通过父类约束范围。 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-button: 两端的按钮 ::-webkit-scrollbar-thumb 滚动条里面的小方块能向上向下移动或往左往右移动取决于是垂直滚动条还是水平滚动条 ::-webkit-scrollbar-track 滚动条的轨道里面装有 Thumb ::-webkit-scrollbar-button 滚动条的轨道的两端按钮允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道滚动条中间部分除去 ::-webkit-scrollbar-corner 边角即两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
::-webkit-scrollbar {// width: 0 !important;background: transparent;// height: 0 !important;}::-webkit-scrollbar-button {// width: 0 !important;background-color: transparent;// height: 0 !important;}::-webkit-scrollbar-corner {background-color: transparent;}::-webkit-scrollbar-thumb {background: #333; /* 滚动条颜色 */border-radius: 2px; /* 定义滑块的圆角 */}/* 设置滚动条轨道的颜色 */::-webkit-scrollbar-track {background: transparent; /* 滚动条轨道颜色 */}/* 定义滚动条滑块悬停样式 */::-webkit-scrollbar-thumb:hover {background-color: #333; /* 定义滑块在悬停状态下的颜色 */}
2.4 特殊伪元素选择器
1 ::before 和 ::after 这个和常见可以在元素的内容前后插入生成的内容。
2 ::first-letter 和 ::first-line 可以选择文本的第一个字母或者第一行。
3 :focus-within 当元素本身或其后代元素获得焦点时 :focus-within 伪类的元素就会有效。 style/* 定义表单样式 */.form-container {border: 2px solid #ccc;padding: 20px;margin: 20px;}/* 当表单内的任意元素获得焦点时改变表单容器的边框颜色 */.form-container:focus-within {border-color: blue;}/style!-- HTML 结构 --div classform-containerlabel forusername用户名:/labelinput typetext idusername nameusername /label foremail邮箱:/labelinput typeemail idemail nameemail /button typesubmit提交/button/div
4 :focus-visible 当元素通过键盘例如 Tab 键获得焦点时显示不同的样式
style/* 定义表单样式 */.form-container {border: 2px solid #ccc;padding: 20px;margin: 20px;}/* 当表单内的任意元素获得焦点时改变表单容器的边框颜色 */.form-container:focus-within {border-color: blue;}/* 当元素通过键盘获得焦点时显示不同的样式 */[tabindex]:focus-visible,input:focus-visible,button:focus-visible {outline: 2px solid red;background-color: yellow;}/style!-- HTML 结构 --div classform-containerlabel forusername用户名:/labelinput typetext idusername nameusername /label foremail邮箱:/labelinput typeemail idemail nameemail /button typesubmit提交/button/div
5 :target 是一个 CSS 伪类用于选择当前 URL 中带有片段标识符即锚点的目标元素。当用户点击链接中的锚点时该伪类可以选择并样式化目标元素。
6 :selection 是一个 CSS 伪元素用于选择文档中被用户选中的文本。它可以用来定义选中文本的样式如背景色和文字颜色。
3 新增的属性
css3 甚至后面的css4预案也新增了一些css属性
其中flex 和grid后面开专题去讲。
1 gap
在CSS中gap 属性主要用于Flexbox和Grid布局中用于控制项目之间的空间。
2 hyphens
属性用于控制文本中的自动断字即自动插入连字符。这对于长单词或跨行的文字尤其有用可以提高文本的可读性和排版质量。这个很有用。他有三个属性值
p { hyphens: none; } // 不断行
p { hyphens: manual; } // 只在手动插入的连字符位置进行断字。
p { hyphens: auto; } // 自动在合适的位置插入连字符以实现断字。 stylep {hyphens: auto; /* 启用自动断字 */word-wrap: break-word; /* 允许长单词换行 */}/stylepThis is a sample paragraph with a verylongwordthatshouldbebroken todemonstrate the hyphens property./p会根据页面宽度自适应断行
3 content-visibility
这个属性可以延迟渲染非首屏内容优化加载性能。
4 控制文本方向
unicode-bidi: 该属性用于控制文本在双向文本环境中的重写行为它有多个值可以选择比如 normal, isolate, isolate-override, embed, embed-override 等。
unicode-bidi 通常与 direction 属性一起使用以更精细地控制文本的方向。 text-orientation: 它可以取值 mixed 或 upright。
writing-mode: 属性值有
horizontal-tb: 水平书写模式默认值。 vertical-rl: 从右向左的垂直书写模式。 vertical-lr: 从左向右的垂直书写模式。
5 文本相关
1 -webkit-line-clamp多行文本溢出但要注意其Webkit特性的局限性。
.flex-multi-line-ellipsis {display: flex;flex-direction: column;line-clamp: 3; /* 需要JavaScript支持 */overflow: hidden;
}
2 text-decoration属性 这个属性以前就有只不过多了很多修饰的属性 text-decoration-line设置文本装饰线的位置 none指定文字无装饰 underline 指定文字装饰下划线 overline 指定文字装饰上划线 line-through 指定文字的装饰是贯穿线 text-decoration-style 文本装饰线条形状 solid 实线 double 双实线 dotted 点状线条 dashed 虚线 wavy 波浪线 text-decoration-color 文本装饰线条颜色
3 文本描边(仅webkit内核浏览器能支持)
-webkit-text-stroke-width设置文本描边的宽度写长度值 -webkit-text-stroke-color 设置文本描边的颜色写颜色值 -webkit-text-stroke 复合属性设置文字描边的宽度和颜色值
4 shape-outside: 允许文本环绕不规则形状的元素为文本布局和设计开辟了新的可能性。
5 text-align-last: Text-align-last 指定块或行的最后一行强制换行符之前如何在其容器内对齐。
6 outline 轮廓
outline-width 外轮廓宽度 outline-color 外轮廓颜色 outline-style 外轮廓风格 none 无轮廓 dotted 点状轮廓 solid 实线轮廓 double 双实线轮廓 outline-offest 设置外轮廓与边框的距离正负值都可设置
outline:50px solid blue
7 bancground渐变色支持
webkit-background-cliptext 背景呈现在文字上。
border-image: 实现描边效果,但是不支持圆角。 border-image-source: linear-gradient(to right, red, #578aef); border-image-slice: 1; /* 可以调整以控制渐变重复的次数 */ border-image-repeat: stretch; /* 控制边框图片的重复方式 */ style.box2 {width: 400px;height: 100px;margin: 100px auto;border-radius: 10px;/* 去除之前的边框设置 *//* 添加 border-image 属性 */border: 5px solid;border-image-source: linear-gradient(to right, red, #578aef);border-image-slice: 1; /* 可以调整以控制渐变重复的次数 */border-image-repeat: stretch; /* 控制边框图片的重复方式 */}/stylediv classbox2/div
1. 线性渐变Linear Gradients 线性渐变是从一个方向到另一个方向的渐变效果。你可以指定一个起点和一个方向或一个角度并且至少定义两个颜色结点。 to right从左到右。 to bottom right从左上到右下。 角度如 45deg 表示从45度方向开始渐变。
div {background-image: linear-gradient(to right, red, yellow);
}
多个叠加
stylebody {background-color: #f60;}.rectangle {width: 305px;height: 75px;background: linear-gradient(-45deg, transparent 52px, #ffffff 0) bottomright,linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;background-size: 100% 100%;background-repeat: no-repeat;}/style/headbodydiv classrectangle/div/body
2 径向渐变Radial Gradients
径向渐变是从一个中心点向外扩散的渐变效果。
circle圆形。 ellipse椭圆形。 closest-side形状大小直到最近的一边。 farthest-side形状大小直到最远的一边。 closest-corner形状大小直到最近的角落。 farthest-corner形状大小直到最远的角落。
div {background-image: radial-gradient(circle, red, yellow, green);
}
3 圆锥渐变Conic Gradients
圆锥渐变是围绕一个中心点旋转的渐变效果。
div {background-image: conic-gradient(from 45deg, red, yellow, green, blue);
} 下面举几个例子
1 渐变文字 .box {width: 400px;background-image: linear-gradient(red, yellow, green);font-size: 80px;text-align: center;line-height: 200px;font-weight: bold;color: transparent;font-size: 50px;-webkit-background-clip: text;}
2 渐变边框 style.box2 {position: relative;width: 400px;height: 100px;margin: 100px auto;border-radius: 10px;background: #fff;background-clip: padding-box;border: 5px solid transparent;}.box2::before {content: ;position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1;margin: -5px;border-radius: 10px;background: linear-gradient(to right, red, #578aef);}.box1 {width: 400px;background-image: linear-gradient(to right, red, #578aef);font-size: 80px;text-align: center;line-height: 100px;font-weight: bold;color: transparent;-webkit-background-clip: text;}/style/headbodydiv classbox2div classbox1渐变文字/div/div/body
3 网格背景 8 css事件相关
1 pointer-events 控制事件响应 pointer-events: auto;元素是鼠标事件的目标事件会被正常处理。 pointer-events: none;元素不是鼠标事件的目标点击事件会穿过该元素并在其后面的元素上触发。 pointer-events: visiblePainted;只适用于 SVG类似于 auto但不包括某些不可见的图形元素。
2 scroll-behavior 该属性定义了溢出元素的滚动行为只需简单的声明即可实现平滑的滚动动画
3 user-select: 控制用户是否可以选择元素内的文本从而更好地控制用户交互和界面设计
9 变形相关
1 Object-fit 指定如何调整元素内容的大小以适合其容器、保留纵横比并控制溢出行为1
2 Transform: 支持的函数也比较多大家常用的有rotate旋转/scale缩放/translate移动等通常结合动画的比较多。
transform垂直水平居中 .centered-element {width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #f60;}
10 css滤镜
filter系列支持的函数有:blur模糊/grayscale灰度这个大家应该用的比较多(重大祭奠会用)
backdrop-filter: 此属性将图形效果例如模糊或色移应用于元素内容后面的区域。它非常适合创建磨砂玻璃效果或为元素添加微妙的视觉增强效果。
mix-blend-mode此属性控制元素的内容与其背景混合的方式提供与图形设计软件中类似的各种混合模式
11 css动画部分
这部分我后面会出专题来讲。包括前面提到的flex弹性盒子,grid布局等这些相关内容都会分专题来讲。
