Web—05-常用css列表
color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:'微软雅黑';
font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px;
font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑';
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
text-overflow 设置一行文字宽度超过容器宽度时的显示方式,如:text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号
white-space 一般用来设置文本不换行,如:white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号
list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字 如:list-style:none
width 设置盒子内容的宽度,如: width:100px;
height 设置盒子内容的高度,如: height:100px;
border-top 设置盒子顶部边框的三个属性 如:border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线,详细设置说明:盒子模型
border-left 设置盒子左边边框的三个属性 如:border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线,详细设置说明:盒子模型
border-right 设置盒子右边边框的三个属性 如:border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线,详细设置说明:盒子模型
border-bottom 设置盒子底部边框的三个属性 如:border-bottom:1px solid red;设置盒子底部边框为1像素宽的红色的实线,详细设置说明:盒子模型
border 同时设置盒子的四个边框,如果四个边的样式统一就使用它 如:border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线,详细设置说明:盒子模型
padding 设置盒子四个边的内边距 如:padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距(顺时针),详细设置说明:盒子模型
margin 设置盒子四个边的外边距 如:margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距(顺时针),详细设置说明:盒子模型
overflow 设置当子元素的尺寸超过父元素的尺寸时,盒子及子元素的显示方式 如:overflow:hidden 超出的子元素被裁切,详细设置说明:元素溢出
display 设置盒子的显示类型及隐藏,如:display:block 将盒子设置为以块元素显示 display:none 将元素隐藏,详细设置说明:元素类型
float 设置元浮动 如:float:left 设置左浮动 float:right 设置右浮动,详细设置说明:元素浮动
clear 在盒子两侧清除浮动 如:clear:both 在盒子两侧都不允许浮动,详细设置说明:元素浮动
position 设置元素定位 如:position:relative 设置元素相对定位,详细设置说明:元素定位
background 设置元素的背景色和背景图片,如:background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg,背景色为cyan,详细设置说明:元素背景
background-size 设置盒子背景图的尺寸,如:background-size:30px 40px;设置背景图的尺寸宽为30px,高为40px,这个属性不能合到background属性中,详细设置说明:retina屏适配
opacity 设置元素整体透明度,一般为了兼容需要加上filter属性设置 如:opacity:0.1;filter:alpha(opacity=10)
cursor 设置鼠标悬停在元素上时指针的形状 如:cursor:pointer 设置为手型
outline 设置文本输入框周围凸显的蓝色的线,一般是设为没有 如:outline:none
border-radius 设置盒子的圆角 如:border-radius:10px 设置盒子的四个角为10px半径的圆角,详细设置说明:css圆角
box-shadow 设置盒子的阴影,如:box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影,详细设置说明:css阴影
transition 设置盒子的过渡动画,如:transition:all 1s ease;设置元素过渡动画为1秒完成,所有变动的属性都做动画,详细设置说明:过渡动画
animation 设置盒子的关键帧动画,详细设置说明:关键帧动画
transform 设置盒子的位移、旋转、缩放、斜切等变形,如:transform:rotate(45deg);设置盒子旋转45度,详细设置说明:元素变形
box-sizing 设置盒子的尺寸计算方式,如:box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算,此时width和height的值就是盒子的实际尺寸
border-collapse 设置表格边框是否合并,如:border-collapse:collapse,将表格边框合并,这样就可以制作1px边框的表格。
Web—05-常用css列表的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- WEB入门.七 CSS布局模型
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- python进阶05 常用问题库(1)json os os.path模块
python进阶05 常用问题库(1)json os os.path模块 一.json模块(数据交互) web开发和爬虫开发都离不开数据交互,web开发是做网站后台的,要跟网站前端进行数据交互 1.什 ...
- web.xml常用元素配置
tomcat服务器: tomcat是一个WEB服务器,所有的j2ee WEB程序可以在此处运行. tomcat服务器是一个符合j2ee标准的WEB服务器.则J2ee的EJB程序无法在此处运行. 如果要 ...
- Web学习之css
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
- IntelliJ IDEA 常用快捷键列表及技巧大全
IntelliJ Idea 常用快捷键列表 Alt+回车 导入包,自动修正Ctrl+N 查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L 格式化代码Ctrl+Alt+O 优化导入的类和 ...
随机推荐
- 简单的数据库连接池实例(java语言)
1.概述 频繁的创建和销毁数据库连接消耗非常多的系统资源,创建一个池子, 管理一定数量的连接,用的时候去池中取,用完了放回池中,这时比较通用的做法. 2.关键字 LinkedList synchro ...
- COGS 有标号的二分图计数系列
其实这三道题都是不错的……(虽然感觉第三题略套路了……) 分别写一下做法好了…… COGS2392 有标号的二分图计数 I 这个就很简单了,Noip难度. 显然可以直接认为黑点和白点分别位于二分图两侧 ...
- git日常使用
git强制回滚指定版本git reset --hard xxx(版本名) git强制推送git push -f remote(远程地址) branch(远程分支) 查看远程分支 git branch ...
- Python基础-列表生成式和生成器表达式
一.列表生成式(List Comprehension) 列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 举个例子,要生成list ...
- ArrayList的使用方法详解(转)
1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素 实现了ICollection和I ...
- UNIX/Linux系统管理技术手册(1)----脚本和shell
1. 管道和重定向 (i) 要让第二条命令只有在第一条命令成功完成之后才执行,可以用一个 && 符号把两条命令隔开.例如: $ > /dev/null && cd ...
- codeforces之始
很早就听说acmer界的CF嘞!还记得刚开始听到神犇们在讨论CF的时候我还以为是网游CF(穿越火线)呢... 今年刚开学的时候就打算开始打cf的,由于一些事情耽搁了.之后又要准备省赛所以就一直拖到现在 ...
- <meta name="renderer" content="webkit">
<meta name="renderer" content="webkit"> 当前国内的大部分主流浏览器(如360)基本都是双核浏览器,所谓双核即 ...
- JAVA环境变量安装
需配置的系统环境变量参数: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_60 CLASS_PATH: ;%JAVA_HOME%\lib;%JAVA_HOME%\l ...
- 为某个云服务设置RVIP
获取所有Azure(云)服务Get-AzureService #查看某个云服务的LocationGet-AzureService -ServiceName tests |select location ...