前端之CSS样式

一、CSS

1.什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

2.CSS语法

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

selector {

	  property: value;

	  property: value;

 ...  property: value

}

例如：

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

值的不同写法和单位

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：

p { color: #ff0000; }

为了节约字节，我们可以使用 CSS 的缩写形式：

p { color: #f00; }

我们还可以通过两种方法使用 RGB 值：

p { color: rgb(255,0,0); }

p { color: rgb(100%,0%,0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

多重声明

提示：

如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。

p {

  text-align: center;

  color: black;

  font-family: arial;

}

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

body {

  color: #000;

  background: #fff;

  margin: 0;

  padding: 0;

  font-family: Georgia, Palatino, serif;

}

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

3.CSS的四种引入方式

（1）行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

演示：

<p style="color: crimson;font-size: 24px">hello world</p>

    <p>hello world</p>

    <p>hello world</p>

（2）嵌入式

嵌入式是将CSS样式集中写在网页的标签对的标签对中。

演示：

<style>

	p{

		background-color: aqua;

	}

</style>

（3）链接式

将一个.css文件引入到HTML文件中

演示：

<link rel="stylesheet" href="index.css">

（4）导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，style标记也是写在head标记中

演示：

<style type="text/css">

	@import "index.css";

</style>

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

二、CSS高级语法

1.CSS特性

继承：即子类元素继承父类的样式;

注意点

并不是所有的属性都可以继承(只有color/font/text/line开头的属性才可以继承)
在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
继承性中的特殊性

标签的文字颜色和下划线是不能继承的

标签的文字大小是不能继承的

优先级：是指不同类别样式的权重比较;

当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定。

优先级判断的三种方式

1）间接选中就是指继承

如果是间接选中，那么就是谁离目标标签比较近就听谁的
2）相同选择器(直接选中)

如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的(后面的会把前面的覆盖)
3）不同选择器(直接选中)

如果都是直接选中，并且不是相同类型的选择器，就会按照选择器的优先级来层叠

优先级排序(由高——>低)

id>类>标签>通配符>继承>浏览器默认

权重问题

什么是优先级的权重？

作用：当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高

权重的计算规则

首先计算选择器中有多少个id，id多的选择器优先级最高
如果id的个数一样，那么再看看类名的个数，类名个数多个优先级最高
如果类名的个数一样，那么再看标签名称的个数，标签名称个数多的优先级最高
如果id个数一样，类名个数也一样，标签名称个数也一样，那么就不会继续往下计算了，此时谁写在后面就听谁的(优先级相同时，后面的会把前面的覆盖)

注意点

只有选择器是直接选中标签的时候才需要计算权重

层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

作用:层叠性就是CSS处理冲突的一种能力

注意点

层叠性只有在多个选择器中选中“同一个标签”，然后又设置了“相同的属性”，才会发生层叠性

2.基本选择器

演示：

/*标签选择器*/

p{

	color: green;

}

/*id选择器*/

#p2{

	background-color: wheat;

}

/*类选择器*/

.p_ele{

	color: gold;

}

/*通用选择器*/

*{

   color: aqua;

}

<p>hello world</p>

<p id="p2" class="p_ele">hello world</p>

<p class="p_ele">hello world</p>

2.组合选择器

E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; }

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝

E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; }

E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; }

E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; }

演示：

<style>

        h2.title{

             color: red;

         }

        p,div,.title{

            color: red;

        }

        .outer p{

            color: red;

        }

        .outer > p{

            color: red;

        }

        .outer + p{

            background-color: green;

        }

        .outer ~ p{

            background-color: green;

        }

    </style>

注意，关于标签嵌套：

一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。

3.属性选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。

比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素

div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

E[attr=val] 匹配属性值中包含指定值的每个元素 div[class="test"]{background:#ffff00;}

演示：

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style>

        li[item="2"]{

            color: red;

        }

        .d1{

            color: aqua;

        }

        .d2{

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="d1">DIV</div>

    <div class="d1 d2">DIV</div>

    <ul>

        <li item="1">11</li>

        <li item="2">11</li>

        <li item="3">11</li>

        <li item="4">11</li>

        <p item="2">33</p>

    </ul>

</body>

二、CSS属性操作

1.文本操作

（1）文本颜色：color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

p{ color: rebeccapurple;  }

（2）水平对齐方式

text-align 属性规定元素中的文本的水平对齐方式。

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。

（3）文本其他属性

font-size: 10px;

line-height: 200px; 文本行高通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px; 首行缩进150px

letter-spacing: 10px; 字母间距

word-spacing: 20px; 单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

演示1：

<head>

    <meta charset="UTF-8">

    <title>水平对齐</title>

    <style>

        div{

            width: 600px;

            height: 300px;

            background-color: bisque;

            text-align: center;

            line-height: 300px;

        }

        .btn{

            width: 40px;

            height: 60px;

            background-color: darkgray;

            text-align: center;

            line-height: 60px;

            font-size: 30px;

            color: white;

        }

    </style>

</head>

<body>

    <div>HELLOHELLOHELLOHELLOHELLOHELLO</div>

    <div class="btn"> > </div>

</body>

演示2：

<head>

    <meta charset="UTF-8">

    <title>水平对齐2</title>

    <style>

            h2 {text-align:center;}

            p.publish_time {text-align:right;}

            p.content {text-align:justify;}

    </style>

</head>

<body>

    <h1>CSS text-align 水平居中</h1>

    <p class="publish_time">2017 年 5 月 17 号</p>

    <p class="content">

        有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时，

        跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。”

        几天后，他又垂头丧气回到教堂，同样跪着祈祷：“上帝啊，为何不让我中彩票？我愿意更谦卑地来

        服侍你，求您让我中一次彩票吧！阿门。”又过了几天，他再次出现在教堂，同样重复他的祈祷。如此周而

        复始，不间断地祈求着。到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！

        只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声

        音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p>

    <p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>

</body>

巴特西