14-前端开发之CSS

什么是 CSS ?

CSS 指层叠样式表 (Cascading Style Sheets)，用于对页面进行美化。

存在的方式有3种：

元素内联：在标签中使用 style='xx:xxx;'
页面嵌入：在页面中嵌入< style type="text/css"> </style >
引入外部 CSS 文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。

编写注释

/*注释内容*/

元素内联

直接在标签上应用，代码如下：

<p style="background-color:yellow">
元素内联
</p>

效果如下：

页面嵌入

在Head里面写好css样式然后再style标签中应用。

主要的样式选择器有：id 选择器，class 选择器，标签选择器，层级选择器，组合选择器和属性选择器。

下面将逐一介绍样式选择器的使用。

样式应用优先级：直接在标签上写的 style 优先，然后按编写顺序，就近原则应用。

class 选择器

class 选择器应用的比较广泛一些，基本语法如下：

<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style>
        .s1{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!--使用class="s1"来应用head中.s1的样式-->
    <div class="s1">我是 class 选择器</div>
</body>

id 选择器

由于id不能重复，一般不推荐使用id选择器，知道即可，了解一下基本语法：

<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #s1{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!--使用id="s1"来应用head中#s1的样式-->
    <div id="s1">我是 id 选择器</div>
</body>

标签选择器

给所有同一类型的标签添加样式

<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        /*所有div都会应用此样式*/
        div{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>我是标签选择器1</div>
    <div>我是标签选择器2</div>
</body>

关联选择器（层次选择器？）

<head>
    <meta charset="UTF-8">
    <title>关联选择器</title>
    <style>
        /*注意是中间空格*/
        .idselect p{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!--div标签里面只有p标签才能应用此样式-->
    <div class="idselect">
        我是DIV
        <p>我是P</p>
    </div>
</body>

效果如下：

组合选择器

以上选择器都可以组合起来用，代码如下：

<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        #i1,.c1,div p{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!--div标签里面只有p标签才能应用此样式-->
    <div>
        我是DIV
        <p>我是P</p>
    </div>
    <div id="i1">
        我是#i1
    </div>
    <div class="c1">
        我是.c1
    </div>
</body>

看效果吧：

属性选择器

对选择到的标签通过属性再进行一次筛选

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .c1[name="dave"]{
             50px;height: 50px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <!--只有符合属性规则的标签才会应用样式-->
    <div class="c1">我是DIV</div>
    <input class="c1" type="text" name="dave">
    <input class="c1" type="password">
</body>

看效果吧：

更多选择器请参考：CSS 选择器参考手册

外部引入

css 样式也可以写在单独文件中，在头部直接引入也可以用

<head>
    <meta charset="UTF-8">
    <title>外部引入</title>
    <link rel="stylesheet" href="css/commons.css" />
</head>

CSS 常用属性

基本

height           # 高度,百分比
width            # 宽度,像素,百分比
text-align:ceter # 水平方向居中
line-height      # 垂直方向根据标签高度
color            # 字体颜色
font-size        # 字体大小
font-weight      # 字体加粗

background（背景）

1. background-color 背景颜色，代码如下：

<div style="background-color: red">
    Hello World
</div>

更多颜色请参考这里：CSS颜色集

2. background-image 背景图片，代码如下：

<!--默认是平铺,加上 background-repeat: no-repeat可以取消重复，此外还有：repeat-x;repeat-y-->
<div style="background-image: url(image/favicon.ico);height: 80px;background-repeat: no-repeat" >
</div>

3. background-position

应用场景：所有的小图都放置在一张大图上，利用定位背景图像显示该大图的某个部分，达到显示不同小图的目的。

<head>
    <meta charset="UTF-8">
    <title>background-position</title>
    <style>
        .bg-icon{
            /*定义一个图片*/
            background-image: url(icon1.png);
            /*设置图片不平铺*/
            background-repeat: no-repeat;
            height: 18px;
             18px;
            /*设置一个边框用来演示这个例子的窗口*/
            border: 2px solid red;
            /*根据图片xy轴定位来调整窗口显示小图的位置*/
            background-position-x: 0;
            background-position-y: -80px;
        }
    </style>
</head>
<body>
    <div class="bg-icon"></div>
</body>

border 边框，代码如下：

<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
<!--第一种：线的粗细为1像素，实线、红色-->
<div style="border:1px solid red;height:10px" ></div>
<!--第二种：线的粗细为1像素，点、蓝色-->
<div style="border:1px dotted blue;height:10px" ></div>
<!--第三种：线的粗细为1像素、虚线、紫色-->
<div style="border:1px dashed purple;height:10px" ></div>

显示效果如下：

边框也可以单独设置上下左右任意一边，代码如下：

<!--在左边设置边框，3px、实线、蓝色-->
<div style="border-left: 3px solid red">Hello World</div>

显示效果如下：

display

<!--display 为none将隐藏标签-->
<div style="display: none;">Hello World</div>
<!--默认inline。此元素会被显示为内联元素，元素前后没有换行符。-->
<div style="display: inline;background-color: chartreuse ">Hello World</div>
<!--block:此元素将显示为块级元素，此元素前后会带有换行符。-->
<a style="display: block;background-color: chartreuse ">Hello World</a>
<!--行内块元素：既有设置行内标签属性，也有块级标签属性-->
<a style="display: inline-block;background-color: chartreuse ">Hello World</a>

更多属性可以参考：CSS display 属性

float

浮动，用途很广泛，让标签浪起来，块级标签也可以堆叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>luotianshuai_study</title>
    <style>
        .float-left{
            20%;
            background-color:red;
            height: 500px;
            float: left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
        .float-right{
             80%;
            background-color:blue;
            height: 500px;
            float:left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
    </style>
</head>
<body>
    <div class="float-left"></div>
    <div class="float-right"></div>
</body>
</html>

注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：

<div style="clear:both;"></div>

margin、padding

1.margin（外边距）

/*外边距从上往下移50px*/
margin-top: 50px;
/*外边距从左往右移50px*/
margin-left: 50px;

更多属性请点击这里

2.padding（内边距）

/*内边距从上往下移50px*/
padding-top: 50px;
/*内边距从左往右移50px*/
padding-left: 50px;

更多属性请点击这里

cursor

<div style="cursor:pointer">停放在这里显示小手(pointer)</div>
<div style="cursor:help">停放在这里显示问号(help)</div>
<div style="cursor:wait">停放在这里显示圆圈(wait)</div>
<div style="cursor:move">停放在这里显示移动(move)</div>
<div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

day15-CSS补充知识点

position（定位）

position 主要有4个属性值：

static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
fixed: 绝对定位，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
relative: 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。如果元素没有已定位的父元素，那么它的位置相对于.

fixed 应用例子

下面的例子主要是将“标题栏”固定的顶部，“返回顶部”按钮固定在右下角，无论你怎么滚动屏幕，它们相对浏览器窗口都是固定在同一位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定标题栏&&返回顶部</title>
    <style>
        .pg-header{
            background-color: crimson;
            height: 48px;
            color: #FFFFFF;
            position: fixed;
            top:0;
            left:0;
            right:0;
        }
        .pg-body{
            background-color: olivedrab;
            height: 500px;
            margin-top: 50px;
            color: #FFFFFF;
        }
        .gototop{
            background-color: aqua;
            position: fixed;
            right: 30px;
            bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="pg-header">我是头部</div>
    <div class="pg-body">我是内容1</div>
    <div class="pg-body">我是内容2</div>
    <div class="gototop">返回顶部</div>
</body>
</html>

relative && absolute 应用例子

relative 相对于网页整体固定。
absolute 是相对于一个有着 position 属性的父级对象进行定位的，如果不存在，那么它就会以body为定位对象，按照你首次打开浏览器的整个窗口进行定位，当你向下滑动时它会随之移动。

看代码：

    <!--这里定义了一个reletive属性的position对象-->
    <div style="position:relative; 500px;height: 200px;border: 2px solid red;margin: 0 auto">
        <div style="position: absolute;right:0;bottom:0; 100px;height: 50px;border: 2px solid blue;"></div>
    </div>
<!--absolute属性的这个对象是相对于它父级的对象定位的-->

还有个输入框的例子看看：

<div style="height: 35px; 400px;position: relative;">
    <input type="text" style="height: 35px; 370px;padding-right: 30px">
    <span style="position: absolute;right: 6px;top: 10px;background-image: url(user_icon.jpg);height: 18px; 18px;display: inline-block;"></span>
</div>

opacity（透明度）

用于设置 div 元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明）。

代码如下：

div
{
opacity:0.5;
}

注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。

z-index（页面层级展示顺序）

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

Z-index 仅能在定位元素上奏效（例如 position:absolute;）

来看个三级页面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        .page1{
            z-index: 10;
            background-color: aquamarine;
            height: 300px;
             500px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -250px;
        }
        .page2{
            z-index: 9;
            background-color: #AAAAAA;
            top:0;
            right:0;
            bottom: 0;
            left:0;
            position: fixed;
            opacity: 0.5;
        }
        .page3{
            background-color: blue;
            height: 500px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="page1">页面一</div>
    <div class="page2">页面二</div>
    <div class="page3">页面三</div>
</body>
</html>

overflow

这个属性定义溢出元素内容区的内容会如何处理。主要属性如下：

visible: 默认值。内容不会被修剪，会呈现在元素框之外。
auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
hidden: 内容会被修剪，并且其余内容是不可见的。
inherit: 规定应该从父元素继承 overflow 属性的值。

<body>
    <!--overflow:auto属性：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。-->
    <div style="height: 50px;background-color: crimson;overflow: auto">
        Dave<br>
        Dave<br>
        Dave<br>
        Dave<br>
        Dave<br>
    </div>
</body>

hover

hover 选择器用于选择鼠标指针浮动在上面的元素。

标题栏鼠标滑过变色的实现例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标滑过变色</title>
    <style>
        .pg-header{
            position: fixed;
            height: 48px;
            background-color: crimson;
            line-height: 48px;
            top:0;
            left:0;
            right:0;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
             980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: #FFFFFF;
        }
        /*鼠标滑过变色*/
        .pg-header .menu:hover{
            background-color: darkred;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">首页</a>
            <a class="menu">超市</a>
            <a class="menu">全球购</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">内容</div>
    </div>
</body>
</html>