您现在的位置是:网站首页> 编程资料编程资料
CSS的一些必记属性整理10个实用的CSS属性小结深入理解CSS中的属性模块举例详解CSS中的cursor属性
2021-09-05
1062人已围观
简介 这篇文章主要介绍了CSS的一些必记属性整理,生疏的话随看随记,欢迎收藏~需要的朋友可以参考下
Text
color 设置text的颜色
text-align 设置text的对齐
text-decoration 设置text的下划线
text-transformation 设置字母的大小写和单词的首字母大写
line-height 设置行高
letter-spacing 设置字符间的距离
Font
font-family 设置字体
font-size 设置字体的大小
font-style 设置字体为斜体还是正常显示
font-weight 加粗字体
Background
background-color 设置背景的颜色
background-image 设置背景图片
background-repeat 设置背景图片的重复方式
background-position 设置背景图片的位置 默认为top left
Lists
list-style-type 设置list的类型,有circle等值
box-model
margin 设置盒子的外边距 外边距是透明的。
padding 设置盒子的内边距 内边距也是透明的。
border 设置盒子的边框,边框为不透明的。note:边框必须要设置类型,否则将无效。
float 设置盒子的浮动,浮动是绝对定位的一种,其占位空间将消失。
clear 清除盒子的浮动,清除封装的那个盒子的浮动。
position and :after / :before
:after 和 :before 通常都是和position一起使用的。position分为绝对定位和相对定位,相对定位的空间还在,绝对定位的空间就不在了。那两个伪类+ position的绝对定位,由非常强大的威力,很多地方都可以用。比如微信的小红点消息通知。
CSS3
border-radius css3支持设置圆角
-webkit-border-radius 支持webkit的浏览器
-moz-border-radius: 支持moz的浏览器
Syntax:提供一个半径即可。
box-shadow css3支持设置阴影
-webkit-box-shadow
-moz-box-shadow
Syntax-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
text-shadow css3 支持设置text阴影
Syntax-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Multiple Backgrounds css3的背景图支持多张背景图
** background-size** css3支持背景的尺寸
text-overflow css3 支持对超出边界的文字的处理
Syntax:
text-overflow: clip|ellipsis|string|initial|inherit;
Flexible Box Model
transform 分为2d和3d 主要包括缩放、平移和旋转。
相关内容
- 举例详解CSS中的的优先级CSS 优先级问题详解浏览器如何判断css优先级CSS的执行顺序和优先级问题示例探讨
- CSS中下拉菜单和表单以及弹出层的简单笔记CSS3模拟动画下拉菜单效果CSS导航栏及弹窗示例代码CSS下拉菜单简单制作教程 你值得拥有的CSS下拉菜单效果纯html+css制作三级下拉菜单基于CSS实现的4级下拉菜单效果代码CSS实现的灰色下拉菜单效果代码基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果css3实现的多级渐变下拉菜单导航效果代码纯CSS实现酷黑风格三级下拉菜单效果代码
- Markdown.css样式简介通过CSS3的object-fit来调整图片适配尺寸的技巧简介CSS计数器counter()的用法简介CSS中的伪元素简介简介CSS中的各种选择符CSS3 Columns分列式布局方法简介定义css设备类型-Media Queries图表简介及使用方法css3背景图片透明叠加属性cross-fade简介及用法实例
- CSS3中box-shadow的用法介绍CSS3阴影效果样式库box-shadows.css 53种css3 box-shadow阴影(外阴影与外发光)图示讲解详解CSS3阴影 box-shadow的使用和技巧总结 CSS3实现多重边框的方法总结详解CSS3的box-shadow属性制作边框阴影效果的方法CSS3 box-shadow属性实例详解
- 使用CSS3制作一个简单的Chrome模拟器css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- CSS中使用Flexbox来达到居中效果的实例利用CSS3的flexbox实现水平垂直居中与三列等高布局Flexbox制作CSS布局实现水平垂直居中的简单实例CSS3的Flexbox骰子布局的实现及问题讲解基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南css使用flexbox布局容器内多元素水平居中css3弹性盒模型(Flexbox)详细介绍CSS3 Flexbox中flex-shrink属性的用法示例介绍CSS Flexbox的具体用法详解
- 使用icon fonts来辅助CSS处理图片纯CSS3实现的动态天气小图标特效源码纯CSS3实现天气动画图标特效源码详解CSS中iconfont的使用CSS3制作ajax loader icon实现思路及代码CSS3 icon font完全指南(CSS3 font 会取代icon图标)使用css如何制作时间ICON方法实践z-blog用CSS定义分类RSS订阅图标CSS icon图标之纯CSS实现带动画效果的天气图标
- 使用CSS实现页面复选框的方法HTML+CSS实现单选框、复选框美观的样式利用CSS3实现单选框动画特效示例代码纯css3实现效果超级炫的checkbox复选框和radio单选框CSS3实例分享--超炫checkbox复选框和radio单选框CSS3实现的表单单选框、复选框特效CSS3实现复选框动画特效示例代码 CSS自定义绿色复选框按钮样式纯CSS实现自定义单选框和复选框功能
- 使用clrs.cc来进行炫酷的CSS调色CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS中一些常用的文本属性整理CSS文本属性的使用方法css对于颜色和文本属性的控制-CSS教程-网页制作-网页教学网