Web前端开发与设计03-CSS3

Web前端开发与设计03-CSS3
学习要点
- 使用CSS的意义
- CSS基本语法
- HTML如何引入CSS样式
- CSS的选择器
- CSS高级选择器
- 使用CSS编辑网页文本
- 使用CSS设置超链接
- 列表样式
- 背景样式
使用CSS3的意义

Web开发设计工作

HTML5+CSS3+JavaScript=内容+样式+行为

CSS定义

CSS：Cascading Style Sheet，层叠样式表，也称为风格样式表（Style Sheet），她是用来进行网页的风格设计。

CSS版本历史
- CSS1.0 样式可继承
- CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
- CSS2.1 融入了更多高级的用法，如浮动，定位等。
- CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，增加了新技术，如字体、多背景、圆角、阴影、动画等高级属性。
CSS在网页中的应用
- 统一控制HTML标签的显示属性
- 设置字体的颜色、大小、样式
- 设置文本居中显示
- 设置文本与图片的对齐方式
- 设置超链接的不同效果
- 精确定位网页元素位置，美化网页外观
CSS的优势
- 内容与表现分离
- 表现统一，所有网页样式统一表现，易于修改。
- 丰富的样式，灵活布局
- 减少网页代码量，提高浏览速度，节省流量
- CSS独立于html页面，有利于搜索引擎收录网页
CSS基本语法

语法结构

CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最一条声明的结束“;” 都要写上。

style标签和style属性

style标签，用于定义文档样式

Style属性，用于改变HTML标签样式

HTML如何引入CSS样式

行内样式表

使用style属性引入CSS样式
```
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
```
　　

内部样式表

CSS代码写在<head>的<style>标签中
优点：方便在同页面中修改样式。
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底。

外部样式表

CSS代码保存在扩展名为.css的样式表中。HTML文件引用扩展名为.css的样式表。
1. 链接外部样式表
```
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
```
　　

2. 导入外部样式表
```
<head>
……
<style type="text/css">

</style>
</head>
```
　　

3. 链接和导入式的区别
- <link/>标签属于XHTML，@import是属于CSS2.1
- 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的。
样式表重叠的优先级关系（1最低，5最高）

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）
5. 强制样式!important

强制样式示例：
```
#ul li { 
  color: firebrick !important;
}
```
　　

CSS选择器

基本选择器

标签选择器

类选择器

ID选择器

全局选择器
```
*{padding:0px;margin:0px;}
```
　　

ID选择器和类选择器区别
- 引入属性不同
　　引入类选择器：<p class=“text”>文字…</p>
　　引入ID选择器：<p id=“text”>文字…</p>
- 同一页面ID选择器只可使用一次，类选择器可以重复使用。建议页面区块使用ID选择器。
基本选择器优先级

优先级关系
ID选择器>类选择器>标签选择器>全局选择器

标签选择器是否也遵循“就近原则”？
不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器>全局选择器的优先级。
例如，可以同时设置h1 .h1 #h1样式，观察样式的优先关系：
```
<h1 class="h1" id="h1">厦门欢迎你！</h1>
```
　　

CSS的高级选择器

层次选择器

常用层次选择器

示例代码
```
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3层次选择器</title>
	<style type="text/css">
		p,ul{border: 1px solid red; }  /*边框属性*/
		body p{background: red;}  /*后代选择器*/
		/*body>p{background: pink;}*/  /*子选择器*/
		/*.active + p{background: green;}*/  /*相邻兄弟选择器*/
/*.active~p{	background: yellow;} */   /*通用选择器*/
	</style>
</head>
<body>
	<p  class="active">1</p>
	<p>2</p>
	<p>3</p>
	<ul>
		<li><p>4</p></li>
		<li><p>5</p></li>
		<li><p>6</p></li>
	</ul>
</body>
```
　　

结构伪类选择器

网页结构

代码：
```
<body>
     <p>p1</p><p>p2</p><p>p3</p>
    <ul>
        <li>li1</li><li>li2</li><li>li3</li>
    </ul>
</body>
```
　　

结构伪类选择器

示例代码：
```
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
```
　　

属性选择器

常用属性选择器

示例代码：
```
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3属性选择器的使用</title>
    <style type="text/css">
        .demo a {
            float: left;
            display: block;
            height: 50px;
             50px;
            border-radius: 10px;
            text-align: center;
            background: #aac;
            color: blue;
            font: bold 20px/50px Arial;
            margin-right: 5px;
            text-decoration: none;
            margin: 5px;
        }
        /*a[id] {background: yellow;}*/   /*存在属性id的元素*/
        /*a[id=first] {/*background: red;}*/  /*属性id=first的元素*/
        /*a[class="links"] {background: red;}*/  /*属性class="links"的元素*/        
        /*a[class*=links] {background: red;}*/  /*属性class里包含links字符串的元素*/
        /*a[href^=http] {background: red;}*/  /*属性href里以http开头的元素*/        
        a[href$=png] { background: red; }  /*属性href里以png结尾的元素*/
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first" >1</a>
    <a href="" class="links active item" title="test website" target="_blank" >2</a>
    <a href="sites/file/test.html" class="links item"  >3</a>
    <a href="sites/file/test.png" class="links item" > 4</a>
    <a href="sites/file/image.jpg" class="links item" >5</a>
    <a href="efc" class="links item" title="website link" >6</a>
    <a href="/a.pdf" class="links item" >7</a>
    <a href="/abc.pdf" class="links item" >8</a>
    <a href="abcdef.doc" class="links item" >9</a>
    <a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>
```
　　

复合选择器

概念
由两个或多个基本选择器，通过不同方式连接而成。

三种常用的复合选择器

1.并集选择器
概念：由两个或两个以上选择器，通过逗号连接构成，其结果是同时选中各个基本选择器所选择的范围。
特点：
A、任何形式的选择器均可作为并集选择器的一部分。
B、声明各选择器的相同样式。

示例：

2.交集选择器
概念：由两个选择器直接连接构成，其结果选中二者各自元素范围的交集。其中第一个选择器必须是标签选择器，第二个必须是类选择器或者ID选择器，这两个选择器之间不能有空格，必须连续书写。一般用于定义特殊样式。

特点：同时满足前后两者定义的元素。

例子：
```
p.txt{color:blue; line-height:28px;}
```
```
p#spec{color:blue; line-height:28px;}
```
　　

3.全局选择器
概念：选择器是“*”，该选择器可以为所有HTML标签设置相同样。

特点：
A、选择范围为全体HTML标签
B、声明所有标签的相同样式

示例：

CSS继承性

HTML代码
```
<h1><em>div+css</em>网页制作</h1>
<p>欢迎来到div+css网页制作……</p>
<ul>
  <li>在这里，你可以学习到：</li>
  <ul>
    <li>HTML</li>
    <li>CSS
      <ul>
        <li>CSS初级</li>
        ……
      </ul>
    </li>
    <li>JavaScript</li>
  </ul>
  </li>
  <li>你还可以学习到：</li>
  <ol>
    <li>Flash</li>
    ……
  </ol>
</ul>
<p>如果您有任何问题，欢迎给……</p>
```
　　

继承树

CSS中如何应用继承？

1.子标签可以继承父标签的样式风格

2.子标签的样式不会影响父标签的样式风格

示例：
```
h1 {color:blue;text-decoration:underline;}
em {color:red;}
li {color:green;  font-weight:bold;}　　
```
效果：

使用CSS编辑网页文本

网页文本美化的意义
- 更加有效传递网页信息
- 页面更加美观
- 更好的突出主题内容
- 良好的用户体验
<span>标签

解释：span标签是一个行内元素标签，不会独占一个区域或者一行，通过span标签的id属性或者class属性，改变span标签内容样式。
示例：
```
<p>从前那么<span class="slow">慢</span>，那么<span class="beautiful">美</span></p>
<p>车马慢，邮件慢</p>
<p>一个问候，要等上好多天</p>
```
　　

字体样式

font-family
```
body{font-family: Times,"Times New Roman", "楷体";}
```
　　

注意：
1. 同时设置中英文，英文放在前面，否则英文字体不起作用；
2. 英文字体多个字母带空格，字体要使用双引号引起来，中文字体必须使用双引号引起来；
3. 如果网页没有特殊文本要求，中文一般设置为“宋体”，宋体是所有计算机的默认字体。炫酷字体尽量使用图片。
font-size

font-size常用的单位为px。其他单位em、rem、cm、mm、pt、pc。

font-style

Normal：正常字体

italic和oblique：相似效果的斜体

font-weight

font

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

例如：
```
p span{font:oblique bold 12px "楷体";}
```
　　

使用CSS排版网页文本

文本属性：

文本颜色：color
英文单词颜色：red、green、blue、yellow……表示颜色有限。
十六进制RGB颜色值：#AAFF00,最高两位AA红色分量，中间两位FF绿色分量，最低两位00蓝色分量。分量值相同，可以简写为#AF0。

水平对齐方式：text-align

首行缩进和行高
- 行高：line-height，单位为px，不加单位表示字体size的倍数
　　　　假如p标签字体为12px则p{line-height:1.5}等价于p{line-height:18px}
- 首行缩进：text-indent
　　　　单位为px或者em，实际中使用em，中文页面em表示缩进多少个字符，例如{text-indent:2em;}表示缩进两个字符，符合中文段首排版习惯。

关于行高

文本从上到下四条线分别是顶线、中线、基线、底线。对应文本vertical-align属性的top、middle、baseline、bottom四条线。
- 行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
- 行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
文本装饰

属性：vertical-align
浏览器一般只支持对表格单元格中的对象使用垂直对齐方式属性。而对于一般标签：<h1>~<h6>，<p>，<div>都是不起作用的。主要用在设置图片与文本的对齐方式。

例如：
```
p img{vertical-align:middle;}
<p><img src=“#” width=“#”  height=“#”>图片与文本居中</p>
```
vertical-align其他属性值top、bottom不常用。

文本阴影

语法格式：
```
text-shadow : color  x-offset  y-offset  blur-radius;
```
　　

解释：
- color：阴影颜色
- x-offset：X轴位移，用来指定阴影水平位移量
- y-offset：Y轴位移，用来指定阴影垂直位移量
- blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围
浏览器兼容：

示例代码：
```
h2{ font-size: 18px;  text-shadow: blue 10px 10px 2px; }
<h2>中软国际ETC</h2>
```
　　

效果：

使用CSS设置超链接

超链接伪类

1、图片超链接问题
图片加超链接后出现边框，使用CSS设置没有边框，{img:0px;}。

2、伪类

超链接点击前和单击后的不同颜色，其实是超链接的默认伪类样式。

伪类：不根据名称、属性、内容，而是根据标签处于某种行为或状态是的特征来修饰样式。

超链接伪类：超链接将根据用户未单击访问前、鼠标悬浮在超链接上、单击未释放、单击访问后的4个状态显示不同的超链接样式。

语法：

标签名：伪类名{声明；}

示例：
```
a:hover {color:#B46210;	text-decoration:underline;}
```
　　

3、常用超链接伪类

设置伪类的顺序：a:link->a:visited->a:hover->a:active

实际开发中，仅设置两种超链接样式，一种是a标签选择器样式，令一种是鼠标悬浮在超链接上的样式。

示例代码：
```
a {color:#000;text-decoration:none;}
a:hover {color:#B46210;	text-decoration:underline;}
```
　

使用CSS设置鼠标形状

常用形状（windows）

示例代码：
```
span{cursor:pointer}
```
　　

主要用在<a>标签设置成没有下划线后，设置鼠标经过链接变成手形。注意不同操作系统鼠标形状的差异。

列表样式

1、针对ul-li列表；

2、list-style-type属性：

3、List-style-image属性：
```
li {
list-style-image:url(image/arrow-right.gif);
list-style-type:circle;}
```
　　

注：设置了list-style-image属性后list-style-type属性将失效；实际项目中两个属性一起书写，可以避免浏览器对list-style-type的不支持。

4、List-style-position属性：

设置在何处放置列表项标记，outside和inside两个值。

5、List-style属性：

在一个声明里设置所有列表项属性，例如：
```
li {list-style:circle outside url(image/arrow-right.gif);}
```
　　

参数顺序：type>position>image

实际操作建议：实际的网页列表图像标记不通过list-style-image和list-style-position设置，因为很难精确定位。实际采用列表背景图像的方式实现。

背景样式

常见背景样式
- 菜单导航背景
- 文本和列表背景
- 页面背景
- 表格背景
<div>标签

1、定义
div标签可以把文档分割成独立的，不同的部分，因此<div>标签用来进行网页布局。Div属于块级元素。
2、语法：
<div>网页的内容……</div>
3、示例：
```
#demo{200px;height:280px;}
<div id=”demo”>网页的内容……</div>
```
　　

背景属性

1、背景颜色
```
Background-color:#ccc;  /*这是css的注释：设置背景色为灰色*/
```
　　

2、背景图像

背景图像：background-image属性，例如：background-image:url(图片路径);

背景重复方式：background-repeat属性，值：

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

3、背景定位：background-position属性

4、背景

Background属性

例如：
```
background:#ccc url(../img/arrow-down.gif) 100px 10px no-reapeat;
```
　　

5、背景尺寸

背景尺寸 background-size

示例代码
```
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
             200px;
            height: 130px;
            border: 1px solid red;
            background: url("img/bg_flower.gif") no-repeat;
            /*background-size: auto;*/
            /*background-size: 120px 60px;*/
            /*background-size: 120px;*/
            /*background-size: 50% 80%;*/
            /*background-size: cover;*/
            /*background-position: center;*/
            background-size: contain;
        }
    </style>
</head>
<body>
    <div></div>
</body>
```
　　

CSS3渐变

1、线性渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

2、径向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

3、浏览器兼容

4、兼容性设置
- IE浏览器是Trident内核，加前缀：-ms-
- Chrome浏览器是Webkit内核，加前缀：-webkit-
- Safari浏览器是Webkit内核，加前缀：-webkit-
- Opera浏览器是Blink内核，加前缀：-o-
- Firefox浏览器是Mozilla内核，加前缀：-moz-
5、语法格式
```
linear-gradient ( position,  color1,  color2,…)
```
　　

position：渐变方向

color1：第一种颜色值

color2：第二种颜色值

colorn：第n种颜色值

6、示例代码
```
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3线性渐变</title>
    <style>
        div {
             100px;
            height: 100px;
            /*to top*/
            background: linear-gradient(to top, orange, blue);
            background: -webkit-linear-gradient(to top, orange, blue); /*-webkit-*/

            /*to bottom*/
            /*background: linear-gradient(to bottom, orange, blue);*/
            /*background: -webkit-linear-gradient(to bottom, orange, blue);*/

            /*to left*/
            /*background: linear-gradient(to left, orange, blue);*/
            /*background: -webkit-linear-gradient(to left, orange, blue);*/

            /*to right*/
            /*background: linear-gradient(to right, orange, blue);*/
            /*background: -webkit-linear-gradient(to right, orange, blue);*/

            /*to top left*/
            /*background: linear-gradient(to top left, orange, blue);*/
            /*background: -webkit-linear-gradient(to top left, orange, blue);*/

            /*to top right*/
            /*background: linear-gradient(to top right, orange, blue);*/
            /*background: -webkit-linear-gradient(to top right, orange, blue);*/

            /*to bottom left*/
            /*background: linear-gradient(to bottom left, orange, blue);*/
            /*background: -webkit-linear-gradient(to bottom left, orange, blue);*/

            /*to bottom right*/
            /*background: linear-gradient(to bottom right, orange, blue);*/
            /*background: -webkit-linear-gradient(to bottom right, orange, blue);*/

        }
    </style>
</head>
<body>
<div></div>
</body>
```
　　

浏览器兼容性检测

网址：http://caniuse.com/
相关阅读:
Windows7单机部署Hbase
Geotools系列之Geotools DataStore
Java中的SPI机制
 Hbase Java API调用实例
 调用Geotellis的API上传本地Tiff文件至Hbase/Hadoop
Windows7单机部署Hadoop
windows环境下配置GeoServer
C/C++程序从编译到链接的过程
 中兴的一道笔试题
 腾讯笔试题----格雷码的实现
原文地址：https://www.cnblogs.com/rask/p/12393854.html

Web前端开发与设计03-CSS3

学习要点

使用CSS3的意义

Web开发设计工作

CSS定义

CSS版本历史

CSS在网页中的应用

CSS的优势

CSS基本语法

语法结构

style标签和style属性

HTML如何引入CSS样式

行内样式表

内部样式表

外部样式表

样式表重叠的优先级关系（1最低，5最高）

CSS选择器

基本选择器

ID选择器和类选择器区别

基本选择器优先级

CSS的高级选择器

层次选择器

结构伪类选择器

属性选择器

复合选择器

CSS继承性

使用CSS编辑网页文本

网页文本美化的意义

<span>标签

字体样式

使用CSS排版网页文本

使用CSS设置超链接

超链接伪类

使用CSS设置鼠标形状

列表样式

背景样式

常见背景样式

<div>标签

背景属性

CSS3渐变

浏览器兼容性检测