广州高端网站制作公司哪家好,深圳家装,2345网址导航浏览器主页,用wordpress还是discuz个人主页#xff1a;学习前端的小z 个人专栏#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结#xff0c;欢迎大家在评论区交流讨论#xff01; 文章目录 CSS 常用样式属性1 CSS 三角形2 CSS 用户界面样式2.1 什么是界面样式2.2 鼠标… 个人主页学习前端的小z 个人专栏HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结欢迎大家在评论区交流讨论 文章目录 CSS 常用样式属性1 CSS 三角形2 CSS 用户界面样式2.1 什么是界面样式2.2 鼠标样式 cursor2.3 轮廓线 outline2.4 防止拖拽文本域 resize 3 CSS 阴影3.1 盒子阴影3.2 文字阴影 4 透明度opacity 与 rgba5 vertical-align了解6 CSS content 计数器了解 CSS 常用样式属性
1 CSS 三角形
网页中常见一些三角形使用 CSS 直接画出来就可以不必做成图片或者字体图标。
一张图 你就知道 CSS 三角是怎么来的了, 做法如下
div {width: 0;height: 0;line-height: 0;font-size: 0;border: 50px solid transparent;border-left-color: red;
}案例提示框
2 CSS 用户界面样式
2.1 什么是界面样式
所谓的界面样式就是更改一些用户操作样式以便提高更好的用户体验。
2.2 鼠标样式 cursor
li {cursor: pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
值描述default默认光标通常是一个箭头auto默认。浏览器设置的光标。crosshair光标呈现为十字线。pointer光标呈现为指示链接的指针一只手move此光标指示某对象可被移动。e-resize此光标指示矩形框的边缘可被向右东移动。ne-resize此光标指示矩形框的边缘可被向上及向右移动北/东。nw-resize此光标指示矩形框的边缘可被向上及向左移动北/西。n-resize此光标指示矩形框的边缘可被向上北移动。se-resize此光标指示矩形框的边缘可被向下及向右移动南/东。sw-resize此光标指示矩形框的边缘可被向下及向左移动南/西。s-resize此光标指示矩形框的边缘可被向下移动南。w-resize此光标指示矩形框的边缘可被向左移动西。text此光标指示文本。wait此光标指示程序正忙通常是一只表或沙漏。help此光标指示可用的帮助通常是一个问号或一个气球。
2.3 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后就可以去掉默认的蓝色边框。
input {outline: none; }2.4 防止拖拽文本域 resize
实际开发中我们文本域右下角是不可以拖拽的。
textarea{ resize: none;}3 CSS 阴影
3.1 盒子阴影
CSS3 中新增了盒子阴影我们可以使用 box-shadow 属性为盒子添加阴影。
语法
box-shadow: h-shadow v-shadow blur spread color inset;取值
值说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小color可选。阴影的颜色。
注意
默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效盒子阴影不占用空间不会影响其他盒子排列。
3.2 文字阴影
在 CSS3 中我们可以使用 text-shadow 属性将阴影应用于文本。
语法
text-shadow: h-shadow v-shadow blur color;取值
值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可选。阴影的颜色。
4 透明度opacity 与 rgba
在 CSS 中我们可以使用 opacity 属性设置盒子透明度。
语法
opacity: value;取值
值描述value指定不透明度。从0.0完全透明到1.0完全不透明
5 vertical-align了解
CSS 的 vertical-align 属性使用场景 经常用于设置图片或者表单(行内块元素和文字垂直对齐。
官方解释 用于设置一个元素的垂直对齐方式但是它只针对于行内元素或者行内块元素有效。
语法
vertical-align : baseline | top | middle | bottom取值
值描述baseline默认。元素放置在父元素的基线上。top把元素的顶端与行中最高元素的顶端对齐middle把此元素放置在父元素的中部。bottom使元素及其后代元素的底部与整行的底部对齐。length具体数值。正数偏移基线上移负数偏移基线下移 x-height小写英文字母x的高度。 x-height / 2x字母在一行的一般的高度中线就是以 x-height / 2 处为参考标准。 掌握图片、表单和文字对齐
图片、表单都属于行内块元素默认的 vertical-align 是基线对齐。 解决办法
给图片添加 vertical-align:middle | top| bottom 等。 提倡使用的把图片转换为块级元素 display: block;
6 CSS content 计数器了解
CSS 计数器通过一个变量来设置根据规则递增变量。
counter-reset - 创建或者重置计数器从0开始counter-increment - 递增变量content - 插入生成的内容counter() 函数 - 将计数器的值添加到元素
属性描述content使用 ::before 和 ::after 伪元素来插入自动生成的内容content: 第 counter(month) 月;counter-increment递增一个或多个值默认是自增1counter-increment: count1 2;这里是自增2counter-reset创建或重置一个或多个计数器从0开始counter-reset: count1; 单个counter-reset: count1 count2;多个counter()函数 - 将计数器的值添加到元素
