css学习_css背景属性及其应用

css背景属性及其应用 1.背景 2.背景简写 3.背景透明(css3) 4.背景缩放(css3) 5.多背景图片(css3) 6.凹凸文字效果…

CSS学习笔记-背景属性

一.背景尺寸属性: 1.含义: 背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小 2.格式: 1.1具体像素: background-size:300px 200px; 第一个参数:宽度第二个参数:高度 1.2百分比: background-size:80% 50%; 第一个参数:宽度第二个参数:高度 1…

1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block / inline-block displsy:none(隐藏元素,不保留位置) display:block(显示元素和块级元素显示模式的意思) display:inline-block(转换成行内块模式) visiblity:hidden(隐藏元素,位置仍然保留) visiblity:visible(显示元…

css中background背景属性概

css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/background:url(背景图片路径) no-repeat right top;/*不重复背景图片右上方显示*/ba…

复习-css边框和背景属性

css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-color:设置四条边框的颜色 border-left:在一个生命中设置所有左边框属性,对应还有border-right border-left-color:左边框颜色,对应还有border-right-color border-left-style:左边框样式,对应还有border-right-style…

【CSS学习】--- 背景

一.前言元素的背景区域包括:元素的内容.内边距和边框区域. CSS中用于设置背景的属性有: background-color 设置背景颜色 background-image 设置背景图片 background-repeat 设置是否以及如何重复背景图像 background-position 设置背景图的开始位置 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 background 简写属性,作用是将所有属性值写在一个声明中背景属性默认都不继…

CSS基本样式-背景属性

代码是敲出来的,建议一个一个过一遍背景属性背景颜色 background-color 背景颜色默认值是transparent(透明的) 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS基本样式</title> <style> body{ height: 1000px; /…

CSS 常用样式 – 背景属性

一.背景颜色 background-color 属性名:background-color 作用:在盒子区域添加背景颜色的修饰加载区域:在 border 及以内加载背景颜色属性值:颜色名.颜色值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="…

CSS代码示例-背景属性(background)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <html> <head> <title>背景属性 background</title> <style type=&quo…

【CSS学习】--- overflow属性

一.前言在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用CSS中的overflow属性来处理溢出的元素. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</t…

[1.1W字] 复习: CSS 9个背景属性&6种渐变函数, 学会可以手写实现AI中强大的"任意渐变"! #Archives009

Title/ CSS Background&Gradient完全指南 #Archives009 序: 关于 background 属性, 了解点CSS的人总会知道个大概. 但是你肯定多半还有点不会的吧(别在这装!), 比如你能手写CSS的6个渐变函数吗? 你知道bg-repeat中space和round的作用吗? 你能用纯CSS实现AI中的"任意渐变"吗? 这篇文章详细的整理了一遍CSS的Background和Gradient属性的各种诡异用法. 当然照顾萌新, 讲的会比较完整…

css学习_css补充知识

1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变 4.css 验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩 ----(节约空间,节省带宽) 6.旋转轮播图案例: 注意: 1.3d 旋转 3d 的translateZ 2.子盒子要一般要写transform-style属性更有3d效果 3.过渡做动画 4.父元素透视属性有3d效果…

【CSS学习】--- position属性

一.前言 1.HTML中的三种布局方式: 标准流(普通流):网页中默认的布局方式,即顺序布局浮动:float 定位:position 2.position属性的作用方式: 给position属性设置相应的值,可使元素脱离正常的标准流,并且可以使用top.right.left.bottom属性对元素进行定位,还可以使用z-index属性对元素的层叠顺序进行更改 position的五个属性值:static.relative.absolute.fixed.inherit 为方便,top.right.…

css里的背景属性有哪些，如何去使用哪些属性

分类:纯色背景背景图像 1.背景颜色 background-color : 任意合法的颜色和 transparent 2.背景图像 background-image : url(想要加载的图片) 3.背景图片平铺 background-repeat : repeat:默认值水平垂直方向都平铺 repeat-x : 水平方向平铺 repeat-y : 垂直方向平铺 no-repeat : 默认不平铺 4.背景图片的尺寸 background-size : value1 …

css学习_css用户界面样式

1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: outline:0/none(取消轮廓线) c.防止拖拽文本域 textarea{resize:none:} d.背景图片和背景颜色一起出现时,背景颜色在最底层. e.行内块和文字对齐 vertical-align 对块级元素不起作用图片和文字默认基线对齐 f.去除图片底侧空白缝隙 g. 溢出的…

【CSS学习】--- z-index属性

一.前言网页显示实际上是三维的,我们直观看到的有x轴和y轴,但在网页布局上还有一个z轴. 对于定位元素,我们使用top.right.left.bottom来实现元素在x-y平面上的定位,但为了表示布局的三维立体概念,还引入了z-index,z-index属性用来设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上方. z-index有三个参数: auto:默认值,相当于未设置z-index,可看作z-index: 0 number:无单位数字,用来设置z-index大小…

css学习_css三大特性

css三大特性 1.层叠性(就近原则) 2.继承性(和文字有关的会继承) 3.优先级 (权重问题) 权重:0,0,0,0 0001 ---标签选择器(注意:即使有20个标签选择器也不会比一个伪类选择器优先级高) 0010 ---类选择器,伪类选择器,属性选择器,伪元素选择器 0100 ---id选择器 1000 ---行内样式最大的权重: !important eg: color!important;(一旦出现优先级最大) 权重是可以叠加的对于复合选择器 eg:ul li …

css学习_css书写规范

css书写规 1.空格规范: div { color: red; } 2.选择器规范 3.属性属性定义要另起一行属性定义后必须以分号结尾 div { color: red; font-size: 14px; }…

css学习_css复合选择器

css复合选择器 a.交集选择器 (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器(可以选择到所以的子孙后代 :中间用空格隔开) .class h3{color:red} d.子元素选择器(中间用大括号 >; 选的是儿子,孙子啥的不算) div>span{color:red;} e.属性选择器(用中括号表示) a[title]{color:red;} input[type=…

css学习_css写的位置

!!!拿到一个页面后应该先写结构再写样式结构由大到小,由外到里样式最好按顺序加 position .float . 颜色背景字体等... 1.行内(内联)样式 2.内部样式表(按道理可以放在任何位置 .我们一般放在head里) <style type="text/css"> ------ type 类型 css文本 div{ color:red; } </style> 3.外部样式表 (外链式) html语言 css语言 2种不…

css学习_css精灵技术、字体图标

1.精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力) 2.精灵技术的本质(小的背景图集中在一张大图上) 3.精灵技术的使用案例1: 案例2: 注意:产品类的图片一般不是用背景,而是用img标签案例3: 4.字体图标---比精灵图标更占优势字体图标使用流程(如果前2步不需要,可以直接从第3步开始) 推荐转换网站如何下载字体图标(压缩包一定不要丢.把压缩包里的fonts文件放在自己的项目中) 使用步骤注意fonts路径问题,别放错了. 如何追加新图标到原来的库里面?…

css学习_css浮动

1.文档流介绍网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2.浮动后找离他最近的父元素靠左/右对齐. 3.!!!一个父盒子里的子盒子,如果其中一个子元素有浮动的话,则其他子元素都需要浮动,这样才能一行显示. 4.浮动飘在标准流的上面,压住标准流. 5.浮动元素有哪些特性?(浮动影响盒子显示模式) 1.块级元素浮动后会有行内块特性 2.行内元素浮动后也具有行内…

css学习_css盒模型及应用

1.看透网页布局的本质 2.盒模型 margin.border.padding.width.height a. border: 1px solid red (solid/dashed/dotted/double) 案例:table表格中合并边框的写法 table {border-collapse:collapse} 案例:圆角边框(css3) border-radius:5px:(4个角都是5px,最大是变成一个圆) b.padding(内边距) padding…

css中background背景属性概述

background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径) no-repeat right top;/*不重复背景图片右上方显示*/ background:url(背景图片路径)…