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基础语法与高级语法：.

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设定的样式才有用，.

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

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