css基础入门

概念

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

Css的作用

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

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

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

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

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

css的特性

1.继承性

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

[html] view plaincopyprint?
  1. body{
  2.      font-family: Verdana,sans-serif;
  3.      }

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

 

2.层叠性

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

对于层叠性处理原则:

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

如定义

 

[css] view plaincopyprint?
  1. p{color=”blue”,font-seze:10px;}
  2. .special{font-weight:blod;}
  3. #{underLine{text-decoration:underline;}
[html] view plaincopyprint?
  1. <p class=”special” id=”underLine”>中国</p>

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

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

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

如定义

 

[css] view plaincopyprint?
  1. .special{ font-weight:blod;color=”blue”;font-seze:10px;}
  2. #{underLine{text-decoration:underline;;color=”red”font-seze:14px;}
[html] view plaincopyprint?
  1. <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 – 非排序列表

标签