css基础入门

标签: css 基础 | 发表时间:2013-05-23 07:58 | 作者:leimengyuanlian
出处:http://blog.csdn.net

概念

css是Cascading Style Sheets的缩写,是一种用于为Html文档定义布局的样式表语言。

Css的作用

Css是一种样式表语言,用于为html定义布局。

Css弥补了Html对标记属性控制的不足。

Css将网页内容与样式实现分离,使得网页设计更加明了、简洁。

Css可以精确控制网页布局,如行间距、字间距、段落缩进和图片定位等。

Css极大地提高了工作效率。如需对网页进行全局更新,只需简单地改变样式,然后网站中的所有元素均会自动的更新。

css的特性

1.继承性

css的继承是指被包在内部的标签将拥有外部标签的样式性质。如在Body标签中定义的所有样式都会应用到Body内的标签中。

body{
     font-family: Verdana,sans-serif;
     }

    body中的子元素诸如 p,td, ul, ol, ul, li, dl, dt,和 dd如没有设定font-family的样式的话,他们会继承body所设定的font-family样式。


2.层叠性

    层叠性是指有多个选择器都作用于同一元素。

     对于层叠性处理原则:

a.如果多个选择器定义样式不发生冲突,则元素将应用所有选择器样式

     如定义

p{color="blue",font-seze:10px;}
.special{font-weight:blod;}
#{underLine{text-decoration:underline;}

<p class="special" id="underLine">中国</p>

     此时中国两个字样式将应用p、special、underLine三个选择器所设置的样式即颜色为蓝色、字体大小为10px、加粗、加下划线。

b.如果多个选择器定义的样式发生冲突,则Css按选择器的优先级让元素应用优先级高的选择器定义的样式。

Css选择器的优先级顺序:行内样式>ID样式>类别样式>标记样式

如定义

.special{ font-weight:blod;color="blue";font-seze:10px;}
#{underLine{text-decoration:underline;;color="red"font-seze:14px;}

<p class="special" id="underLine">中国</p>
     此时中国两个字样式将应用special、underLine两个选择器所设置的样式,但重叠样式按优先级选择即颜色为红色色、字体大小为10px、加粗、加下划线。

 
行内元素与块元素区别

     任何不是块级元素的可见元素都是行内元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid#000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。p、h1、或div等元素常常称为块级元素,这些元素显示为一块内容;Strong,span等元素称为行内元素,它们的内容显示在行中,即“行内框”。(可以使用display=block将行内元素转换成块元素,display=none表示生成的元素根本没有框,也既不显示元素,不占用文档中的空间)

A:行内就是在一行内的元素,只能放在行内;块级元素,就是一个四方块,可以放在页面上任何地方。

B:说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。

C:一般的块级元素诸如段落<p>、标题<h1><h2>…、列表,<ul><ol><li>、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如:表单元素<input>、超级链接<a>、图像<img>、<span> ……..

D:块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

E:<span>在CSS定义中属于一个行内元素,而<div>是块级元素。

常见行内元素

* a - 锚点

* abbr - 缩写

* acronym - 首字

* b - 粗体(不推荐)

* bdo - bidi override

* big - 大字体

* br - 换行

* cite - 引用

* code -计算机代码(在引用源码的时候需要)

* dfn - 定义字段

* em - 强调

* font - 字体设定(不推荐)

* i - 斜体

* img - 图片

* input - 输入框

* kbd - 定义键盘文本

* label - 表格标签

* q - 短引用

* s - 中划线(不推荐)

* samp - 定义范例计算机代码

* select - 项目选择

* small - 小字体文本

* span -常用内联容器,定义文本内区块

* strike - 中划线

* strong - 粗体强调

* sub - 下标

* sup - 上标

* textarea - 多行文本输入框

* tt - 电传文本

* u - 下划线

* var - 定义变量

  

常见块级元素

* address - 地址

* blockquote - 块引用

* center - 举中对齐块

* dir - 目录列表

* div - 常用块级容易,也是csslayout的主要标签

* dl - 定义列表

* fieldset - form控制组

* form - 交互表单

* h1 - 大标题

* h2 - 副标题

* h3 - 3级标题

* h4 - 4级标题

* h5 - 5级标题

* h6 - 6级标题

* hr - 水平分隔线

* isindex - inputprompt

* menu - 菜单列表

* noframes -frames可选内容,(对于不支持frame的浏览器显示此区块内容

* noscript -)可选脚本内容(对于不支持script的浏览器显示此内容)

* ol - 排序表单

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

作者:leimengyuanlian 发表于2013-5-23 7:58:02 原文链接
阅读:33 评论:0 查看评论

相关 [css 基础] 推荐:

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

css基础入门

- - CSDN博客推荐文章
css是Cascading Style Sheets的缩写,是一种用于为Html文档定义布局的样式表语言. Css是一种样式表语言,用于为html定义布局. Css弥补了Html对标记属性控制的不足. Css将网页内容与样式实现分离,使得网页设计更加明了、简洁. Css可以精确控制网页布局,如行间距、字间距、段落缩进和图片定位等.

CSS基础学习

- - CSDN博客推荐文章
1.    CSS基础介绍:. (1)      CSS的作用:兼容、实现了将页面内容与页面表现相分离. (2)      当文档中的某一元素被多处样式定义时,究竟会使用那个样式呢.                 内联样式--->内部样式表--->外部样式表--->浏览器缺省设置. 2.    CSS基础语法与高级语法:.

[来自异次元] 学习网站开发必备推荐!30天学会HTML和CSS基础入门视频教程 (免费精品课程)

- youyizi - 异次元软件世界
很多人都对制作网站很有兴趣,我们之前就有介绍过一些傻瓜式的建站工具如 Tap.cn,也有介绍过一些诸如 WordPress 的视频教程. 不过前者对于想学习的人来说作用不大,后者入门门槛又稍高. 于是今天给大家介绍一套HTML+CSS的入门视频教程. 一直以来很多朋友来信询问我如何学习网站开发,我的建议总是必须先学扎实的 HTML+CSS基础,毕竟它们是构成网页的根本.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.