前端开发【第2篇：CSS】

CSS样式详解

转载于 2017-09-09 14:41:57 发布 · 362 阅读

本文介绍了CSS的基本概念、常用样式属性及选择器，包括内联样式、层叠样式、外部样式及其优先级，还深入探讨了背景、文字、列表、定位等核心样式属性。

鸡血

样式的属性多达几千个，但别担心，按照80-20原则，常用的也就几十个，你完全可以掌握它。

Css初识

HTML的诞生

早期只有HTML的时候为了让HTML更美观一点，当时页面的开发者会把颜色写到标签里面，想想一下一堆标签一堆属性：颜色、字体等，总结一个字就是“乱”

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

CSS语法和CSS优先级

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

2、3种css样式

内联样式

当你键入<h2 style="color: red">CatPhotoApp</h2>，你就给h2元素添加了inline style(内联样式)。

层叠样式

内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）

<!-- 在代码的最顶端，创建一个如下的style元素：
在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如，如果你想要将所有的h2元素设置为红色,
你的代码应该看起来像这样：
 -->
<style>
  <!-- 选择器 {属性名称: 属性值;} -->
  h2 {color: red;}
</style>

外部样式

单独把css写入到一个文件中称为外部样式

    <!-- 引入CSS样式文件 -->
    <!--<link href="/statics/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>-->

3、优先级

内联样式 > 层叠样式 > 外部样式

选择器

选择器可以层层嵌套,这句话不懂没关系继续看

元素选择器[标签选择器]

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

它会根据页面自动应用到标签中不需要调用

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

类选择器[Css样式类选择器]

类选择器可以理解为把多个样式封装到一个变量中，当我们使用这个变量的时候其实就是调用这一组样式

它可以放到外部样式文件中也可以在头部样式中定义

<!-- 定义类选择器样式 -->
    <style type="text/css">
        .main-container  {
            background-color: aqua;
        }
    </style>

<!-- 应用类选择器样式 -->
    <div class="main-container">
        Test information
    </div>

id选择器

和类选择器类似，类选择器在使用的时候我们使用的class属性来应用类选择器，使用id选择器的时候我们应用使用id属性

        /* id 选择器 */
        #footer {
            background-color: aqua;
        }

        <!-- id选择器应用 -->
        <div id="footer">
            Test information
        </div>

上面的不管是类选择器和id选择器还是元素选择器可以进行嵌套

    <style type="text/css">
        #footer div .main-container div {
            background-color: aqua;
        }
    </style>

    <!-- 使用-->
    <div id="footer">
        <div class="main-container">
            Test information
            <div>
                Test information
            </div>
        </div>
    </div>

子元素选择器

h1 > strong {color:red;}

<!-- 使用 -->
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

属性选择器

/* 下面的例子为带有 title 属性的所有元素设置样式： */
[title] { color:red; }


/* 下面的例子为 title="shuaige" 的所有元素设置样式：*/

<img title="shuaige" src="/i/w3school_logo_white.gif" />


/* 下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值： */
[title~=hello] { color:red; }

<h2 title="hello world">Hello world</h2>
<h2 title="hello shuaige">Hello world</h2>


/* 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。在css中分隔符是使用  "-"  例如en-shuaige, en-name*/
[lang|=en] {background:yellow;}
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>

/* 匹配属性值以指定值开头的每个元素。 */
div[class^="test"]
<div class="test-shuaige">第三个 div 元素。</div>

/* 匹配属性值以指定值结尾的每个元素。 */
div[class$="test"]
<div class="test">第三个 div 元素。</div>

/* 匹配属性值中包含指定值的每个元素只要包含就可以。*/
div[class*="test"]
<div class="first_test">第一个 div 元素。</div>

伪类选择器

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

CSS样式

背景

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

1、普通颜色背景和img背景

/* 普通背景 */
p {background-color: gray;}
/* 图片背景 */
body {background-image: url(/i/eg_bg_04.gif);}

2、背景重复

比如我们定义的div元素是100px,背景图片是10px，默认情况下图片就会平铺开来布满整个100px大小,如果我们不想让他重复可以使用repeat属性

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

3、背景图片定位

可以利用 background-position 属性改变图像在背景中的位置。

<html>
<head>

<style type="text/css">
body { 
    background-image: url(/i/eg_bg_03.gif);
    background-repeat: no-repeat;
    background-position:center;
}
</style>

</head>

<body>
</body>
</html>

定位方式

有关键字：(center、top、bottom、right、left)中心、上、下、左、右，两两来组合进行定位

<style type="text/css">
body { 
    background-image: url(/i/eg_bg_03.gif);
    background-repeat:no-repeat;
    background-position:top left;
}
</style>

百分比方式

有时候上面关键字满足不了我们就可以采用百分比的方式

<style type="text/css">
body { 
    background-image: url(/i/eg_bg_03.gif);
    background-repeat:no-repeat;
    background-position:20% 100%;
}
</style>

这个百分比也是由两个百分数组合的第一个百分数代表“里左边多远”，第二个百分数代表“里上面多远” 哈哈好理解吧

4、背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

<html>
<head>
<style type="text/css">
body 
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>

<body>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
</body>

</html>

文字

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等

字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）

列表

列表属性简写：

ul { list-style:square inside url('/i/arrow.gif'); }  /* 第一个值是类型 第二个值是位置 第三个值是图片url*/

1、列表类型- list-style-type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端开发-CSS-1</title>
    <style type="text/css">

        ul.circle {list-style-type:circle}  /* 圆形 */
        ul.square {list-style-type:square}  /* 方块*/
        ol.upper-roman {list-style-type:upper-roman}  /* 罗马符号 I II */
        ol.lower-alpha {list-style-type:lower-alpha}  /* 希腊符号 --! a b c d */
    </style>
</head>
<body>
    <div>
        <p>圆形:</p>
        <ul class="circle">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Coca Cola</li>
        </ul>

        <p>方形:</p>
        <ul class="square">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Coca Cola</li>
        </ul>

        <p>罗马符号:</p>
        <ol class="upper-roman">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Coca Cola</li>
        </ol>

        <p>希腊符号:</p>
        <ol class="lower-alpha">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Coca Cola</li>
        </ol>
    </div>

</body>
</html>

2、列表图像 list-style-image

<html>
<head>
    <style type="text/css">
        ul { list-style-image: url('/i/eg_arrow.gif')}
    </style>
</head>

<body>
    <ul>
        <li>咖啡</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
</body>

</html>

3、图标位置 list-style-position

<html>
<head>
    <style type="text/css">
        ul.inside { list-style-position: inside }

        ul.outside { list-style-position: outside }
    </style>
</head>

<body>
    <p>该列表的 list-style-position 的值是 "inside"：</p>
    <ul class="inside">
        <li>Earl Grey Tea - 一种黑颜色的茶</li>
        <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
        <li>Honeybush Tea - 一种令人愉快的果味茶</li>
    </ul>

    <p>该列表的 list-style-position 的值是 "outside"：</p>
    <ul class="outside">
        <li>Earl Grey Tea - 一种黑颜色的茶</li>
        <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
        <li>Honeybush Tea - 一种令人愉快的果味茶</li>
    </ul>
</body>
</html>

CSS定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

相对定位

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位

absolute这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent（在父对象内）来进行定位。
如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解

    <div style="position:relative;background-color: blue;height:100px;">
        <!--当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性-->
        <div style="position:absolute;right: 0px;bottom:0px;background-color: blueviolet">su1</div>
    </div>

    <div style="background-color: blue;height:100px;">
    <!--当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性-->
    <div style="position:absolute;right: 0;bottom:0;background-color: blueviolet">su1</div>
    </div>
    <div style="height: 1000px; background-color: aqua">
        shuai
    </div>

这里仔细看下我给他定位的位置是右下角,当我们打开网页后它是在右下角但是鼠标华东后看下结果，它就不在右下角了，所以说如果父级别没有使用position的时候需要注意

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

补充

溢出

应用场景，有这么一种情况，在一个div内有很多的的内容，如果div的框体不是很大超出去了怎么办？详细情况如下图，代码

代码如下：

    <div style="height:100px;width: 500px; background-color:green;">
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
    </div>

解决方法：增加overflow样式，代码如下:

    <div style="overflow:auto;height:100px;width: 500px; background-color:green;">
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
    </div>

透明度

透明度，用的比较多，需要注意，简单代码例子如下：

    <div style="background-color:blue;height:100px;padding-top:30px">
        <!--这里设置内部的div的透明度-->
        <div style="opacity: 0.5;background-color:pink;height:30px;margin-left: 30px;margin-right:30px;">

        </div>
    </div>

效果图如下：

层级

大部分主流浏览器都支持层级，我们可以使用z-index+浮动+透明度实现一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端开发-CSS-1</title>
    <style type="text/css">
        .main-container {
            position: absolute;
            top: 0; left: 0;
            height: 100%; width: 100%;
            background-color: rgba(0,0,0,0.1);
            z-index: 1;
        }
        .main-cover {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100px;
            width: 100px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    主题内容为白色
    <div class="main-container">
        <div class="main-cover">
            ceshi
        </div>
    </div>
</body>
</html>

圆润度

除了像素，你还可以使用百分比来指定border-radius边框半径的值。当border-radius为50%的时候他就是一个圆形了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .main-container{
            position: fixed; 
            left: 50%; 
            top: 50%;
            height: 100px; 
            width: 100px; 
            background-color: chartreuse;
            border-radius: 10%; 
        }
    </style>
</head>
<body>
    <div class="main-container">
    </div>
</body>
</html>