CSS基础

CSS全称  (cascading   style  sheet  ) 层叠样式表

作用：使网页好看绚丽，更吸引人

   什么是样式？

        样式就是一种用来修饰页面的代码，使页面没有那么呆木，我们可以对同一个标签多种修饰。

一 ，样式表：

    1.样式表种类

        行内样式表 ：位置内部style属性里面     

        内部样式表 ：网页内部style标签里面

        外部样式表 ：单独写再一个css文件里面  优先使用

                外部有两种引入方式一种是link 一种是@import

                                1.link   语法：<link rel="stylesheet" href="src/css/bootstrap.css" />

                                            link是xhtml标签   它先 加载样式表，再加载网页结构，基本上所有的主流浏览器都认识支持

                                2.@import   语法：@import url('地址');

                                               @import先加载html结构，后加载css,.有可能低版本浏览器不支持 所以不建议使用

      2.  样式表的优先级

                行内样式表>内部样式表>外部样式表

                用关键词！important 可以提升样式的优先级

       3. 样式表语法

                选择器+样式集 比如 a｛color:red｝

二，选择器

        定义：选择标签对象的一种方式

        种类：

       1.id选择器  
#d{background：red}

把网页中的所有id=a的元素背景设置为红色，需要注意的是网页里面不要出现同样名字的id，因为违背了命名规则

         2.class选择器
把网页中的所有class=a的元素背景设置为红色，需要注意的是网页里面不要出现同样名字的id，因为违背了名规则
         3.标签选择器
    h2{background：blue}
    把网页中的所有h2的元素背景设置为蓝色，需要注意的是网页里面不要出现同样名字的id，因为违背了命名规则
4.伪类选择器
5.属性选择器
[class="bo"]{}
6.派生选择器
    1.子类选择器
         #b>li{background：red}：#b里面儿子级别的li元素背景是红色
    2.后代选择器
    #b li{background：red}：#b里面所有的li元素背景是红色
    3.并集选择器
h1，b，p{background：red}
    4.交集选择器
    h1#one{background：blue}
    5.兄弟选择器
           h1~p{background：red}h1和p是同一级别
    7.全局选择器
选择器的优先级
优先级和权重又直接的关系
id  100  class  10  tag

三，样式的属性

1.文本样式
修饰文本内容
text-color
width 宽
text-align  center/left/right
text-decoration none/underline/overline/line-through
text-shadow  abcd a-x  b-y
color
1.英文
2.rgb();
3.十六进制
line-height：行高

2.字体样式
1.大小  font-size
2.类型  font-style 风格
2.粗细  font-weight
font-family 字体类型
@font-face  引入外部字体样式
3.背景样式
1.back-position 位置
2.back-color 颜色
3.back-repeat: 重复
4.back-attachment  背景固定
5.back-image
精灵图，雪碧图
雪碧图：把网页中需要的小图标整合到一张大图片上，然后在网页里引入
4.列表样式
list-style-image
position
type
5.尺寸样式
盒子模型=margin+border+padding+内容
任何一个元素都是一个盒子， 就可以放东西
如果父元素的div没有设置狂傲，他的宽高有子元素决定
1.外边距
margin-top/left/bottom/top
margin:10px;
margin:10px 20px
margin:10px 20px 30px 上10下30左右20
margin:上 左 下 右
2.边框  上右下左
border-color
border-style
border-width
3.padding 内边距
padding
left/rigth/top/bottml
padding 50px
padding 20px 30px
padding 50px 30px 10px
padding 50px 30px 10px 20px
6.内联元素和块状元素的区别
span
1.内联元素的宽高是由内容决定的。
2.margin垂直方向不起作用
3.border起效果
4.padding有效果，但是垂直方向会覆盖其他内容
div
1.宽高ok
2.margin ok
3.border ok
4.padding ok
对于块状元素
   如果内部的div和外部的div边框重叠，那么在子元素里面设置的Margin相当与设置在父元素里面
box-sizing:border-box;
7.浮动样式 float
display:inline-block;
left
right
none


    样式继承


   浮动对布局的影响
浮动的元素会脱离文档流left/right  none不脱离
overflow:hidden;溢出；
8.定位样式position
left
rigth
bottom
top
div 层
定位可以调整重叠的上下位置fi

1.定位的值有哪一些
2.哪一些是脱离文档流的
absolute   绝对 最近的被定位的父元素 也是脱离文档流的
position:absolute;

relative 相对   自己   没有脱离文档流
static 静态定位  无参照物   不脱离
fixed    固定    window   脱离
//错的理论，对的结果
z-index:2;调整位置(调整重叠层的上下位置（定位之后）)
9.溢出样式。超出范围
overflow 溢出
visible 可见
hidden 隐藏
scroll 滚动条
auto 自动


10.显示样式   display
block 块状显示
inline 内联显示
inline-block内联块状 
none关闭
11.清除样式 clear  针对浮动元素
   检测指定浮动
检测到就另起一行

然后再决定靠哪边
both  两边都不能浮动
left 不允许在左边浮动
right 不允许在右边浮动
none  允许浮动

12.可见度样式visibility
visible 显示
hidden 隐藏
13.颜色样式属性
color:英文单词 yellow
rgb rgb(a,b,c) a.b.c取值0-255


  十六进制 #ffffff  0~f
14.透明度
opacity  0-1  
15.六个伪类选择器
  前before/后after

超链接伪类
link 超链接没有被访问
hover 鼠标移动上去的时候
active 访问时
visited 点击过后