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:一般的块级元素诸如段落

、标题

…、列表,