css 样式设置

慕课网的HTML+css基础课程

p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
显示样式为绿色

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

改变优先级！ 显示颜色为红色
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式

h1{text-decoration:overline}

   underline 定义文本下的一条线。

   overline 定义文本上的一条线。

   line-through 定义穿过文本下的一条线。

   blink 定义闪烁的文本。

任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

：IE、Chrome
或 Safari 不支持 "blink" 属性值。

p{text-indent:2em;}

缩进，2em，，为文字的两倍大小，

任意浏览器的默认字体高度16px（16像素）。

文字间距

letter-spacing:50px;中文文字间的间距，，英文字母的间距

word-spacing:50px;
英文单词间距

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：块状元素都自带换行效果；

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：内联元素都是定义行内小区域且不换行，但如果没有内容就没有意义，不占空间；

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：内联块状元素除了不换行，即使没有内容也会占空间。

<img>、<input>

块级元素特点：

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

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

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

inline:内联元素{

1，不能设置width和height；

2，多个行内元素排成一行，直到一行排不下，才会换新一行；

3，只可以设置水平方向的边距，如：margin-left,margin-right,padding-left,padding-right.}

block:块级元素{

1，块级元素独占一行；

2，可以设置width和height，默认宽度为一整行，除非单独设置宽度；

3，可以设置margin和padding属性。}

inline-block{

简而言之就是让元素既可以在一行内显示，又可以设置宽高边距等。

}

在网页中，元素有三种布局模型：

1、流动模型（Flow）流动模型，流动（Flow）是默认的网页布局模式。因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

2、浮动模型 (Float)在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

3、层模型（Layer）层模型有三种形式：

1、绝对定位(position: absolute)绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

2、相对定位(position: relative)相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

absolute表里如一，移动了就是移动了。relative只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据

3、固定定位(position: fixed)固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}

可以缩写为：

body{
font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
font:12px/1.5em  "宋体",sans-serif;
}

只是有字号、行间距、中文字体、英文字体设置。

隐形改变display

当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

 1. position : absolute 

 2. float : left 或 float:right 

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。