css书写样式

<!--内联样式-->
<p style="color: yellow;">一段文字</p>

选择器：

内部样式 外联样式

建立.css文件

层叠优先级 ：内联>内部>外部

<!--css又叫 层叠样式表-->

 

<style>

    /*元素选择器*/

  p{

color: aqua;

}/*类选择器*/

.first{

color: blue;  

}/*id选择器*/

#sec{

color: darkturquoise;

}

</style>

Id选择器命名是唯一的

奇偶选择器

Odd  even

.first:nth-child(odd){

color: blue;

权限：id选择器>class选择器>元素选择器

字体相关属性

<style>

    /*字体大小 字体样式（斜体） 字体样色 加粗

    字体（如宋体 ···）*/

    .text{

        font-size: 20px;

        font-style: italic;

        color: magenta;

        font-weight: bold;

        font-family: 宋体;

    }

</style>

 

段落相关属性：

.text{

  /*  行间距（行高），字符间距，首行缩进

    对其方式，文本修饰*/

    line-height: 20px;

    word-spacing: 40px;

    text-indent: 50px;

    text-align: center;

    text-decoration: underline;

}

尺寸相关属性

.text{

    min-width: 100px;最小宽度

    max-width: 200px;最大宽度

    min-height: 100px;最小高度

    max-height: 200px;最大高度

    background-color: yellow;背景颜色

}.text{

盒子模型

外边距 

内边距

边框

父子元素之间留白，用父元素的padding，兄弟之间留白用margin

块级元素的居中：margin：oauto。

Display

显示模式布局，display

代码中空格和回车会被当做字符显示在页面上

基线对齐

对齐方式是在父元素中设置

Float

Clear：both消除浮动对兄弟元素的影响

Overflow：hidden 本意是超出部分隐藏 在这里我们用作用清楚对浮动元素产生的影响

定位：

相对定位relative

相对于原来的位置进行定位

绝对定位：absolute

相对于最近一个拥有定位属性（除static以外）父类元素定位，父相子绝，脱离原有的文档流（原来的位置不见了）

固定定位：fixed

相对于浏览器窗口定位，脱离原有的文档流（原来的位置不见了）

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

 

所有元素可继承：visibility和cursor。

 

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

 

终端块状元素可继承：text-indent和text-align。

 

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。