css基础入门

概念

cssCascading 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;}

中国


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

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

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

如定义

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

中国

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

 
行内元素与块元素区别

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

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

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

C:一般的块级元素诸如段落

、标题

…、列表,
    1. 、表格、表单、DIV
      和BODY等元素。而内联元素则如:表单元素、超级链接、图像 ……..

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

      E:在CSS定义中属于一个行内元素,而

      是块级元素。

      常见行内元素

      * 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 - 非排序列表

      你可能感兴趣的:(css+html,CSS,应用,行内样式,块级元素,层叠)