css复合属性的写法
# 下面的内容会介绍 2 个比较常用的复合属性 "font" 和 "background" 。
==========================================================
1. 背景-background
==========================================================
单个属性的写法
.sample1 {
background-image: url(sample.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
复合属性的写法
书写格式
background : background-color
background-image background-repeat background-attachment
background-position;
默认值
background:
transparent none repeat scroll 0% 0%;
默认值(中文意思)
background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动(不理解的一定要自己动手试一下) /
位于元素左上角
按照以上的方法,将 .sample1 改成 .sample2,可以得到相同的样式。
.sample2 {
background: #CCCCCC url(sample.gif) no-repeat fixed center
center;
}
background的书写顺序是比较容易理解的。
1. 首先要有背景颜色 background-color ,在背景图片(如果有设置)未载入之前,先显示的是背景颜色。默认为
transparent(透明,即应用父元素或 BODY
的背景设置),可以省略,不过在应用一些JS事件时最好将它写上,以示规范;
2. 接下来就是背景图片 background-image 。如果没有此项,那么后面的项就没有任何意义了;
3. 是否平铺 background-repeat 要写在 background-position 之前,很容易理解,如果此项设置了
repeat (铺满整个元素),那么 position 设置就基本失去作用了;
4. fixed 一般用在 body 上,其他地方不大见到;
5.
background-position:有2个值,垂直位置和水平位置。按代码写法是没有顺序的:比如说背景图片位于元素的右下角,可以写成
bottom right ,也可以写成 right bottom ;如果按百分比写法是有顺序的:比如 20% 30%
,第1个百分比表示水平位置,第2个百分比表示垂直位置。有意思的是这里的垂直居中是 center 而不是 middle 。你可以设置一个
center 表示图片的居中,相当于 center center 或者 50% 50%
。
==========================================================
2. 字体-font
==========================================================
单个属性的写法,这里只列出最常用的3个字体属性。
.sample3 {
font-weight: bold;
font-size: 12px;
font-family: Verdana;
}
复合属性的写法
书写格式(仅css1)
font : font-style font-variant font-weight
font-size line-height font-family;
默认值
font: normal normal normal medium normal
"Times New Roman" ;
所以上面的.sample3可以写成这样
.sample4 {
font: bold 12px Verdana;
}
大家可能会对这个写法感到陌生,因为font这个复合属性很少看到,源于它比较严苛的书写要求。
1. font属性内必须有 font-size 和 font-family
这2项值。如果少了一项,即便将其他字体属性都写上也没用。
如果是这样
font: bold 12px; 或者 font: bold
Verdana; 在绝大部分的浏览器里都会表现异常。
2. 书写顺序必须严格按照上面提到的顺序。
如果写成 font: 12px bold Verdana; 或者 font:
Verdana 12px bold,浏览器就不会正确解释。
3. 这里的12px是表示字体大小,并非行高。
如果要将这两项同时表现,必须这样写:font: bold 12px/2.0em
Verdana; ,12px表示字体大小,2.0em(就是12*2.0px)表示行高。
==========================================================
最后要注意的一点:
如果只有一项值,最好不要应用复合属性。以免带来不必要的麻烦。
比如
.sample6 {font-weight: bold} ,如果写成 .sample6 {font: bold}
就没任何作用了。
再举个列子,比如 .sampl5 {background-color: #CCCCCC; } ,如果写成 .sampl5
{background: #CCCCCC; } ,浏览器虽然能正确解释,但这不是规范的写法。
css复合属性的写法的更多相关文章
- background(css复合写法)
1. 背景-background========================================================== 单个属性的写法 .sample1 { /*背景颜色 ...
- css常用属性总结:背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
- CSS背景相关属性
CSS样式可以精确控制HTML元素的背景.边框的样式和外观,也可以精确控制边框的线型和形状.其中,背景相关属性可以用于控制背景色.背景图片等属性.在控制背景图片的同时还可以控制背景图片的排列方式. 常 ...
- CSS background 属性全家桶
介绍我们都知道css的background属性是一个复合属性,可以简写成一行代码,也可以将每个属性分开来写. background 简写属性在一个声明中设置所有的背景属性.如:body{ backgr ...
- 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类
重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...
- css 11-CSS3属性详解(一)
11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- CSS复合选择器,元素的显示模式,CSS背景设置
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- css常用属性汇总
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...
随机推荐
- C# 数组的应用
//数组的应用: //(一).冒泡排序. //1.冒泡排序是用双层循环解决.外层循环的是趟数,里层循环的是次数. //2.趟数=n-1:次数=n-趟数. //3.里层循环使用if比较相临的两个数的大小 ...
- hibernate异常
<h1> nested exception is org.hibernate.LazyInitializationException:</h1> stackoverflow:h ...
- media queries(练习)
根据不同的窗口尺寸来选择使用不同的样式的示例 MAIN SUB 01 SUB 02
- Magnolia-CMS安装配置
Magnolia-CMS安装配置 Magnolia-CMS安装配置 介绍:Magnolia 是一个开源基于Java的Web内容管理系统(CMS),构建在Java内容知识库标准(JSR-170).它适合 ...
- 图片与文字在div里实现垂直水平都居中
第一种方法,利用盒布局实现 <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...
- Android 测试工具集02
User scenario testing for Android(功能性测试框架) Robotium is an Android test automation framework that has ...
- requireJS到底是什么?
1.requireJS是让js代码模块化:而且js之间的依赖关系,不再依靠script标签的顺序,可以加载不阻塞 2.requireJS加载js的方法:<script data-main=&qu ...
- thinkphp批量删除的实现
今天自己在写后台的时候需要把以前上传的测试文章全部删除掉,但是利用 [操作]里面的一个个删除比较慢,因此想出一个批量删除的解决方案. 首先在前端页面里面建立一个表单,这个表单是把你选中的单选按钮提交到 ...
- html5介绍
html5与html4的区别 (h5 and h4) 什么是OPOA 1, 浏览器对h5的支持情况 2, 历史 --- h5 2004年,whatwg 提出 w ...
- 在 Linux ubuntu 上安装 *.sh 文件
简单说来就两步: 增加可执行权限 执行 事情是这样的,打算在 ubuntu 上安装一个 NetBeans IDE 来学习 Java,但是下载下来的文件是 .sh 格式的.图形界面下右键没有执行的选项. ...