![](https://img-blog.csdnimg.cn/20210325182410271.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 55
关于CSS
Continue丶
努力变得更好一点
展开
-
CSS用户界面样式
CSS用户界面样式1.鼠标样式(cursor)设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白 默认pointer小手move移动text文本not-allowed禁止2.轮廓线 (outline)给表单添加outline:0;或者outline:none;样式之后,可以去掉默认的选中蓝色边框。input { outline:none;}3.防止拖拽文本域 (resize)实际原创 2021-03-10 19:48:37 · 151 阅读 · 0 评论 -
CSS画三角形
画三角形当我们把一个元素不加宽高,而给它加上不同颜色的边框时,就可以得到如下图形.example { width: 0; height: 0; line-height: 0; /* 照顾兼容性 */ font-size: 0; /* 照顾兼容性 */ border-top: 100px solid pink;原创 2021-03-09 22:42:00 · 84 阅读 · 0 评论 -
字体图标
字体图标字体图标的产生精灵图的使用是有许多优点的,但是缺点也很明显比如:图片文件比较大图片本身放大缩小会失真一旦图片制作想更改很复杂此时,有一种技术出现很好解决这问题,就是字体图标 iconfont字体图标:展示的是图标,本质是文字字体图标的优点轻量级:一个图标比一系列图像要小,一旦字体加载,图标马上渲染出来,减少服务器请求灵活性:本质是文字,可以改变颜色、大小等效果兼容性:几乎支持所有浏览器字体图标使用1. 字体图标下载推荐网站icomoon字库:https原创 2021-03-09 22:17:36 · 220 阅读 · 0 评论 -
精灵图
精灵图为什么需要精灵图?一个网页中往往会应用很多小背景作为装饰,当网页中图像过多时,服务器会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面地加载速度。因此为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术。核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了。精灵图的使用使用精灵图的核心总结:精灵图主要针对小的背景图片使用主要借助于更改背景图片的位置来实现截取 background-position原创 2021-03-09 21:24:47 · 108 阅读 · 0 评论 -
CSS元素的显示与隐藏
元素的显示与隐藏类似网站的广告,当我们点击关闭时就不见了,但是当我们重新刷新页面,会重新出现。其本质就是:让一个元素在页面中隐藏或显示出来CSS中有三种属性能让元素显示与隐藏,分别是display、visibility、overflow1.display属性display属性用于设置一个元素应该如何显示值作用display:none隐藏对象display:block显示对象display:blockv除了有转换为块级元素之外,同时还有显示元素的意思特性:d原创 2021-03-09 18:08:22 · 112 阅读 · 0 评论 -
CSS定位(position)
定位(position)为什么需要定位定位组成相对定位绝对定位固定定位子绝父相的由来总结拓展为什么需要定位?在页面布局中有些情况用标准流和浮动难以实现,例如:某个元素可以自由地在一个盒子内移动,并且压住其他盒子当我们滚动窗口的时候,盒子是固定屏幕某个位置的而定位可以达到这些效果。定位组成定位=定位模式+边偏移1.定位模式定位模式用于决定元素的定位方式,它通过CSS的position属性来设置,如下:值语义static静态定位rel.原创 2021-03-08 21:55:21 · 243 阅读 · 0 评论 -
CSS浮动(float)
浮动(float)网页布局的本质:用CSS来摆放盒子,把盒子摆放到相应位置本篇将介绍浮动,了解在CSS布局中为什么需要浮动,浮动又是什么,怎样使用,它有什么特性,以及清除浮动。传统网页布局的三种方式:普通流(标准流)浮动定位为什么需要浮动?有很多布局效果,标准流没有办法完成,此时就可以利用浮动完成布局,因此浮动可以改变元素标签默认的排列方式。浮动最典型的应用:可以让多个块元素一行内排列显示。网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。步入正题.原创 2021-03-07 00:15:55 · 228 阅读 · 0 评论 -
圆角边框、盒子阴影
圆角边框在CSS3中新增了圆角边框的样式border-radius属性用于设置元素的外边框圆角语法:border-radius:length参数值可以是数值或百分比的形式如果是正方形,想要设置成一个圆,数值改为宽度或长度一半即可如果是个矩形,设置为高度一半即可该属性是个简写属性,可以分开四个角写border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-rad.原创 2021-03-06 22:50:29 · 89 阅读 · 0 评论 -
盒子模型
盒子模型网页布局的核心本质:即使利用CSS摆盒子所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。封装周围的HTML元素包括:边框、内边距、外边距、和实际内容。1.边框2.内边距3.外边距1.边框(border)border可以设置元素的边框,三部分组成:边框粗细、边框样式、边框颜色。属性作用border-width定义边框粗细,单位是pxborder-style定义边框的样式border-color定义.原创 2021-03-05 21:58:09 · 128 阅读 · 0 评论 -
CSS的三大特性
CSS的三大特性CSS有三个非常重要的特性:层叠性、继承性、优先级1.层叠性2.继承性3.优先级1.层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖另一个冲突的样式,层叠性主要解决样式冲突的问题层叠性原则:样式冲突,遵循的原则就是就近原则,那个样式离结构近,就执行哪个样式样式不冲突,不会层叠<style> p { color: yellow; font-size: 25px; } .原创 2021-03-04 22:10:33 · 182 阅读 · 2 评论 -
CSS背景用法的总结
CSS背景用法的总结背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。背景颜色背景图片背景平铺背景图片位置背景图像固定背复合写法背景色半透明1.背景颜色background-color 属性定义了元素的背景颜色语法:background-color: 颜色值;一般情况下元素背景颜色为transparent(透明)2.背景图片background-image 属性定义了元素的背景图片。实际开发常见于logo或一些装饰性对的小图片或者是超大的背景图.原创 2021-03-04 21:00:00 · 212 阅读 · 1 评论 -
CSS的元素显示模式总结
CSS的元素显示模式总结元素显示模式就是元素以什么方式进行显示,比如div独占一行,又如一行可以放多个span。作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。HTML元素一般分为块元素、行内元素、行内块元素。块元素行内元素行内块元素总结 1.块元素常见的块元素有 <h1>~<h6>、<p> 、<div>、<ul>、<ol> 、<li>等特点:比较.原创 2021-03-04 16:21:25 · 141 阅读 · 1 评论 -
CSS复合选择器总结
复合选择器总结CSS包括基础选择器和复合选择器,而复合选择器则是建立在基础选择器之上,对基本选择器进行组合形成的。常用复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。后代选择器子选择器并集选择器伪类选择器后代选择器又称为包含选择器,可以选择父元素里面的子元素。写法就是把外层标签写在前面,内层标签依次写在后面,中间通过空格隔开。语法:元素1 元素2 { 样式声明 }如:ul li { color:red } /* 选择ul 里 li 标签 颜色为红色 */注:.原创 2021-03-04 15:31:56 · 190 阅读 · 1 评论 -
CSS文本属性总结
CSS文本属性总结CSS Text属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。文本颜色文本对齐文本装饰文本缩进行间距color(文本颜色) 表示属性值预定义颜色值red、green、blue等十六进制#FF0000、#18D021等RGB代码rgb(255,0,0)或rgb(100%,0,0)等开发中做常用的是十六进制text-align(文本对齐) 属性值解释left(默认值).原创 2021-03-03 21:43:30 · 146 阅读 · 2 评论