css简介 什么是CSS 层叠样式标签，css对html进行样式修饰。
样式表：css属性样式的集合，不同的css样式对同一个html标签进行修饰，按照优先级先后引用
css的作用 修饰html使其html的样式更加好看
提高属性的复用性
html内容与样式相分割开，便于后期维护
css的引入方式和书写规范 内嵌样式 1 2 3 4 5 6 将属性直接写到标签内 <div style ="width:50px;color:blue;font-size:50px" > 你们好</div > 语法： 1.使用style属性，将样式嵌入到html标签中 2.属性写法： 属性：属性值 3.多个属性之间使用;分开
内部样式 在head标签中，使用style标签对css属性的引入
外部样式 1 2 3 4 5 6 7 8 将css 提取成一个特有的文件，放置在指定的文件夹中，谁使用，谁引用即可。 <link rel="stylesheet" type="text/css" href="路径" /> 语法： 1.创建css 文件，将css 属性写到文件中， 2.在head 中使用link 标签进行引入 3.属性的写法: 属性：属性值 4.多个属性之间使用分号;隔开
css选择器 基本选择器 标签选择器 1 2 3 4 5 标签名{ 属性：属性值; 属性：属性值 } <标签名> </标签名>
id选择器 1 2 3 4 5 #id { 属性:属性值； 属性:属性值 } <div id="id值">this is a div</div>
类型选择器 ps:对使用三种基本选择器对同一个标签进行修改，id>class>标签
属性选择器 伪元素选择器 1 2 3 4 5 6 7 选择器:伪元素 { 属性:属性值; } CSS 类也可以与伪元素配合使用：选择器 .类名:伪元素 { 属性:属性值; }
伪类选择器 1 2 3 4 5 6 7 选择器 : 伪类 { 属性: 属性值 } //CSS 类也可与伪类搭配使用。 选择器 .class : 伪类 { 属性: 属性值 }
1 2 3 4 5 6 7 8 9 10 11 a 四种状态 1.未选中状态 a:link{ css属性} 2.悬浮状态 a:hover{css属性} 3.出发触发状态 a:active{css属性} 4.完成状态 a:visited{css属性} 四个伪类的声明顺序应该是：':link'、':visited'、':hover'、':active' 提示：在 CSS 定义中，a :hover 必须被置于 a :link 和 a :visited 之后，才是有效的。 提示：在 CSS 定义中，a :active 必须被置于 a :hover 之后，才是有效的。 提示：伪类名称对大小写不敏感。
first-child 第一个元素
1 2 3 4 p :first-child { 属性：属性值; } 注释：必须声明 <!DOCTYPE >，这样 :first-child 才能在 IE 中生效。
派生选择器 一层一层向下获取标签，遵循元素属性和id选择方式的规则，不同层级之间需要添加 空格
1 2 3 4 5 6 7 8 9 h2 strong { color : blue; } #len li { text-align：right; } .fancy td { background :#566 ; }
后代选择器 1 2 只对 h1 元素中的 em 元素应用样式 h1 em {color :red;}
子元素选择器 1 2 只作为 h1 元素子元素的 strong 元素 h1 > strong {color :red;}
相邻兄弟选择器 1 2 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素 h1 + p {margin-top :50px ;}
css属性 文字属性 1 2 3 4 font-size : 80px ;font-family: '黑体'; font-style : italic ;font-weight :blod
文本属性 1 2 3 4 5 6 color :red ;text-decoration :下划线 属性值：none underline text-align 对其方式 属性值：left right center line-height
背景属性 1 2 3 4 5 6 7 8 9 10 11 12 background-color :background-image :背景图片background-repeat :平铺方式background-position : 左 上background:red url("./img.gif") no-repeat right top; position 指定位置body { background-image :url ("buy.gif" ); background-repeat :no-repeat; background-position : left top; }
列表属性 1 2 3 list-style-type 列表前面的小标志list-style-image 列表前面的小图片url (图片地址);
尺寸属性 显示属性 1 2 3 4 5 6 7 8 9 10 11 display block 块级显示 none 隐藏inline 行级显示.css { display :block//"把行内标签变为块级标签显示 } // 示例：form表单提交显示 span内容； function btnclick(){ var sp = document.getElementById(" span"); sp.style.display=" inline" }
定位属性 1 2 3 4 5 position ：定位位置 static relative fixed absolute
Static定位 HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom,
Fixed定位 元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
Relative定位 相对定位元素的定位是相对其正常位置
Absoulute定位 绝对位置，相对于html边界的距离，可以将元素设置到页面的任何位置；
浮动属性 1 2 3 4 float ： 浮动位置 相对于父容器的位置 left right //clear可以清楚浮动，浮动会对正常排序的标签造成影响，所以在使用浮动后，我们通常要进行清除浮动==》.clear{clear:both}
浮动造成的问题：
1、边框和背景不能撑开
2、影响下一个标签的正常显示
盒子模型 CSS 盒子模型(Box Model)是什么？ 1 2 3 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
属性 border边框 border-left/right/bottom/top 边框位置
border-style:线型
border-width:线粗 ，可以指定边框的宽度
【边框指定宽度的方法】：1、可以指定长度值，比如20px或者0.2em等等；
或者2、使用3个关键字之一（thick、medium默认值、thin）
border-color；线颜色
padding内边距 1 2 3 4 padding :1px 2px 3px 4px ;上右下左padding:1px 2px;上下/左右 padding :1px 2px 3px ;padding-top :单独设置
margin外边距 1 2 3 4 5 margin :10px ;代表上下左右都是10px margin :1px 2px 3px 4px ;上右下左margin:1px 2px;上下/左右 margin :1px 2px 3px ;margin-top :单独设置
css边框 直角边框 示例：css设置三角图形border-xxx位置的-color
1 2 3 4 5 6 7 8 9 10 11 12 <style > .tr1 { width: 0; height: 0; border: 100px solid transparent; border-top-color: red; border-bottom: none; /* border-left-color: transparent; border-right-color: transparent; */ } </style > <div class ="tr1" > </div >
border-xxx位置的-color可能设置的值
值
描述
color_name 规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent
默认值。边框颜色为透明。
inherit
规定应该从父元素继承边框颜色。
圆角边框 用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop
边框属性：
1 2 3 border-radius ： box-shadow 元素阴影 text-shadow 文字阴影
基本语法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 { box-shadow :[inset] x-offset y-offset blur-radius spread-radiuscolor } {box-shadow :[投影方式] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
示例：阴影圆角
多背景应用： background-image: url(../img/bookcover/101.jpg),url(../img/bookcover/103.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, no-repeat;
