10月26日 css学习笔记（5）

继承：不是所有样式都能继承（全部应用）

特殊性

标签的权值为1

类选择符的权值为10

ID选择符的权值最高为100

层叠

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

重要性 important

p{color:red!important;}

文字排版

body{font-family:”宋体”；font-size:12px;}

font-family:”Microsoft Yahei”;

font-family:”微软雅黑”；

字体 font-family

字号 font-size

颜色 color:

粗体 font-weight:bold

斜体 font-style:italic

下划线 text-decoration:underline

删除线 text-decoration:line-through;

段落排版

缩进 text-indent:2em;

行间距 （行高） line-height:1.5em;

中文字间距／字母间距 letter-spacing:50px

单词间距 word-spacing:20px;

居中 text-align:center

居左 text-align:left;

居右 text-align:right;

元素分类

块元素、内联元素（行内元素）、内联块状元素

块元素：<div> <p> <h1>……<h6>、<ol>、<ul>

<dl>、<table>、<address>、<blockquote>、<form>

常用内联元素：<a>、<span>、<br>、<i>、<em>、<strong>

<label>、<q>、<var>、<cite>、<code>

常用内联块状元素：<img>、<input>

块状元素

display:block 将元素显示为块级元素

如：a｛display:bolck;｝

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素

display:inline;将元素设置为内联元素

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素

display:inline-block; 将元素设置为内联块状元素

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒子模型
边框
border:1px solid #ccc;

边框常见样式有：solid实线、dashed虚线、dotted点线

border-bottom 设置下边框样式

border-top 设置上边框样式

border-right 设置右边框样式

border-left 设置左边框样式

一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

width

padding

border

margin

填充(上右下左)

padding:20px 10px 15px 30px

padding-top:20px

padding-right:10px

padding-bottom:15px

padding-left:30px

边界

margin:20px 10px 15px 30px;

margin-top:20px

margin-right:10px

margin-bottom:15px

margin-left:30px

padding在边框内，margin在边框外