前端CSS

         层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

        什么是css

                CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素

                多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的 应用优先级高的，不冲突的共同作用

基础语法

        选择器{属性:值;属性:值}

注意事项                   

        请使用花括号来包围声明

        如果值为若干单词，则要给值加引号

        多个声明之间使用分号;分开

        css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

   css导入方式

        内嵌方式(内联方式)

                把css样式内嵌到html中,类似属性的用法

        内部方式

                在head标签中使用style标签引入css

        外部方式

                将css样式抽成一个单独文件,使用者直接引用

        @import方式

                在页面中引入一个独立的单独文件               

                        link和@import方式的区别：

                                        link所有浏览器都支持，@import某些版本低的IE不支持

                                        @import是等待html加载完成才加载        

                                        @import不支持js动态修改

CSS选择器

        基本选择器

                元素选择器:在head中使用style标签引入在其中声明元素选择器:html标签

                id选择器:给需要修改样式的html元素添加id属性标签,在head中使用style标签引入在其声明id选择器#id(属性:属性值)

                class选择器:给需要修改样式的html元素添加class属性标识,在head中使用style标签引入在其中声明class选择器  .class名{属性:属性值}

                备注：以上基本选择器的优先级从高到低：id选择器，class选择器，元素选择器

属性选择器

        根据元素属性和属性的值来选择元素,在head中使用style标签引入在其中说明.

        格式为:

                html标签[属性="属性值"]{css属性,css属性值}

                html标签[属性]{css属性,css属性值}

伪元素选择器

        主要针对a标签

                        语法:

                                静止状态:a:link{css属性}

                                悬浮状态:a:hove{css属性}

                                触发状态:a:active{css属性}

                                完成状态:a:visited{css属性}

层级选择器

        父类选择器,子类选择器

CSS属性

        文字属性

属性名	取值	描述
font-size	数值	设置字体大小
font-family	默体、宋体、楷体等	设置字体样式
font-style	normal正常; italic斜体;	设置斜体样式
font-weight	100~900数值;bold;bolder;	粗体样式

 文本属性

属性名	取值	描述
color	十六进制;表示颜色的英文单词;	设置文本颜色
text-indent	5px缩进5像素;20%缩进父容器宽度的百分之二十;	缩进元素中文本的首行
text-decoration	none;underline;overline;blink;	文本的装饰线
text-align	left;right;center	文本水平对齐方式
word-spacing	normal;固定值;	单词之间的间隔
line-height	normal;固定值;	设置文本的行高
text-shadow	四个取值依次是： 水平偏移；垂直偏移；模糊值；阴影颜色；	设置阴影及模糊效果

背景属性

属性名	取值	描述
background-color	16进制;用于表示颜色的英语单词;	设置背景色
background-image	url('图片路径')	设置背景图片
background-repeat	repeat-y;repeat-x;repeat;no-repeat;	设置背景图的平铺方向
background-position	top;bottom;left;right ; center;	改变图像在背景中的位置

 列表属性

属性名	取值	描述
list-style-type	disc等	改变列表的标识类型
list-style-image	url("图片地址")	用图像表示标识
list-style-position	inside;outside	标识出现在列表项内容之外还是内部

尺寸属性

        width:设置元素宽度

        height:设置元素高度

显示属性

        显示属性display,常用取值

                none:不显示

                block:块级显示

                inline:行级显

轮廓属性        

属性名	取值	描述
outline-style	solid(实线)/dotted(虚线)/dashed(虚线)等	设置轮廓的样式
outline-color	16进制;用于表示颜色的英文	设置轮廓的颜色
outline-width	数值	设置轮廓的宽度

 浮动属性float        

        浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

        请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

clear属性:规定元素的那一侧不允许其他浮动元素,取值

取值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

 定位属性

        相对定位(relative):元素框偏移某个距离,元素仍保持未定位之前的形状,它原本所占的空间保留

        绝对定位(absolute)：元素框从文档流完全删除，并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框。

        固定定位(fixed)：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身

CSS盒子模型

          边框相关属性                

属性名	取值	描述
border-style	solid;double;dashed;dotted等	设置边框的样式
border-color	16进制;用于表示颜色的英文;	设置边框的颜色
border-width	数值	设置边框的粗

        外边距相关属性

                margin:外间距,边框和边框外层的元素距离

属性名	取值	描述
margin	top;right;bottom;left	四个方向的距离
margin-top	数值	上间距
margin-bottom	数值	下间距
margin-left	数值	左间距
margin-right	数值	右间距

        内边距相关属性

padding:内间距,元素内容和边框之间的距离(top right bottom left))

描述
padding-left
padding-right
padding-top
padding-bottom

CSS3属性值

        border-radius创建圆角

        box-shadow:用于向方框添加阴影

        background-image为指定元素使用多个背景图

        text-shadow:可向文本应用阴影