EasyDemo*CSS常用形容词总结

CSS常用形容词

红色:常用

绿色:不常用

一、开篇：文字&背景

1.文字

1.1文字样式

*font-family--字体 *font-size—字体大小 *color—字体颜色 *font-weight—字体粗细

*font-style—字体样式 *text-transform—英文字体大小写 *text-decoration—文字修饰

*letter-spacing—字符间距

1.2段落样式

*line-height—行间距 *text-indent—段落首行缩进 *text-align—文本水平对齐

*vertical-align—文本垂直对齐

1.3新增文本样式

*text-overflow—文本溢出处理 *word-wrap&word-break—文本换行控制 *text-shadow—文本陰影 *@font-face-使用服务器端字体

1.4 列表样式

*list-style-type—列表符号 * list-style-image—自定义列表符号 *设置定义列表

2.背景

2.1背景样式

*background-color—背景颜色 *background-image—背景图像 * background-repeat—背景图像平铺方式 * background-position—背景图像位置

* background-attachment—背景图像固定 * background-size—背景图像大小

* background-origin—背景图像原点 * background-clip背景图像显示区域

二、进阶: 边框&超链接

1.边框

1.1边框样式

*border-width—边框宽度 *border-style—边框样式 *border-color—边框颜色

1.2新增边框样式

*border-colors—多重边框颜色 *border-image—图像边框 *border-radius—圆角边框

2.超链接

2.1超链接样式

*:link伪类—设置超链接对象在没有被访问时的样式

*:hover伪类--设置超链接对象在其鼠标悬停时的样式

*:active伪类—设置超链接对象在被用户激活(在被点击与释放之间发生的事件)时的样式

*:visited伪类--设置超链接对象在其链接地址已被访问过后的样式

2.2按钮式超链接

2.3光标指针样式

*cursor—光标效果

三、升级: 盒模型&界面设计

盒模型

1.1盒模型要点

*margin—边距 *border—边框 *padding—填充

1.2弹性盒模型

*box-orient—元素布局方向 *box-direction—元素布局顺序

*box-ordinal-group—元素位置 *box-flex—元素空间分配

*box-pack&box-align—元素对齐方式

1.3增强盒模型

*box-shadow—元素阴影 *box-sizing—元素尺寸大小

*overflow-x&overflow-y—元素溢出内容处理

1.4定位网页元素

*position—元素定位 *relative—相对定位 *absolute—绝对定位

*fixed—固定定位 *float—浮动定位

2. 界面设计

2.1新增用户界面设计属性

*resize—改变元素尺寸

*outline—轮廓外边距(outline-width&outline-style&outline-color&outline-offset)

*appearance—伪装的元素 *content—为元素添加内容

2.2新增多列布局属性

*columns—多列布局 *column-width—列宽度

*column-gap—列间距 *column-rule—列分割线

四、完虐:动画

动画效果

1.1元素变换效果

*transform(旋转&缩放&移动&倾斜…)

1.2元素过渡效果

*transition *transition-property--过渡效果 *transition-duration—设置过渡时间

*transition-delay—设置过渡延迟效果 *transition-timing-function—设置过渡方式

1.3元素动画效果

*@keyframes--关键帧动画

*animation--实现元素动画效果 (animation-name&animation-duration&animation-timing-function&animation-delay&animation-iteration-count&animation-direction)

EasyDemo*CSS常用形容词总结相关推荐

div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
[css] css常用的布局方式有哪些？
[css] css常用的布局方式有哪些? 1:圣杯布局 2:双飞翼 3:flex 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通 ...
CSS常用的元素居中方法
参考:CSS: 常用的元素居中方法 CSS居中布局总结 1.水平居中 (1)文本水平居中 text-align: center; (2)块级元素水平居中 ①设置margin margin: auto; ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
[Web 前端] 010 css 常用的边框设置
css 常用边框属性概览参数释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式 solid 实线,dotted 点状线,das ...
css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...

EasyDemo*CSS常用形容词总结

CSS常用形容词

EasyDemo*CSS常用形容词总结相关推荐

最新文章

热门文章