`
xunmenglanying
  • 浏览: 8467 次
  • 性别: Icon_minigender_2
  • 来自: 西安
社区版块
存档分类
最新评论

css基础样式

    博客分类:
  • 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">      导入样式
<!--@import url("style.css");-->
</style>
<style type="text/css">    内嵌样式
<!--body{font-family:"宋体";font-size:12px;color:#f00;}-->
</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 : 不允许有浮动对象

分享到:
评论

相关推荐

    css 基础样式 base.css

    css基础样式

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    【CSS基础学习】是网页设计领域中的重要环节,它是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS(层叠样式表)让网页设计者能够分离内容与表现,使得网页设计更加灵活且易于...

    css样式基础版

    css样式,很好用好,很不错,可以试试

    css基础样式归纳, 使用较多的样式

    css基础样式归纳

    CSS基础样式

    CSS一些基础标签样式,有助与新手学习

    25种分页css样式

    1. **CSS基础样式**:通常,分页由数字、"上一页"和"下一页"按钮组成。CSS可以用来定义这些元素的颜色、字体、大小、边框、背景以及间距等属性,以适应网站的整体设计风格。 2. **响应式设计**:在现代网页中,分页...

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    CSS样式初始化commonInitialize.css

    CSS初始化的目的就是创建一个统一的基础样式,覆盖这些默认样式,提供一个干净的样式起点。 在"commonInitialize.css"中,通常会包含以下几类初始化内容: 1. **重置默认样式**:这一步是为了消除浏览器之间的样式...

    50个CSS超炫丽button样式代码

    1. CSS基础样式:CSS(层叠样式表)是用于描述HTML或XML(包括SVG、MathML等各种XML方言)文档样式的语言。在button样式设计中,基本属性如`color`、`font-size`、`background-color`、`border-radius`、`padding`和...

    CSS基础教程PDF

    ### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**,全称为 **Cascading Style Sheets**(级联样式表),是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观,如字体、颜色、间距、大小...

    CSS基础学习源码

    本“CSS基础学习源码”是一个适合初学者的资源包,提供了丰富的实践材料,帮助理解并掌握CSS的基础知识。 首先,我们来详细探讨CSS的基础概念: 1. **选择器与声明**:CSS的核心在于选择器和声明。选择器用于定位...

    CSS样式基础

    CSS样式基础语法、高级语法、选择器等,是你学习CSS有很大的帮助

    html&css入门基础知识点.pdf

    HTML和CSS基础知识点 HTML是用来描述网页的一种语言,指的是超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...

    div+css基础

    ### div+css基础知识点 #### CSS简介 - **定义**:CSS全称为Cascading Style Sheets,即级联样式表,是一种用来描述HTML文档外观和格式的语言。 - **作用**:CSS主要用于控制网页布局和样式设计,使得网页更加美观...

    Div+CSS网页样式与布局从入门到精通 实例

    1. **CSS基础**:首先,你需要了解CSS的选择器,如元素选择器、类选择器、ID选择器等,以及如何为元素设置样式,如颜色、字体、大小、边距、填充等。此外,还要学习CSS的盒模型,它是理解元素尺寸和布局的关键。 2....

    CSS基础知识学习笔记

    ### CSS基础知识学习笔记 #### 一、CSS简介与基本概念 **CSS**(Cascading Style Sheets)即层叠样式表,...以上是CSS基础知识的一些核心概念和属性,熟练掌握这些基础知识可以帮助开发者更好地控制网页的布局和样式。

    CSS层叠样式表学习指南

    层叠样式表的基础入门。 CSS 结构和规则 各种选择符、伪类、伪元素和层叠顺序的入门。 CSS 属性 各种层叠样式表级别一有效的属性的描述。 将样式表加入到HTML中 各种将样式表加入到HTML文本中的方法。 ...

    css基础教程-适合初学者

    在IT领域,CSS...总结,学习CSS基础不仅涉及语法和选择器,还包括布局、响应式设计以及预处理器的使用。通过不断实践和了解这些概念,初学者可以逐步提升CSS技能,从而更好地设计和构建美观、功能完善的网页。

    CSS基础知识.pdf

    【CSS基础知识详解】 CSS,全称为Cascading Style Sheets,中文通常翻译为“层叠样式表”,是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性,让网页设计更加灵活多样。自IE 3.0开始,浏览器...

    网页设计CSS样式表基础.ppt

    CSS样式表基础.ppt

Global site tag (gtag.js) - Google Analytics