|
css 目的 美化网页 - 把html打扮的漂亮一些，布局更自由丰富一些 选对人-- 做对事 选择器： 目的： 选择标签 基础选择器： 标签选择器; 选择某部分标签 比如可以选择所有的div 标签 所有的p标签 p { color: red;} 把所有的p 颜色改为红色 类选择器; 选择一个或者多个标签 用点来声明 class 来调用 .demo { color: red;} 我们声明了一个类名为 demo 的类 <div class="demo"></div可以重复使用很多很多次 id选择器; 用方法和类相同 只能使用一次 唯一的 #demo { color: red;} 我们声明了一个类名为 demo 的类 <div id="demo"></div> 通配符选择器 * 所有的 选择所有的标签，殊情况使用。 样式表分类（位置）： 行内式： <div style="color:red;" ></div> 内嵌式： <head> <style></style></head> 外部式： 结构和样式相分离 用link 标签给他们建立连接 常见文字css属性 字体： font-style跟斜体有关系 em i font-weight字体加粗 strong b h font-size别忘了跟单位（px） font-family综合写法 font: 斜体 加粗 字号/行高 字体; 综合写法 字号和字体一定不能省略 文本： color十六进制的颜色必须 # 开头 line-height行高 text-align让盒子里面文本或行内块元素水平居中对齐 text-indent首行缩进 例：text-indent:2em; 首行缩进2个字 text-decroation文本的修饰none取消下划，underline添加下划线 复合选择器 后代选择器 .nav p 选择元素的子孙后代 子元素选择器.nav>p 选择元素的子元素 交集选择器h3.class既有h3标签的特点，又有class标签的特点 并集选择器p,h3,a可以选择任何形式的选择器 链接伪类选择器a:link/visited/hover/active用于给链接添加特殊效果（其他标签也可是使用） 标签显示模式 块级元素（block）：独占一行可以设置宽度，高度等如果没有设置宽度，继承父元素的宽度，不继承高度里面可以放任何其他元素，（文字类块级元素不可以） 行级元素(inline)：不单独占一行，可以设置宽高等，里面只能放文字或者其他行内元素内容多大，宽高有多少 块级行元素(inline-block)：可以一行显示多个，（默认中间会有缝隙）；默认宽度是本身的宽度；可以设置宽高等 模式转换 display block,块级元素 inline,行级元素 inline-block,行级块元素 背景： 背景颜色：background-color:color默认值是transparent,透明的 背景图片：background-image: url( 图片地址 ) 背景平铺：background-repead：repead/no-reapead/repead-x/repead-y默认是repeat 背景位置：background-position:x y，x:left/right/center/像素值 默认值是centery:top/bottom/center/像素值 默认值是center，x在前，y在后 背景附着:background-attachment:scroll/fixed默认值是scroll 背景简写:background: color url(图片地址) repeat scroll x y 背景透明（css3):background:rgba(0,0,0,0.1)（控制单一颜色的透明度）最后一位取值在0-1之间，可以省略0，opacity:控制整个元素和它的子元素的透明度（css3） CSS三大属性 层叠性：相同权重的重复样式，后面的会覆盖面前的（长江后浪追前浪，前浪死在沙滩上） 继承性：子元素会继承父元素的样式，font-,text-.line-,color 优先级：权重计算公式，通配符0>标签选择器1>类选择器10>id选择器100>行内样式表1000>！important∞。权重可以叠加，不会进位，继承权重最小，小于通配符。
| 
收藏
淘帖
踩
