`
guomingzhang2008
  • 浏览: 160884 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

css简单介绍

    博客分类:
  • css
css 
阅读更多
(一)常用代码结构:
 
div:主要用于布局,分割页面的结构
ul/ol:用于无序/有序列表
span:没有特殊的意义,可以用作排版的辅助,例如: 引用内容
<li><span>(4.23)</span>随心生活</li>
然后在css中定义span为右浮动,实现了日期和标题分两侧显示的效果
 
h1-h6:标题
h1-h6 根据重要性依次递减
h1位最重要的标题
 
label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西,例如:
引用内容
<label for="user-password">密 码</label>
<input type="password" name="password" id="user-password" />
即鼠标点到 “密   码”上面,光标就定位到密码输入框中,如果是radio框,则该radio呗选中。

fieldset & legend:fildset套在表单外,legend用于描述表单内容。例如:
<form>
<fieldset>
<legend>title</legend>
<label for="user-password">密 码</label>
<input type="password" name="password" id="user-password" />
</fieldset>
</form>
效果如图:


dl,dt,dd:当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签,例如:
引用内容
<dl>
<dt>什么是CSS?</dt>
<dd>
CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。
</dd>
<dt>什么是XHTML?</dt>
<dd>
XHTML是一个基于XML的置标语言,看起来与HTML有些想像,只有一些小的但重要的区别。可以这样看,XHTML就是一个扮演着类似 HTML的角色的XML。本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。
</dd>
</dl>
效果如图:

 
 
 
C #content
 
S #subcol
 
M #maincol
 
X #xcol
 
这是纵向布局的XHTML结构,c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。
 
其中在三纵栏的布局需要分为两层 第一层是#subcol与#main第二层是#main中的#maincol与#xcol。
 
 
 
 
自定义命名:
根据w3c网站上给出的,最好是用意义命名
比如:是重要的新闻高亮显示(像红色)
有两种
 
引用内容
.red{color:red}
.important-news{color:red}
 
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字
 
常用的CSS命名规则:
 
头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar
 
栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left right center
 
登录条:loginbar  标志:logo  广告:banner  页面主体:main  热点:hot
 
新闻:news  下载:download  子导航:subnav  菜单:menu
 
子菜单:submenu  搜索:search  友情链接:friendlink  页脚:footer
 
版权:copyright  滚动:scroll  内容:content  标签页:tab
 
文章列表:list  提示信息:msg  小技巧:tips  栏目标题:title
 
加入:joinus  指南:guild  服务:service  注册:regsiter
 
状态:status  投票:vote  合作伙伴:partner
 

(二)注释的写法:
 
/* Footer */
 
内容区
 
/* End Footer */

 
(三)id的命名:
 
(1)页面结构
 
容器: container  页头:header  内容:content/container
 
页面主体:main  页尾:footer  导航:nav
 
侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper
 
左右中:left right center
 
(2)导航
 
导航:nav  主导航:mainbav  子导航:subnav
 
顶导航:topnav  边导航:sidebar  左导航:leftsidebar
 
右导航:rightsidebar  菜单:menu  子菜单:submenu
 
标题: title  摘要: summary
 
(3)功能
 
标志:logo  广告:banner  登陆:login  登录条:loginbar
 
注册:regsiter  搜索:search  功能区:shop
 
标题:title  加入:joinus  状态:status  按钮:btn
 
滚动:scroll  标签页:tab  文章列表:list  提示信息:msg
 
当前的: current  小技巧:tips  图标: icon  注释:note
 
指南:guild 服务:service  热点:hot  新闻:news
 
下载:download  投票:vote  合作伙伴:partner
 
友情链接:link  版权:copyright
 

(四)class的命名:
 
(1)颜色:使用颜色的名称或者16进制代码,如
 
.red { color: red; }
 
.f60 { color: #f60; }
 
.ff8600 { color: #ff8600; }
 
(2)字体大小,直接使用’font+字体大小’作为名称,如
 
.font12px { font-size: 12px; }
 
.font9pt {font-size: 9pt; }
 
(3)对齐样式,使用对齐目标的英文名称,如
 
.left { float:left; }
 
.bottom { float:bottom; }
 
(4)标题栏样式,使用’类别+功能’的方式命名,如
 
.barnews { }
 
.barproduct { }

 
注意事项::
 
1.一律小写;
 
2.尽量用英文;
 
3.不加中杠和下划线;
 
4.尽量不缩写,除非一看就明白的单词.
 
主要的 master.css  模块 module.css  基本共用 base.css
 
布局,版面 layout.css  主题 themes.css  专栏 columns.css
 
文字 font.css  表单 forms.css  补丁 mend.css  打印 print.css


参照:http://hi.baidu.com/hxzon/blog
分享到:
评论

相关推荐

    html+css简单介绍与使用

    综上所述,"html+css简单介绍与使用"这个主题覆盖了HTML的基本结构和标签,CSS的样式定义以及JavaScript的基础和交互性。通过这些文件的学习,你可以掌握创建静态网页的基本技能,并为进一步学习动态网页开发打下...

    html+js+css自我介绍

    这个名为"html+js+css自我介绍"的项目,显然利用这三种语言创建了一个动态的个人简历展示页面,其中包含了滑动滚轮效果来切换不同的界面内容。让我们详细探讨一下这三个关键元素以及它们如何协同工作来实现这样的...

    CSS3视频教程 1 CSS3介绍

    **CSS3视频教程 1 CSS3介绍** 在深入学习CSS3之前,首先我们需要理解什么是CSS。CSS,全称层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。自1996年...

    制作一个简单HTML个人网页网页——人物介绍梵高(HTML+CSS)

    - **DIV+CSS布局**: 是一种流行的网页布局方式,通过使用 `&lt;div&gt;` 标签配合CSS样式来实现网页的布局。这种方式具有良好的灵活性和可维护性,尤其适用于响应式设计,能够适应不同屏幕尺寸的设备。 - **浮动布局**: ...

    css技术介绍网页制作技术

    ### CSS技术介绍与网页制作技术 #### CSS技术概述 CSS(Cascading Style Sheets),即层叠样式表,是用于定义HTML文档外观的一种语言。它主要用于网页布局设计、颜色、字体大小等外观属性的控制,使得网页内容与...

    CSS新世界1

    作者简单介绍了几个常见的数据类型,如长度单位、颜色、百分比等,帮助读者理解CSS属性值的定义语法。同时,书中还讨论了CSS全局关键字,如`inherit`、`initial`、`unset`和`revert`,这些关键字在处理继承和重置...

    css的简单介绍

    教你简单的css入门,让新手也能快速了解css。css对于制作网页来说是一件必不可少的工具。

    基于HTML+CSS制作一个简单的家乡网页制作作业,广州介绍旅游网页设计代码 学生个人html静态网页制作成品代码

    以下是一个简单的CSS样例: ```css /* 基本样式 */ body { font-family: Arial, sans-serif; color: #333; line-height: 1.6; margin: 0; padding: 0; } .wrapin { width: 960px; margin: 0 auto; } ...

    css界面 css secret

    书中会简单介绍它们的工作原理和优势,帮助开发者提高代码组织和复用性。 8. **CSS变量和自定义属性**:讲解CSS变量(Custom Properties)的使用,让开发者能够更方便地管理和复用样式,实现动态主题切换。 9. **...

    css4.0介绍

    比如,`radial-gradient`和`conic-gradient`的增强让创建复杂渐变变得更加简单,而`shape-outside`属性则支持非矩形内容流布局,可以创建出更具创意的设计。 尽管CSS4.0的许多特性目前仅在实验性浏览器中可用,但...

    一些简单的CSS样式

    "一些简单的CSS样式"这个主题旨在介绍CSS的基础知识,帮助初学者快速上手。 1. **CSS基本概念**: - CSS是层叠样式表的缩写,它主要负责定义网页元素的外观、布局和结构。 - CSS通过分离内容和表现,使得网页设计...

    一个简单的网页设计div+css

    网页设计是创建交互式、视觉吸引的网页的过程,其中“Div+CSS”是一种常见的布局技术,用于实现网页的结构化和样式控制。Div(层)是HTML中的一个块级元素,用于组织页面上的内容,而CSS(层叠样式表)则负责定义...

    Css3 animation---介绍如何实现css的动画

    例如,我们可以定义一个简单的从左到右移动的动画: ```css @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } ``` 这个例子中,`0%`表示动画开始时,...

    h5+css 实现简易商城首页

    6. 动画和过渡:虽然项目没有使用JavaScript,但CSS可以实现简单的动画效果,如淡入淡出、滑动等。 7. 响应式图像:利用`&lt;img&gt;`标签的`srcset`和`sizes`属性,根据设备的视口大小加载不同的图像资源。 8. CSS预...

    简单橙色CSS网页模板

    【简单橙色CSS网页模板】是一种适用于商务、企业、商业公司设计的网页设计资源,它以其醒目的橙色调和简洁的设计风格吸引用户。在网页设计领域,CSS(层叠样式表)是用于控制网页元素样式和布局的重要技术,而HTML...

    CSS教程宝典里面简单介绍了css的基础

    **CSS(层叠样式表)**是网页设计中不可或缺的一部分,它用于定义和控制网页的外观和布局。这个“CSS教程宝典”旨在为初学者提供一个基础的指引,帮助他们理解和掌握CSS的核心概念。 首先,我们需要理解CSS的基本...

    制作一个简单HTML宠物猫网页(HTML+CSS)

    - **TextPad**: 一款简单的文本编辑器,支持语法高亮等功能。 - **Notepad++**: 一款免费的源代码编辑器和Notepad替代工具,支持多种编程语言。 ### 7. 网页设计原则 - **页面风格统一**: 所有页面应保持一致的布局...

    简单蓝色CSS网页模板

    【简单蓝色CSS网页模板】是一种常见的网页设计资源,主要用于创建具有蓝色调的清新、简约风格的网站。在网页设计领域,CSS(层叠样式表)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它...

    CSS3学习必备书籍《CSS3 实战》

    这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一系列令人眼前一亮的效果,这比我们之前用 JavaScript 去模拟这样的效果要好得多,不仅降低了复杂度,变得易维护...

Global site tag (gtag.js) - Google Analytics