属性书写顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

字体样式

font字体

font-size:大小

谷歌浏览器默认的文字大小为16px

@ 扩展：有哪些单位
px em rem vh(100vh是整个屏幕高度) vw （100vw是整个屏幕宽度）

px，绝对长度单位，像素px是相对于显示器屏幕分辨率来说的
em，相对长度单位，em的值并不是固定的, em会继承父级元素的字体大小（参考物是父元素的font-size）,
em中所有的字体都是相对于父元素的大小决定的
rem ，相对于html根元素的font-size (rem=页面元素的值/font-size)
rem的缺点：文字类网站，如果用rem，那么屏幕越小的移动设备文字就越小，就会导致看文章的时候特别费劲。

font-family:字体

在网页的字体图标中经常使用

font-weight:字体粗细

400 等同于 normal，而 700 等同于 bold

font-style:字体风格

normal 不斜体， italic 斜体

font:综合设置字体样式 (重点)

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

外观属性

color:文本颜色

rgb(255,255,255);    or      #f13456；    or     red;

text-align:文本水平对齐方式

盒子里的内容居中：text-align: center;

line-height:行间距

行高等于高度文字垂直居中
行高大于高度文字偏下
行高小于高度文字偏上

text-indent:首行缩进

建议使用em作为设置单位

text-decoration 文本的装饰

text-decoration ：none; // 取消下划线

背景

背景颜色(color)

background-color:颜色值; 默认的值是 transparent 透明的

背景图片(image）

background-image : none | url (url)

背景平铺（repeat）

background-repeat : repeat | no-repeat | repeat-x | repeat

背景位置(position) 重点（精灵图）

background-position : center （方位词)
background-position : (百分数 %或由浮点数字和单位标识符组成的长度值)

必须先指定background-image属性
position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着

background-attachment : scroll | fixed

背景简写

background: transparent url(image.jpg) repeat-y scroll center top ;

背景透明(CSS3)

background: rgba(0, 0, 0, 0.3);

CSS3样式详见 CSS3新增样式

用户界面样式

鼠标样式

<ul><li style="cursor:default">我是 小白</li><li style="cursor:pointer">我是 小手</li><li style="cursor:move">我是 移动</li><li style="cursor:text">我是 文本</li><li style="cursor:not-allowed">我是 文本</li>
</ul>

轮廓线（一般要取消）

outline: 0;   或者  outline: none;

防止拖拽文本域resize

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

详见 Vertical-align

溢出文字省略号显示

显示一行还是多行

white-space:normal ；默认处理方式
white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

text-overflow 文字溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

溢出隐藏 overflow 溢出(重点)
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
实际开发场景：
1.清除浮动
2.隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

三步实现

  /*1. 先强制一行内显示文本*/white-space: nowrap;/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

显示与隐藏

CSS面试须知--样式属性相关推荐

colordialog通过哪属性取其颜色_IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1...
CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...
CSS和JS样式属性对照表
注意:1.在使用js时,如newTD.style.paddingLeft="200";(错误),正确生效的写法是newTD.style.paddingLeft="200p ...
CSS控制列表样式属性list-style有哪些？怎么用？
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
CSS面试须知--显示模式及三大特性
显示模式标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个块级元素:block div h1-h6 hr p ul ol li dl table address bl ...
html ul list style,CSS list-style列表样式属性用法介绍
list-style我们使用得最多的地方就是ul li中了,但很多朋友都搞不清楚•list-style-type,•list-style-position,•list-style-image具体的区别 ...
Css的字体样式属性大全
转:http://www.divcss5.com/rumen/r27838.shtml CSS 属性: 字体样式(Font Style) 1 字体样式 {font:font-style font-va ...
CSS面试须知--选择器
选择器标签选择器标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 类选择器 (可以多类名) .类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签中 ...
CSS面试须知--关于图片
常见的图片格式: jpg图像格式: JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,产品类的图片经常用jpg格式的 gif图像格式: GIF格式最多只能储存256色,所以通常用来显示简单图形 ...
css 如何重设外部样式的属性值_IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值5...
CSS综合实例在Web页面中经常使用栏目显示分类内容.本例将使用HTML和CSS结合编写一个分类栏目模型,用于演示前面介绍的CSS应用.通过使用独立的文件定义样式表,并在HTML文档中使用link标 ...

CSS面试须知--样式属性

属性书写顺序：

字体样式

font字体

font-size:大小

font-family:字体

font-weight:字体粗细

font-style:字体风格

font:综合设置字体样式 (重点)

外观属性

color:文本颜色

text-align:文本水平对齐方式

line-height:行间距

text-indent:首行缩进

text-decoration 文本的装饰

背景

背景颜色(color)

背景图片(image）

背景平铺（repeat）

背景位置(position) 重点（精灵图）

背景附着

背景简写

背景透明(CSS3)

用户界面样式

鼠标样式

轮廓线（一般要取消）

防止拖拽文本域resize

vertical-align 垂直对齐

溢出文字省略号显示

三步实现

显示与隐藏

CSS面试须知--样式属性相关推荐

最新文章

热门文章

CSS面试须知--样式属性

属性书写顺序：

字体样式

font字体

font-size:大小

font-family:字体

font-weight:字体粗细

font-style:字体风格

font:综合设置字体样式 (重点)

外观属性

color:文本颜色

text-align:文本水平对齐方式

line-height:行间距

text-indent:首行缩进

text-decoration 文本的装饰

背景

背景颜色(color)

背景图片(image）

背景平铺（repeat）

背景位置(position) 重点 （精灵图）

背景附着

背景简写

背景透明(CSS3)

用户界面样式

鼠标样式

轮廓线（一般要取消）

防止拖拽文本域resize

vertical-align 垂直对齐

溢出文字省略号显示

三步实现

显示与隐藏

CSS面试须知--样式属性相关推荐

最新文章

热门文章

背景位置(position) 重点（精灵图）