WEBBASIC---CSS

CSS 层叠样式表单
网页的三个层次:
- 内容层:HTML承载页面的内容
- 表示层:CSS的作用就是给网页做化妆的,实现显示效果
- 行为层:JS为网页添加程序行为

第一个CSS

    <style type="text/css">
    /* 第一个CSS(在CSS中只能有这种格式的注释) */
    p {
        color: red;
    }
    </style>

CSS的三种使用方式

内联式CSS:
- 直接写在标签的style属性中的CSS样式
- 具有最高的优先级别
- 只作用在当前元素上,不能复用的样式
```

<p style="color:#00f">内联式CSS</p>
```
网页内嵌式:
- 使用<style>元素嵌入到页面中的CSS样式,在<head>中用<style>引入
- 作用在当前页面中的元素,可以在当前页面中复用
```
<style type="text/css">
/* 第一个CSS(在CSS中只能有这种格式的注释) */
p {
    color: red;
}
```
外部样式
- 样式保存在.css文件中
- 使用<link>元素引用到当前页面中在<head>中引入
```
<link rel="stylesheet" href="http://cdn.tmooc.cn/tmooc-web/css/iconfont.css">
```
- 可以作用在所有引用了CSS文件的网页,可以在这些网页中复用
@ipmort样式:link外部样式所有浏览器都支持,而该方式低版本IE不支持;@import方式是再html加载完毕之后再加载;不支持js动态修改
```
    <style type="text/css">
        @import url("css地址");
    </style>
```

CSS样式的优先级

当内联样式,内部样式,外部样式,等多个样式同时作用在同一个元素时,元素最终优先采用哪个样式.称为:样式的优先级.

浏览器(用户代理)默认样式优先级最低
内部样式和外部样式,哪个距离元素近哪个生效,从前到后一次覆盖

内联样式优先级最高

//demo
<style type="text/css">
p {
    color:red;  /*红色*/
}
h2 {
    color:red;
}
p {
    color:#ff0; /*黄色*/
}
</style>
<link rel="stylesheet" href="test.css"><!-- 蓝色 -->
<style type="text/css">
p {
    color:gray;
}
</style>

CSS的继承特性

元素有父子嵌套关系的时候,外层设置的可继承CSS属性,可以被子元素继承.(border不可继承)

不可继承的：display、margin、border、padding、background、height、min-height、
           max-height、width、min-width、max-width、overflow、position、left、
           right、top、bottom、z-index、float、clear、table-layout、vertical-align、
           page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、
              font-family、font-size、font-style、font-variant、font-weight、
              text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

CSS语法

选择器(用于选择样式作用范围) {
    样式属性组(属性:值;属性:值;...)
}

选择器

元素选择器:使用元素名选择全部的同类元素
```
模板:
p/h1/a/img {color:red}
```

id选择器:使用#id选择页面中唯一的一个元素

#menu {color;red}

<style type="text/css">
/* #menu : 用于选择唯一的一个元素*/
#menu {
    color:red;
    background-color:#ddd;
}
</style>
</head>
<body>
    <h1>选择器</h1>
    <h2>id选择器</h2>
    <p>这是一个文本</p>
    <p id="menu">传奇好玩嘛?</p>
</body>

类选择器:使用.class选择一组具有相同class属性的元素

.error {color:red}

<style type="text/css">
.error {
    color: red;
}

.fld {
    background-color: #ddd;
}

.text {
    background-color: #ddd;
}
</style>
</head>
<body>
    <h1>类选择器</h1>
    <div>
        <!-- class元素中可以定义多个类,用空格隔开 (实现统一和特殊==>实现符合效果) -->
        <label class="error fld">用户</label> <input class="error text"
            type="text"> <span class="error fld">必须输入</span>
    </div>
    <div>
        <label class="fld">密码</label> <input type="password"> <span
            class="fld">8~10个字符</span>
    </div>
</body>

派生选择器:利用元素的层级关系选择元素,绑定样式

<style type="text/css">
    ul{
        color:red;/*颜色,字体可继承*/
    }
    ul li {
        border: 1px solid blue;
    }
</style>

<style type="text/css">
body {/*一般在body中设置全局可继承参数*/
    color:gray;
    font-family: 'Consolas','文泉驿正黑','黑体';
    font-style: italic;
}
`#index>li>ul>li {
    border: 2px solid #dde;
}
</style>

选择器组:为了给一组元素设置一致的样式,可以使用组选择器

伪类选择器:用于设置元素在不同显示状态下的效果

鼠标悬停:hover,用于设置鼠标停留在元素上面时候的显示效果
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2

:lang 向带有指定 lang 属性的元素添加样式。 2

<style type="text/css">
    /*hover: 用于设置鼠标悬停在li上面的效果*/
    `#list li:hover {
        color: #fff;
        background-color: #000;
    }
</style>
<style type="text/css">
    input {
        border: 1px solid #ddd;
    }
    /*设置input输入框获得焦点时候的伪类效果*/
    input:FOCUS {
        border: 1px solid red;
        background-color: yellow;
    }
    .btn {
        border: 2px outset #ddd; /*突出边框*/
        background-color: #eee; /*按钮背景色*/
        text-align: center; /*文字居中*/
        cursor:pointer;/*设置鼠标箭头*/
        width:100px;
    }
    /*设置按钮被按下去的效果*/
    .btn:ACTIVE {
        border: 2px inset #ddd;
        background-color: red;
    }
</style>
<style type="text/css">
    label:HOVER {
        color:yellow;
    }
    /*未访问的连接*/
    a:LINK {
        color:blue;
    }
    /*访问过的连接*/
    a:VISITED {
        color:red;
    }
</style>
<style type="text/css">
    .txt {
        font-family: '黑体'; /*字体*/
        text-indent: 2em; /*文本缩进2个字符宽度,通常情况下,中文缩进2个字符宽度*/
        font-size: 24px; /*设置字体12像素*/
        line-height: 1.6em; /*行高--设置文件的行间距*/
        color:#d54747;
        text-decoration:blink;
    }
    h2 {
        text-align: center;/*块元素中的文本居中*/
    }
    a {
        text-decoration: none;/*消除下划线*/
    }
</style>

复合使用选择器id,类,元素,伪类,等选择器都可以组合使用
p.error 选择p元素,其calss

CSS常用属性

值得单位

px:像素
em:字体大小-->设置行高
% 百分比 --> 处理页面布局
颜色字面量 red blue等;16进制颜色(RGB)

文本相关属性

文字缩进
```
text-indent:2em
```
设置字体大小
```
font-size:12px;
```
设置行高
```
line-height:1.6;
```
设置字体颜色
```
color: RGB
```
设置文本居中
```
text-align:center;
```

盒子模型

页面元素绘制时候占用的页面的方式

盒子外边界margin相互侵占

<style type="text/css">
.demo {/*公共部分抽取类:利用类选择器复用样式*/
    width:100px;/*设定内容区域的宽*/
    height:80px;/*设定内容区域的高*/
    padding:20px;/*内边距:内容与盒子边界的缝隙*/
    border:3px dashed #ddd;/*设定边框,盒子皮的厚度*/
    /*背景绘制在内边距之内,外边距范围不绘制背景*/
    background-color:#ff0;
}
#box {
    margin:8px;/*外边距:盒子与盒子之间的距离*/
}
#box2 {
    /*id选择器优先于类选择器*/
    border:3px dashed #00f;/*设定边框,盒子皮的厚度*/
    /*margin:18px;*//*同时设置外边距的长款高*/
    /*margin-left:8px;*//*单独设置左侧外边距*/
    /*margin-right:8px;*/
    /*margin-top:18px;*/
    /*margin-bottom:8px;*/
    margin:18px 8px 8px/*margin:上右下左,单行社会之4边属性.从后向前可以省略数值,们就会使用对边代替*/
}
</style>

<div>盒子模型</div>
<div id="box" class="demo">范传奇呵呵</div>
<div id="box2" class="demo">盒子模型外边距margin侵占</div>

盒子模型中的内容

一般情况下,如果不设置宽高,盒子随着内容自动增长,当设置了宽高以后,如果内容超过盒子的范围,可以利用溢出属性设置内容显示的方式.

<style type="text/css">
    .c1, .c2, .c3, .c4 {
        border: 2px solid #00f;
        margin: 10px;
    }

    .c2, .c3, .c4 {
        width: 100px;
        height: 80px;
    }

    .c3 {
        /*设置溢出属性隐藏:则溢出部分不再显示*/
        overflow: hidden;
        color: yellow;
    }

    .c4 {
        /*显示滚动条*/
        /*overflow:scroll;*/
        overflow: auto; /*根据内容自动控制是否显示滚动条,如果内容没有溢出就不显示滚动条,否则显示*/
    }

    .c5 {
        width: 300px;
        height: 300px;
        border: 1px solid #eee;
        overflow: auto;
    }
</style>
</head>
<body>
    <h1>溢出内容属性</h1>
    <div class="c5">
        <img src="n.jpg">
    </div>
    <div class="c4">
        <strong>c4设置溢出隐藏后多的内容滚动条显示显示</strong>定位比较难，有好多种类型，margin，position之类的很烦，什么相对啊，绝对啊，就需要好好学了。
        隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。
        背景色一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。
    </div>
    <div class="c3">
        <strong>c3设置溢出隐藏后,多的内容再显示</strong>定位比较难，有好多种类型，margin，position之类的很烦，什么相对啊，绝对啊，就需要好好学了。
        隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。
        背景色一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。
    </div>
    <div class="c2">
        <strong>c2设置大小以后内容仍然显示:</strong>定位比较难，有好多种类型，margin，position之类的很烦，什么相对啊，绝对啊，就需要好好学了。
        隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。
        背景色一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。
    </div>
    <div class="c1">
        <strong>c1默认情况下盒子随着内容增长:</strong>定位比较难，有好多种类型，margin，position之类的很烦，什么相对啊，绝对啊，就需要好好学了。
        隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。
        背景色一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。
    </div>
</body>

背景设置

设置盒子模型的border内部的背景绘制效果

设置背景色

设置背景图片

设置图片的重复方式:平铺,x方向重复,y方向重复

设置图片的偏移位置

相对位置偏移

绝对位置便宜

<style type="text/css">
    .b1 {
        width: 800px;
        height: 1000px;
        border: 2px solid #00f;
        /*设置背景图片*/
        background-image:url(../imgs/background.png);
        /*贴图默认为repeat:平铺贴图
            no-repeat:不平铺
            repeat-x:x方向平铺贴图
            repeat-y:y方向平铺贴图
        */
        background-repeat:no-repeat;
        /*设置相对位置贴图:center,top,bottom,right,left*/
        background-position:top center;
    }
    .btn {
        border:0px;
        background-color:#FFF;
        width:20px;
        height:16px;
        padding:0px;
        background-image:url(./btn.png);
        background-attachment:scroll;/*scroll:背景图跟着一起动,fixed:背景图固定*/
    }

    .btn:hover {
        /*绝对对位置偏移贴图*/
        background-position:-30px 0px;
    }
</style>


body {
    background-image: url(../imgs/timg.jpg);
    /*attachment:附件,附加方式
        scroll:滚动;
        fixed:固定
    */
    /*
        scroll:背景图会随着内容滚动
        fixed:背景图固定,内容滚动背景图位置不动
    */
    background-attachment: sroll;
}

元素的显示方式

有三种

块元素:div,h1-h6,p 等
- 独立占用行,可以设置宽高
行内元素:span,b,i,u,label等
- 不独立占用一行,和其他文本混合在一行,不能设置宽高!!!
行内块元素:
- 不独立占用行,和其他文本混合在一行,可以设置宽高!!!

利用CSS可以更改元素的显示方式,从行内显示方式更改为块(行内块)元素==>为了设置元素的宽高,进行布局占位

盒子模型回顾+练习

宽高:width,height
外边距:margin距相邻元素或上级元素的距离
边框:元素的边框
内边距:内容距离边框的而距离

粘连问题:

元素的上边缘与上级元素的上边缘重叠时,此时给元素添加上外边距会导致上级元素联动的效果,给上级元素添加overflow:hidden属性

移动元素的两种方式:

给上级元素添加内边距,会影响上级元素的宽高
给元素自身添加外边距,推荐

行内元素的

行内元素的宽高只受内容影响,宽高没有效果
外边距的上下没有效果
边框:四个边框都会有效果,但是左右边框占显示范围,即影响元素的宽,上下边框不占显示范围
内边距:四个方向都生效,但是左右内边距会占显示范围,上下内边距不占显示范围
- 宽高:无效果
- 外边距:上下没效果
- 边框:上下不占显示范围
- 内边距:上下不占显示范围

相邻两个元素,左右外边距是相加,上下外边距是取最大值

定位

如何设置元素的显示位置

文档流定位(静态定位i)==>浏览器中元素的默认定位==position:static
- 块元素流定位:从上到下依次显示
- 行内元素流定位:从左至右依次显示
相对定位==position:relative;
- 不会脱离文档流,相对于初始位置
绝对定位==position:absolute;
- 脱离文档流,相对于窗口或者祖先元素中做过非static定位的元素(一般使用relative,因为其他会导致脱离文档流,影响其他元素的显示效果)
固定定位==position:fixed;
- 脱离文档流,上下左右的值相对于窗口;
浮动定位==float:left/right
- 脱离文档流,元素可以在当前躲在行的左侧或者右侧浮动,当撞到父元素的边框或者另一个浮动的元素时停止,如果一行装不下,则自动换行,换行时可能会出现被卡住的现象;
- 当所有子元素全部浮动的话,自动识别的高度为0 ,通过overfloat:hidden解决此问题
- 当纵向排列的元素需要改成横向排列的时候使用浮动定位

利用CSS可以更改元素的定位属性,实现调整元素的显示位置

浮动定位

属性;float;值:left/right

清除浮动影响

clear:both

行内元素的垂直对齐方式

vertical-align:top/middle/bottom/baseline(默认)====垂直对不齐的问题

小蜜蜂

CSS