导图社区 Web前端基础Day13
这是一个关于Web前端基础Day13的思维导图,包含CSS3 新增选择器、 CSS3字体、 CSS3 边框、CS53 背景等。
编辑于2024-05-01 00:06:29Day11
一、CSS3 新增选择器
1、CSS3 属性选择器
属于【css2】的属性选择器
E[class] 选择指定属性为class的E元素
E[class="box"] 选择具有class属性,属性值等于box的元素。
[class^=”box“] 选择指定属性名且属性值【以box开头】的每个元素
[class$=”box“] 选择带有指定属性名且属性值【以box开头】所有元素
[class*=”box“] 选择指定属性名且属性值【包含box】的每个元素
兼容:IE7+
2、CSS3 结构选择器
:first-child 匹配父元素中的第一个子元素
:last-child 选择器:匹配属于其父元素的最后一个子元素的每个元素
:nth-child(n) 选择器:匹配属于其父元素的第 n 个子元素
:nth-last-child(n) 选择器:匹配属于其元素的倒数第 n 个子元素的每个元素
:first-of-type 选择其父元素的特定类型的首个子元素的每个元素
:last-of-type(n) 选择其父元素的特定类型的最后一个子元素的每个元素
:nth-of-type(n):选择器匹配属于父元素的特定类型的第n 个子元素
:nth-last-of-type(n):选择器匹配属于父元素的特定类型的倒数第 n 个子元素的每个元素
说明: n 可以是数字、关键词或公式 关键词 odd(偶数,even奇数) 公式 (an + b),(an - b) 例:(2n+1):1,3,5,7...... 表示周期的长度,n 是计数器(从 0 开始),b 是偏移值
nth-child强调结构 关系,优先确定是否是父元素的子元素,在其中找第几个
nth-of-type强调类型,选择父元素中指定类型中的第几个
兼容性:IE9+
3、表单选择器
:enabled
作用:选择器匹配每个已启用的元素
主要适用于:表单元素
:disabled
作用:选择器匹配每个被禁用的元素
主要适用于:表单元素
:checked
作用:选择器匹配每个已被选中的 input 元素
适用于:只用于单选按钮和复选框
兼容性:IE9+
4、伪元素选择器
::before
作用:在元素内部最开始位置生成内容
语法:元素:before{content:"内容"}
::after
作用:在元素内部最后位置生成内容
语法:元素:before{content:"内容"}
::placeholder
设置对象文字占位符的样式
::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。
注意:必须定义content属性!
兼容性:IE9-不支持,IE10-11、firefox低版本支持前缀写法
二、CSS3字体
自定义字体(分两步)
//定义字体 @font-face{ font-family:“自己定义字体名称”; src:url("字体格式1.woff") format("woff").. //format表示字体格式 }
应用字体: .box{ font-family:"自已定义的名称"; }
兼容:IE6-8只支持.eot字体
iconfont下载字体
字体阴影:text-shadow
语法: text-shadow:水平方向偏移量 垂直方向偏移量 模糊值 阴影颜色 ;
作用:为文字添加阴影。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
注意: 值与值之间“空格”隔开 水平方向和垂直方向的偏移量可以是正值、负值、0; 模糊距离不能为负值 阴影颜色的取值可以是颜色关键词、十六进制、rgb()、rgba() 多个阴影中间用逗号隔开
三、CSS3 边框
阴影:box-shadow
语法:box-shadow: 阴影水平偏移值 垂直偏移 模糊值 外延值 阴影颜色 内阴影inset(默认外阴影);
多个阴影: 用逗号分隔 第一个阴影在最上面,书写顺序越靠前,越靠上
兼容:IE9+
圆角:border-radius
单个边定义语法: border-*-radius
border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度
常用取值: px 百分比 分别相对于宽高计算(非内容) 不允许负值
简写border-radius
四个值:左上角、右上角、右下角、左下角 水平和垂直半径 三个值:左上角、右上角和左下角,右下角 两个值:左上角与右下角、右上角与左下角 一个值: 四个圆角值相同
兼容:IE9+
四、CSS3 背景
1、background-image多背景属性
单独定义: .box { background-image: url(../gif), url(../gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }
简写: .box { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }
注意: 不同的背景图像和图像用【逗号】隔开,也可以给不同的图片设置多个不同的属性 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上!
2、background-origin背景图像的起始点 (默认从padding区开始) 取值:
padding-box:从padding区域(含padding)开始显示背景图像(默认值)
border-box:从border区域(含border)开始显示背景图像
content-box:从content区域开始显示背景图像
3、background-clip背景绘制区域 (默认从border开始裁剪) 取值:
border-box 默认值。背景绘制在边框方框内(剪切成边框方框)
padding-box 背景绘制在衬距方框内(剪切成衬距方框)
content-box 背景绘制在内容方框内(剪切成内容方框)
4、background-size背景图像的大小
概述:CSS3以前,背景图像大小由图像的实际大小决定,CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小
px:用长度值指定背景图像大小。不允许负值
百分比:用百分比指定背景图像大小。不允许负值
auto:背景图像的真实大小
cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器
contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内
注意:当属性值为百分比时,参照背景图像的background-origin区域大小进行换算(而不是包含块大小)
合并简写:background: image position / size repeat origin clip color;
注意强调:背景颜色只能有一个 书写注意:空格,斜杠
兼容:IE9+
5、CSS3 渐变
1、线性渐变:linear-gradient()
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。
语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
渐变方向: 使用起始位置关键字 使用角度
渐变重复:语法:background:repeating-linear-gradient( )
例1:.box{ background: linear-gradient(to right【从左到右排列】,rgba(255,0,0,.3) 50%,transparent50%),linear-gradient(to bottom,rgba(255,0,0,.3)50%,transparent 50%); background-size: 50px 50px;}
例2.box:nth-child(10) { background: repeating-linear-gradient(to right top,red 0%,red 10%,yellow 10%,yellow 20%); }
多重渐变 语法:逗号隔开 提示:书写顺序越靠前显示越靠上
2、径向渐变:radial-gradient()
radial-gradient() 函数用径向渐变创建 "图像"。
径向渐变由中心点定义。
语法:background: radial-gradient(center, shape size, start-color, ..., lastcolor);
颜色节点均匀分布 radial-gradient(red, green, blue);
颜色结点不均匀分布 radial-gradient(red 0,red 50%,blue 60%); 节点取值 :px,百分比
渐变重复 语法:repeating-radial-gradient()
渐变的形状: ellipse 表示椭圆形 默认值 circle 表示圆形 渐变的圆心:
多重渐变 语法:逗号隔开 提示:书写顺序越靠前显示越靠上
兼容:IE10+
五、CSS3 用户界面
1、resize:规定是否可由用户调整元素的尺寸。
取值 none 用户无法调整元素的尺寸 both 用户可调整元素的高度和宽度 horizontal用户可调整元素的宽度 vertical 用户可调整元素的高度
注意 如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。
2、box-sizing:规定盒子组成模式
content-box:定义宽高不包括宽度和高度(占位)
border-box:定义宽高包括宽度和高度(占位)
兼容:IE8+
六、多列布局
CSS3 支持在布局中建立列(column)的数量,以及内容如何在列之间流动(flow)、列之间的间距(gap)大小,以及列的分隔线(column rules)。
1、column-width:规定栏目的宽度
取值:number 指定栏目宽度。 auto 自动,由其他属性决定列数,如 "column-count"
2、column-count:规定元素应该被划分的列数
取值: auto 由其他属性决定列数,比如 "column-width" number 元素内容将被划分的最佳列数。
3、column-gap:规定列之间的间隔
取值: normal 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em length 把列间的间隔设置为指定的长度
w3c(万维网联盟,web标准的制定者)推荐的间距是1em
4、column-rule:设置列与列间的边框宽度、样式和颜色规则
取值: column-rule-width边框宽度 column-rule-style 边框样式 column-rule-color边框颜色
注意:column-rule为column-rule-width ,column-rule-style ,column-rule-color的简写属性
同边框的设置方式
兼容:IE10+