一、css是什么?作用是什么 层叠样式表(级联样式表) 实现网页外观样式二、css引入方式三种? 内联样式
内部样式表外部样式表 mystytle.css h1{ color:red;}index.html 三、css语法 选择器{ 属性名:属性值; 属性名:属性值; }h1{ color:red;font-size:16px;}四、选择器 选中html元素的方式方法1.基本选择器 标签选择 ID选择器 Class选择器2.高级选择器 层级选择器 后代选择器 E F .root p 子代选择器 E>F .root>p 相邻兄弟选择器 E+F .p1+p 通用兄弟选择器 E~F .p1~p 结构伪类选择器 E F:nth-of-type(n) F:first-of-type F:last-of-typeE F:nth-child(n) 属性选择器 E[attr] //属性attrE[attr=val] //属性attr的值以等于valE[attr=^val] //属性attr的值以val开头E[attr=$val] //属性attr的值以val结束
元素1
元素2
元素3
元素4
五、各种常用样式学习 1.字体样式 font-size 字体大小 px font-weight 字体粗细 bold http://www.runoob.com/css/css-font.html2.文本样式 color 字体颜色 值: red blue #FFEFD5 text-align 文本的对齐方式 text-decoration 文本修饰 text-indent 文本缩进
3.背景样式 background-color 背景颜色 background-image 背景图片 url("image/1.jpg") background-repeat background-position
4.列表样式
- 列表项1
- 列表项2
5.链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。链接状态：a:link - 正常，未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻6.表格样式 边框 折叠边框 例如: table ,tr,th, td{ border: 1px solid black; border-collapse: collapse; } 鼠标移入表格选中 table tr:hover{ background: blue; color: white; }
六、盒子模式
1.所有的html元素都可以看作盒子
2.盒子有那些属性Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。
3.盒子模子宽高计算方式 默认情况 元素宽度=width+左内边距+右内边距+边框 box-sizing: border-box; 元素宽度=width=内容宽度+左内边距+右内边距+边框七、页页布局
1.标准文档流2.浮动布局
1. 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 2. 浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
3. 清除浮动 3.display属性 将块元素->行内元素->行块元素 行内元素->块元素->行块元素
元素1 //块元素特点: 独占一行，可以设置宽和高; 元素
2 //行内元素特点: 内容有多宽多高，元素就有多宽多高，width,height不起作用
4.定位布局
1.精确定位元素到指定位置,而不会影响其它元素
2. position: relative|abosolut|fixed 相对定位|绝对定位|固定定位
1>相对定位 position:relative; //相对自身位置移动p{ position:relative; top:10px left:10px }
2>绝对定位
网友评论