css基础入门

来源：互联网发布：郭天祥单片机视频教程编辑：程序博客网时间：2024/05/22 23:58

概念

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