字体样式属性
1、 font-family:设置字体 网页中常用的字体(宋体、微软雅黑、黑体)
2、 font-weight:设置字体的宽度 bold:加粗 normal:不加粗
3、 font-style:设置字体风格 normal:不倾斜 italic:倾斜
4、 font:font-style font-weight font-size/line-height font-family
(注意:font-size和font-family不可以省略)
5、 @font-face:定义服务器字体
声明:
@font-face {
font-family:“自定义字体名称”;
src: url(“字体路径”);
}
使用:
h3{
font-family: “墨体”;
}
文本样式属性
1、 line-height:设置行高
2、 text-aline:文本水平居中
3、text-decoration:修饰文本内容 underline:下划线 overline:上划线 line-through:删除线
4、text-overflow:ellipsis 用三个点代替溢出部分
5、overflow: hidden:隐藏溢出部分 auto:超出部分添加滚动条
6、text-indnet:设置首行文本的缩进 em:当前文字大小的倍数
7、white-space:设置空白符的处理方式 pre:保留原用格式 nowrap:空格空行失效
8、text-shadow:添加阴影效果 h-shadow:水平阴影距离 v-shadow:垂直阴影距离blur:模糊程度 color:颜色(可设置多重阴影,用逗号隔开)
9、word-wrap:长单词和URL地址的自动换行
10、break-word:长单词或URL地址内部进行换行
11、letter-spaceing:定义字间距
12、设置文本折行:<p>xxxxxx<br>xxx</p>
属性选择器
1、E[att^=value]:匹配E元素属性以value开头的项
2、E[att$=value]:匹配E元素属性以value结尾的项
3、E[att*=value]:匹配E元素属性包含value的项
4、>:子代选择器 位于父元素之后
5、+ ~:兄弟选择器 位于某个元素之后 +:后一个 ~:后所有
结构化伪类选择器
1、:root:根选择器(html全局设置)可被覆盖
2、:not(选择器):排除结构元素 语法:(选择器 选择器:not(选择器))
3、:only-child:父元素只存在唯一子元素 用法:(选择器:only-child)
4、:first-child:父元素下第一个子集 :last-child:父元素下最后一个子集 用法:(选择器:first/last-child)
5、:nth-child(n):选择父元素的第n个子集(正向) n:(even 偶数 odd:奇数 -n+3:前三个)
6、:nth-last-child(n):选择父元素的第n个子集(反向)
7、:nth-of-type(n): 选择父元素的第n个子集(分类正向)
8、:nth-last-of-type(n): 选择父元素的第n个子集(分类反向)
9、:empty:选择没有子元素或文本内容为空的所有元素
10、:focus:获取焦点时
伪元素属性
1、:before:在某个元素之前插入内容(必须存在content属性) 语法:选择器:before{ content:文字/url()};
2、:after:在某个元素之前插入内容(用法同:before)
3、:enable:向当前处于可用状态的元素添加样式(超链接或者表单)
4、:disable:向当前处于不可用状态的元素添加样式(超链接或者表单)
5、:checked:向当前处于选中状态的元素添加样式
6、:not(selector):向不是selector元素的元素添加样式
案例:p:not(.name){ color:green;}
7、:target:向正在访问的锚点目标元素添加样式
8、:selection:向用户当前选取内容所在的元素添加样式
边框轮廓属性
1、border:设置边框 border-width border-style border-color
一个值:整体 两个值:上下 左右 三个值:上 左右 下 四个值:上右下左
上下左右分别表示为(top bottom left right)
2、outline:设置轮廓 none:取消轮廓(常用于input控件)
外边距属性
1、初始化全局设置:*{padding:0; margin:0}清除内外边距
2、margin:0 auto 当对块级元素应用宽度属性width可实现块元素居中
背景图片属性
1、background-position:设置背景图片位置 水平:left center right 垂直:top center bottom
2、background-repeat:设置背景图片是否平铺 no-repeat:不平铺 repeat-x:横向 repeat-y:纵向 repeat:平铺(默认值)
3、background-attachment:图片固定属性:scroll:图片随页面一起滚动 flxed:固定屏幕
4、background-image:url() 设置背景图片 可设置多张背景图片
5、background综合写法:背景颜色 url() 平铺方式 是否固定 x轴 y轴
6、background-size 属性值1 属性值2:设置背景图片大小 宽度 长度
7、background-clip:背景图片的裁剪区域 padding-box border-box content-box
8、background-orgin:定义背景图片的相对位置
盒子透明
1、background:rgba(255,0,0,透明程度): 只是背景透明
2、opacity:块透明 里面的元素也透明
圆角取值
1、border-radius:50%表示的是一个圆
2、border-radius:设置圆角取值为盒子高度的一半 实现胶囊形状
图片边框
1、border-image-source:设置边框图片路径(首先需要设置border-style)
2、border-image-slice:设置边框图片偏移量
3、border-image-width:设置边框图片宽度
4、border-image-repeat:设置边框图片是否平铺
盒子阴影
1、box-shadow:h-shadow(水平方向阴影) v-shadow(垂直方向阴影) blur(模糊程度) spread(阴影扩展半径 ) color(阴影颜色) outset/inset(外阴影或内阴影)
渐变
1、、background-image::linear-gradient(to 方向 颜色,颜色…):线性渐变 方向:left right top bottom
2、background-image:radial-gradient(水平位置 垂直位置 at 圆心位置[top bottom left right center] 颜色1,颜色2,颜色3…)
3、background-image::repeating-linear-gradient(参数值) 在颜色后加占比
4、background-image::repeating-radial-gradient(参数值) 在颜色后加占比
呈现方式
5、display:设置元素展现方式(不保留位置) inline:行内元素 block:块元素 inline-block:行内块元素 none:隐藏
6、outvisibility:设置元素展现方式(保留位置) hidden:隐藏 visible:显示
定位
1、 position:设置位置 reliative:相对位置 absolute:绝地定位 fixed:固定定位(导航栏hoe)
2、 z-index:调整重叠定位元素的堆叠顺序 默认值为0 数值越大越靠前显示
定义列表
1、 dl:定义列表 dt:名词 dd:名词解释 <dl><dt></dt><dd></dd></dl>
列表样式
2、list-style-type:控制列表的项目符号
3、list-style-image:引入列表项目图片
4、list-style-position:控制列表符号的位置 inside:文本内部 outside:文本外部
5、list-style:列表样式综合写法 list-style-type list-style-image list-style-position
锚点链接
1、使用<a href="#id名">
链接文本创建超链接文本,使用相应的id名标注跳转目标的位置(用来点击3回顶部或者底部)
超链接伪类
1、a:link:未访问时超链接状态
2、a:visited:访问后超链接状态
3、a:hover:鼠标经过、悬停时超链接状态
4、a:active:鼠标点击不动时超链接状态
表格属性
1、border-collapse:属性值为collapse合并边框
表单属性
1、autocomplete:表单是否显示输入记录
2、novalidate:表单在提交的时候取消检查
3、datalist:设置input控件的选中值 通过option组件进行构建 设置id属性提供给input组件的list属性引用
浮动
1、 float:浮动(不占据文档普通流空间,直到外边缘碰到包含框或另一个浮动块)left:左浮动 right:右浮动
2、 clear:指定那个边不挨着浮动框(清除浮动) left right both none
消除浮动影响
1、 在父级盒子中添加<div>、<p>、<hr/>
等空标签并设置clear:both
2、 在父级盒子设置overflow:auto可以撑起父元素
3、 在父级盒子设置:after伪类 display:block clear:both content:’’ height:0 visibility:hidden
4、 定位方式:子绝父相 可以是子元素的绝对定位不脱离父元素over
input控件type新增类型
1、email:邮箱地址(内含@)
2、url:网络地址(内含http://)
3、tel:输入电话号码 pattern:设置正则规定电话格式
4、search:搜索关键词
5、color:选择颜色
6、number:输入数值 min:最小值 max:最大值 step:步长(同range控件)
7、date:日期 month:月份 week:周 time:时间
8、autofocus:自动获取焦点
9、multiple:设置多选
10、label:设置input控件的点击文字实现单选效果 设置for属性提供给input组件的id属性引用
11、target:指定超链接在哪个页面打开 _self:当前页面 _blank:新打开空白页面
12、iframe:内部窗口,加载其他网页页面(常用作地图)
案例:
音视频控件
1、audio:音频 autoplay:自动播放 controls:显示播放组件 loop:循环播放
2、source:设置音频或视频资源 src:指定播放路径 type:文件格式
3、video:视频 属性与audio一致over谷歌自动播放:autoplay muted poster=’url’ 设置视频播放前默认图片
字体分类
1、 衬线字体:带有边缘修饰(中文)
2、 非衬线字体:没有边缘修饰(常用于电子版简历)(中文)
3、 等宽字体:字母之间有间隔(常用于英文书写)
过渡属性
1、 transition-property:设置过渡属性all:所有属性 preperty:具体属性
2、 trasnsition-duartion:times:设置过渡时间
3、 transition-timing-function:设置属性过渡效果 linear:匀速 ease:慢快慢
ease-in:慢速开始ease-out:慢速结束 ease-in-out:慢速开始慢速结束
4、 transition-delay:times:设置过渡延迟
5、 transition:transition-property trasnsition-duartion transition-timing-function transition-delay
transform变形属性
1、translate(x,y):设置元素位置(平移)
2、scale(x,y):放大元素
3、skew(x,y):设置元素倾斜
4、rotate(45deg):设置元素旋转(正顺逆负) rotateX:x轴旋转 rotateY:y轴旋转
rotateZ:z轴旋转
5、origin(x,y):设置变形中心点
动画属性
1、@keyframes 动画名称{
from{css-styles} //0%
to{ css-styles } //100%
}
2、 animation-name:动画名称
3、 animation-duration:设置动画时间
4、 animation-timing-function:设置动画过渡效果 linear:匀速 ease:慢快慢
ease-in:慢速开始ease-out:慢速结束 ease-in-out:慢速开始慢速结束
5、 animation-delay times:设置动画延迟时间
6、 animation-iteration-count:设置动画播放次数 number:指定次数 infinite:循环播放
7、 animation-direction:normal:正常播放 alternate:逆向播放
绘图
1、:定义画布标签 使用getElementById()获取画布对象
2、getContext(’2d’):获取画笔
3、moveTo(x,y):设置起始位置
4、lineTo(x,y):设置线
5、stroke(x,y):描边
6、lineWidth:设置线条宽度 案例:lineWidth = ‘10’
7、strokeStyle:设置描边颜色 案例:strokeStyle=’red’
8、lineCap:设置图形端点形状 round:圆形 square:方形
9、beginPath():设置新路径
10、closePath():闭合路径
11、fill():填充图形
12、fillStyle:填充颜色 案例:fillStyle=’red’
13、arc(x,y,r,开始角,结束角,方向):绘制弧形案例:arc(100,100,50,0,2*Math.PI)
此博客是博主在学习css时做的笔记 希望可以帮助到你