认识css及其基本属性

css 层叠样式表(cascading style sheet)

css1.0/2.0/3.0 

<!-- 内部样式引入 在头部添加 -->

<style type="text/css"> 其样式很多，例less,可使用变量

/*css语法*/

对象{

属性：属性值；

属性：属性值；

属性：属性值；

...

}

</style>

css外部样式创建

<link rel="stylesheet" type="text/css" href="../css/a.ss">

link:链接 stylesheet:样式表 href:路径

link引入：文字和网页同时加载

优点:css与h5文本分离，并且多个网页中css中有重合部分

 

外部样式导入法2(100%不用)：

<style type="text/css" >

@import url(../css/a.css);

</style>

import:先把css完全加载出页面的字，再加载css,并且其是css2.1支持的，老浏览器不支持

Javascript控制demo去控制动态效果，而import不支持demo

link import

html css

同时加载 不可同时加载

可被js控制 不可被js控制

所有浏览器 IE5浏览器以上

 

行内样式（内联样式）---不准用

直接标签内style=“”

css属性 /*像素的单位要带上*/（常用）

宽度：width:1000px;

高度：height:100px

背景颜色：background-color:red;

浮动：让元素横向排列 float: ;

 

css文本属性

• 文本大小 font-size:20px;
• 文本颜色 color:；
• 文本字体 font-family:字体1，字体2，字体3；
• 文字加粗 font-weight:bolder(更粗的)/bold(加粗)/normal(常规字)/900-100(600-900加粗，100-300细，400-500微粗)主要记100，500，900;
• 文字倾斜 font-style:italic（倾斜）/oblique（取消倾斜）/normal(常规显示);
• 水平对齐方式 text-align:left/right/center/justify（两端对齐中文不起作用）;
• 文字行高 line-height:normal/value;(在指定的高度中上下居中)
• 文本修饰 text-decoration:none（去掉下划线）/underline(添加下划线)/overline（添加上划线）/line-through（删除线）;
• 首行缩进 text-indent:20px;只对第一行起作用
• margin:auto 居中
• img{vertical-align: top;} 此代码用来解决图片往下掉的问题
• 字间距：letter-spacing:12px;(左右间距)

 

css背景属性

背景颜色background-color:

背景图片:background-image：url(背景图片的路径及全称)；

插入图片：属于网页内容，也就是结构。

背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

背景图片的显示原则:

A）容器尺寸等于图片尺寸，背景图片正好显示在容器中

B）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

C）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。

背景图片平铺属性：

background-repeat:no-repeat/repeat/repeat-x/repeat-y

no-repeat:不平铺

repeat：平铺

repeat-x：横向平铺

repeat-y ：纵向平铺

背景图片的位置

{background-position:left/center/right/数值 top/center/bottom/数值;}

水平方向上的对齐方式（left/center/right）或值 

垂直方向上的对齐方式(top/center/bottom)或值

background-position:值1 值2;

两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。

当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置

说明：向左方向，向上方向是负值

 

css列表属性

1)定义列表符号样式

list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；list- style-type:none===list-style:none;

2)使用图片作为列表符号

list-style-image：url(所使用图片的路径及全称)；

3)定义列表符号的位置

list-style-position:outside(外边)/inside(里边)；

list-style:none;去掉列表符号

 

css边框属性

border:5px solid #ff0000

边框宽度：border-width: 边框颜色：border-color:

边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框

 

css布局属性

宽度width

高度height

浮动float:left/right/none(注意：不能在中间浮动)

外边距margin:10px;

margin-top:

margin-bottom:

margin-left:

margin-right: