一、css基础语法
格式:
选择器{属性1:值1;属性2:值2;}
单位:
1.px→像素(pixel)
2.%→百分比
外容器→600px 当前容器50%→300px
基本样式:
width:宽
height:高
background-color:背景色
css注释:
/*css注释内容*/
二、内联样式与内部样式
1.内联样式
style样式
2.内部样式
style标签
区别:
内部样式的代码可以复用、符合w3c的规范标准,进行让结构和样式分开处理
3.外部样式
引入一个单独的css文件,name.css
通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址
通过@import方式引入外部样式
注:这种方式有很多问题,不建议使用
三、css中的颜色表示法
1.单词表示法:
颜色表(有局限性)
2.十六进制表示法:#000000 #ffffff
0 1 2 3 4 5 6 7 8 9 a b c d e f
3.rgb三原色表示法
rgb(0,0,0)
取值范围0~255
提取颜色的下载地址:http://www.baidufe.com/fehelper
photoshop工具
四、css背景样式
background-color背景颜色
background-image背景图
url(背景地址)
background-repeat:平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat(x,y都进行平铺,默认值)
no-repeat都不平铺
background-position:背景位置
x y:number(px、%)|单词
x:left、center、right
y:top、center、bottom
background-attachment:背景图随滚动条移动的方式
scroll:默认值(背景位置是按照当前元素进行偏移)
fixed:背景位置是按照浏览器进行偏移的
五、css边框样式
border-style:边框样式
solid:实线
dashed:虚线
dotted:点线
border-width:边框大小
px...
border-color:边框颜色
red #f00...
注:针对某一条边进行单独设置
边框也可以针对某一边进行单独设置:border-left-style:中间是方向 left、right、top、bottom
注:颜色:透明颜色 transparent
六、css文字样式
fout-family:字体类型
英文:Arial、'Times New Roman'
中文:微软雅黑,宋体
中文字体的英文名称
微软雅黑:'Microsoft YaHei'
宋体:SimSun
衬线体与非衬线体
注意事项:
1.设置多字体类型的设置目的
2.引号(字体类型中有引号)的添加的目的
fout-size:字体大小
默认:16px
写法:number(px)|单词(small large ...不推荐使用)
注:字体大小一般为偶数
font-weight:字体粗细
模式:正常(normal)、加粗(bold)
写法:单词(normal、bold)|number(100 200 .......900,100-500为正常,600-900为加粗)
font-style:字体样式
模式:正常(normal) 斜体(italic)
写法:单词(normal、italic)
注:oblique也表示是斜体,用的比较少,一般了解即可。
区别:1.italic带有属性倾斜字体的才可以设置倾斜操作。
2.oblique没有倾斜属性的字体也可以设置倾斜操作。
color:字体颜色
七、css段落样式
text-decoration:文本装饰
下划线 :underline
删除线:line-through
上划线:owerline
不添加任何装饰:none
取值
添加多个
注:添加多个文本注释(空格添加)
text-transform:文本大小写(针对英文段落)
取值
小写:lowercase
大写:uppercase
只要首字母大写:capitalize
text-indent:文本缩进
首行缩进
em单位:相对单位,1em永远都是跟字体大小相同
text-align:文本对齐方式
对齐方式:left、right、center、justify(两端点对齐)
line-height:定义行高
什么是行高:一行文字的高度,上边距和下边距的等价关系。
默认行高:不是固定值,根据当前字体变化
取值:number(px)| scale(比例值,跟文字大小成比例的)
letter-spacing:字之间的间距
Word-spacing:词之间的间距(针对英文)
强制折行:(针对英文和数字不自动折行的问题)
1.word-break:break-all(非常强烈的折行)
2.word-wrap:break-word(不是那么强烈的折行,会产生一些空白间距)
小练习
八、css复合样式
一个css属性只控制一种样式,叫做单一样式
一个css属性控制多种样式,叫做复合样式
复合样式的写法:通过空格的方式实现,复合写法有的不需要关心顺序,有的需要关心顺序
1. background:red url()repeat 0 0;
2.border:1px red solid;
3. font:
注:最少要有两个值 size family
weight style size family
style weight size/line-height family
要先写复合,再写单一。