css基础样式

xunmenglanying

浏览: 8491 次
性别:
来自: 西安

最近访客更多访客>>

bilimeng

解甲归田

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css 样式

CSS的应用及基本语法
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>                       对页面进行有效性检验
<head>
<style type="text/css">      导入样式

</style>
<style type="text/css">    内嵌样式

</style>                     链接样式
<link href="css/flat.css" rel="stylesheet" type="text/css">
</head>
<body>                        行内样式
<p style="font-style:italic; color:blue;"></p>
</body>
</html>

CSS的基本语法
二级标题{
字体:宋体;
大小:15像素;
颜色:红色;
装饰:下划线
}
h2{
font-family:宋体;
font-size:15px;
color:red;
text-decoration:underline;
}
CSS的基本语法-选择器的构成
标签选择器：
h1{
color:red;
font-size:25px;
}

ID选择器：
#intro{font-weight:bold;}
<标签 id="intro">一个页面只可以使用一次，id是唯一标识
类选择器：
.dataPosted{color:green;}
<标签 class="dataPosted">    类可以多次引用

伪类选择器：
a:link{ color:red} /*未访问的链接*/
a:visited{ color:blue} /*已访问的链接*/
a:hover{ color:#990000; } /*鼠标指针移到上面链接的颜色*/
a:active{ color:yellow} /*活动链接*/
样式说明：
(a) p, td, li { font-size : 12px ; }
表示几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分
(b) h2 b{color:blue}/*注意h2和b之间以空格分隔*/
表示只有位于h2一标记符内的b元素具有此样式，而其他b元素不具有该样式。
CSS常用属性
 文字段落样式
font-family:设置对象中文本的字体,eg:font-family:”宋体”;
font-size：设置对象中的字体尺寸
font-style:设置对象中的字体样式（斜体）eg:font-style : normal | italic
font-weight:设置对象中的文本字体的粗细
font-weight:normal | bold | bolder | lighter | number
text-decoration:设置对象中文本的装饰，如下划线、闪烁等
text-align:设置或检索对象中文本的对齐方式
text-align : left | right | center | justify (两端对齐)
line-height:设置对象的行高，即字体最底端与字体内部顶端之间的距离
 图像颜色样式
color:设置对象的文本颜色
background:设置对象的背景特性
background-color:设置对象的背景颜色
background-color : transparent （透明）| color
background-image:设置对象的背景图片
background-image : none | url (url)使用绝对或相对地址指定背景图像
background-repeat:设置对象的背景图像是否及如何铺排
 边框样式
border:设置对象边框的特性
border-color:设置对象边框颜色
border-style:设置对象边框样式
border-width:设置对象边框宽度
border-top/left/right/bottom:
设置对象顶边/左边/右边/底部的边框的特性

CSS常用样式
 图像颜色样式
overflow:visible | auto | hidden | scroll
visible : 不剪切内容也不添加滚动条。
auto : 在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
list-style-type :disc | circle | square | decimal | none
disc : 实心圆 circle : 空心圆
square : 实心方块 decimal : 阿拉伯数字 none : 不使用项目符号
Iframe
allowtransparency:true | false（背景透明与否）
scrolling:auto | yes | no    auto为自动，yes为显示，no为不显示
a首先在框架代码中加入allowtransparency属性：
<iframe frameborder="0" scrolling="no" width="780" height="160" src="#" allowtransparency="true"></iframe>
b把嵌入iframe中的页面<body>改为：
<body style="background-color: transparent;">

 内容超出，显示…
一般的文字截断(适用于内联与块)：
.text-overflow{
display: block;/*内联对象需加*/
width:31px;
white-space:nowrap;/* 不换行，强制在同一行内显示所有文本，直到文本结束或者遭遇br对象*/
overflow: hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow: hidden;一起使用。*/}
对于表格的话，定义有一点不一样：
table{
width:100%;
table-layout: fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{ display:block;
width:57px;/*也可以使百分比，也可在里面单独定义*/
white-space:nowrap;/* 不换行 */
overflow: hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis ;}

 white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。(IE不支持)
强制换行
（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行；word-break:keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。
区别：
word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

可视化格式模型
可视化格式模型-框模型
 padding:设置对象四边的补丁边距
(padding是指层的边框到层的内容之间的空白)
 padding-top/right/left/bottom:
设置对象顶边/右边/左边/底部的补丁边
(不允许负值)
 margin:设置对象四边的外延边距
(margin是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距)
 margin-top/right/left/bottom:
设置对象顶边/右边/左边/底部的外延边距
(允许负值)
Margin/padding:
a.如果提供4个参数，按上右下左用于四边（顺时针）
b.如果提供1个参数，将用于全部的四边
c.如果提供2个参数，第一用于上下，第二用于左右
d.如果提供3个参数，第一用于上，第二用于左右,第3用于下

可视化格式模型-定位
position:对象的定位方式（absolute绝对定位/relative相对定位）
相对定位是“相对于”元素在文档流中的初始位置，而绝对定位的元素位置是相对于最近的已定位的祖先元素，如果没有已定位的祖先元素，那么它的位置是相对于最初的包含块。相对定位元素仍占据原来的空间，而绝对定位不占据空间。
top/left/right/bottom:设置对象与其最近一个定位的父对象顶部/左边/右边/底部相关的位置
相对定位：
.mybox{
position:relative;
left:20px;
top:20px;
}
绝对定位：
.mybox{
position:absolute;
left:20px;
top:20px;
}

可视化格式模型-浮动
(1)浮动框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘
Float:right
(2)如果包含块太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够的空间，如果浮动元素高度不同，那么当他们在向下移动时，可能会被其他浮动元素给卡住
clear : none | left |right | both
   none : 允许两边都可以有浮动对象
   left : 不允许左边有浮动对象
   right : 不允许右边有浮动对象
   both : 不允许有浮动对象

分享到：