CSS常用样式（一）
一、字体样式
1、font-style：设置或检索对象中的文本字体样式。
取值：
normal：指定文本字体样式为正常的字体
italic：指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应用oblique
oblique：指定文本字体样式为倾斜的字体
2、font-variant：设置或检索对象中的文本是否为小型的大写字母。
取值：
normal：正常的字体
- small-caps：小型的大写字母字体
- 3、font-weight：设置或检索对象中的文本字体的粗细。
- 取值：
- normal：正常的字体。相当于number为400
- bold：粗体。相当于number为700。
- bolder：特粗体。也相当于strong和b对象的作用
- lighter：细体
- integer：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
4、font-size：设置或检索对象中的字体尺寸。
取值：
absolute-size：根据对象字体进行调节。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
relative-size：相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值：smaller | larger
length：用长度值指定文字大小。不允许负值。
percentage：用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。
5、font-family：设置或检索用于对象中文本的字体名称序列。
取值：
family-name:字体名称。可以有多个值，以逗号隔开。浏览器以先后顺序依次使用字体。
generic-family:字体序列名称。
6、font-stretch：设置或检索对象中的文字是否横向拉伸变形。
取值：
ultra-condensed：比正常文字宽度窄4个基数。
extra-condensed：比正常文字宽度窄3个基数。
condensed：比正常文字宽度窄2个基数。
semi-condensed：比正常文字宽度窄1个基数。
normal：正常文字宽度
semi-expanded：比正常文字宽度宽1个基数。
expanded：比正常文字宽度宽2个基数。
extra-expanded：比正常文字宽度宽3个基数。
ultra-expanded：比正常文字宽度宽4个基数。
注：也可以直接用font：[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] 简写的方式。
下面举个综合以上属性的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
font-family: "微软雅黑";
font-size: 15px;
font-style: italic;
font-stretch:extra-condensed;
font-weight: bold;
font-variant: normal;
}
/* #p1{
font:italic normal bold 15px "微软雅黑";
}*/
</style>
</head>
<body>
<p id="p1">翦翦风，鸳鸯灯。星月无眠，鹊桥筑梦。</p>
</body>
</html>
效果如下：
翦翦风，鸳鸯灯。星月无眠，鹊桥筑梦。
二、元素样式
1、宽度
width:auto|length
例：p{ width:100px;}
div{width:50%;}
height:auto|length;
例：p{height:200px;}
div{height:50%;}
3、外边距
margin:auto|length
取值：
margin-top: 设置上边的外边距
margin-right: 设置右边的外边距
margin-bottom: 设置下边的外边距
margin-left: 设置左边的外边距
缩写形式:
margin:上边距 右边距 下边距 左边距
margin:上下边距 左右边距
margin:上边距 左右边距 下边距
例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1{
width:200px;
height: 100px;
background:pink;
}
#div2{
width: 110px;
height: 80px;
margin-top:20px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
background: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id ="div2">
我是里边的内容。
</div>
</div> </body>
</html>
4、内边距
padding:auto|length
取值：
padding-top: 设置上边的内边距
padding-right: 设置右边的内边距
padding-bottom: 设置下边的内边距
padding-left: 设置左边的内边距
缩写形式:
padding:上边距 右边距 下边距 左边距
padding:上下边距 左右边距
padding:上边距 左右边距 下边距
例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div3{
width: 100px;
height: 100px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 10px;
background-color: #0000FF;
}
</style>
</head>
<body> <div id="div3">
我是里面的内容
</div>
</body>
</html>
三、颜色
color 检索或设置对象的文本颜色。无默认值。
颜色属性值分三种值的格式
（1）、英文单词，比如 red , yellow ,green …
（2）、十六进制表示方式，#开头，6个十六进制的字符或数字 组合。比如：#FFFFFF，#000000，#CCCAAA，#22BCAD。十六进制： 0-9 和 a-f RGB模式，红 0-255，绿 0-255，蓝 0-255。比如： RGB(120,33,234)。
RGBA(255,0,0,.5) RGBA模式，最后的A表示透明度50%小数点前的0可以省略不写。
例：
<style>
#p11{
color: red;
}
#p22{
color:#eee;
}
#p33{
background: rgba(0,0,0,0.5);
}
</style>
<body>
<p id="p11">段落1</p>
<p id="p22">段落2</p>
<p id="p33">段落3</p>
</body>
段落1
段落2
段落3
CSS常用样式（一）的更多相关文章
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- CSS常用样式（四）之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
- css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- CSS常用样式整理
元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...
- css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap ——用于最外层 头部:header ——用于头部 主要内容:mai ...
- CSS常用样式--font
CSS font 属性 参考:W3school- CSS font 所有浏览器都支持 font 属性,可在一个声明中设置所有字体属性,各属性需按顺序,语法如下: selector{ font:styl ...
随机推荐
- PHP的学习--连接MySQL的三种方式
记录一下PHP连接MySQL的三种方式. 先mock一下数据,可以执行一下sql. /*创建数据库*/ CREATE DATABASE IF NOT EXISTS `test`; /*选择数据库*/ ...
- mysql命令详解
mysqld.exe 和 mysql.exe 有什么区别? mysqld.exe 是MySQL后台程序(即MySQL服务器).要想使用客户端程序,该程序必须运行,因为客户端通过连接服务器来访问数据库. ...
- Spring MVC 学习总结（一）——MVC概要与环境配置
一.MVC概要 MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件设计规范,用一种将业务逻辑.数据.显示分离的方法组织代码,MVC主要作用是降低了视图与业务 ...
- WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps
1. 上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128 ...
- 牛顿法与拟牛顿法学习笔记（三）DFP 算法
机器学习算法中经常碰到非线性优化问题,如 Sparse Filtering 算法,其主要工作在于求解一个非线性极小化问题.在具体实现中,大多调用的是成熟的软件包做支撑,其中最常用的一个算法是 L-BF ...
- 12个来自 Codrops 的创新交互和动画效果
产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...
- [Matlab] tic toc
tic Start a stopwatch timer. tic and TOC functions work together to measure elapsed time. tic, ...
- 关于Unicode和URL encoding入门的一切以及注意事项
本文同时也发表在我另一篇独立博客 <关于Unicode和URL encoding入门的一切以及注意事项>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了! ...
- Git学习笔记（三）
一.标签是什么 发布一个版本时,我们通常先在版本库中打一个标签,这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一 ...
- 大话ASP.NET(第二篇,Angular结构篇--翻译)
AngularJS API Docs Welcome to the AngularJS API docs page. These pages contain the AngularJS referen ...