css样式表的概览及作用:
- css(cascading style sheet)层叠样式表,放在头部分或外部文件或标记中。
- 外部文件后缀:.css
css基础语法和使用方法:选择符{属性:值}
- 选择符组:用,分隔,例如p,h1
- 类选择符:把相同元素分类定义不同的样式。.xxx{}-------class="xxx"
- id选择符:id参数指定某个单一元素。#xxx{}---------id=“xxx”
- 包含选择符:元素以里的元素2,例如:table a{}
- 样式表的叠层性:继承性,当样式表继承发生冲突,总以最后定义的样式为准。
- 选择符优先级:id>类>HTML标记
css层次及其作用有限:
- 行内样式表:标记内样式定义
- 文档层样式表:定义style内放在<head>内
- 外部样式表:<link rel="stylesheet" href="">
css属性单位:
- 长度单位:cm----厘米,em----M字母的宽度,ex---X字母的宽度,in英寸,mm毫米,pc皮卡,pt像素(1/72英寸)
- 百分比单位:倍数
- 颜色单位:HTML只提供十六进制和颜色
CSS提供:颜色名;#RRGGBB;#RGB;Rgb(rrr,ggg,bbb);Rgb(rrr%,ggg%,bbb%)百分比指颜色含量
css常用属性:
- 字体属性:font(综合)
字体名称属性font-family
字体大小属性font-size
字体风格属性font-style
字重属性font-weight
字体颜色:color
文字修饰text-decoration - 背景属性background(综合)
背景颜色属性background-color
背景图片属性background-image
背景重复属性background-repeat(填充方式是否重复)
背景附着属性background-attachment
背景位置属性background-position:决定图片最初位置 - 边框属性border(综合)
边框风格属性border-style
边框宽度属性border-width
边框颜色属性border-color
单边框属性:border-top上,border-bottom下,border-left左,border-right右 - css边距属性margin:一个元素所占空间的边缘到相邻元素之间的距离
左右上下:left/right/top/bottom
综合写时margin:从上开始顺时针,即上右下左
- css间隙属性padding:元素内容带元素边界的距离。
左右上下:left/right/top/bottom
综合写时margin:从上开始顺时针,即上右下左
- css列表样式属性list-style(综合)
列表样式类型属性:list-style-type
列表样式位置属性:list-style-position
列表样式图片属性:list-style-image - css金苗伪累
a:link未访问
a:visited访问过
a:hover鼠标悬浮在上的链接
a:active鼠标点中激活链接
css布局:
- css盒模型(由外到内m-b-p-c麻痹电脑)
margin外边距
border边框
padding内边框
centent内容
- 布局基础
创建div对象,定位属性position:static,absolute,fixed,relative,浮动属性float:none,left,right,top,bottom(clear清楚浮动)
- css布局结构
单列结构:宽占整行空间
二列结构:两个div两个css用float布局 - 定位属性:cursor指向某个元素之上是显示的指针类型
display是否显示元素:none/block