CSS基础（一）

 一、CSS概述

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

二、CSS语法

　　CSS的语法由两部分组成：选择符（selector）和声明（declaration），声明由一个或者多个属性值组成。

　　　

1 选择符{
2 
3 属性：属性值；
4 
5 属性：属性值；
6 
7 属性：属性值；
8 }你

三、选择符的种类

1.基本选择符

　　基本选择符包括标签选择符、id选择符和class类选择符

1）标签选择符

　　标签选择符是以文档对象模型（DOM）作为选择符——即选择某个HTML标签作为对象，设置其样式规则。

　　例如：

1 div{
2 boder:3px double #f00;
3 width:680px;
4 }

2）id选择符

　　id选择符用来对单一的某个元素单独的设置样式，只能在HTML页面中使用一次，针对性更强。id选择符在定义时要在前面加#，使用时不用加#。

　　例如：

1 <style type="text/css">
2 #top{
3 line-height:20px;
4 margin:15px 0px 0px 0px;
5 font-size:24px;
6 color:#F00;
7 }
<!--下为调用-->
<div id="top">……</div>

3）class类选择符

　　class类选择符用来定义HTML页面中需要特殊表现的样式，也称为自定义选择符，使用该方式定义时要在元素前加“.”，元素名称可以自定义。

　　例如：

　

1 <style type="text/css"
2 .blue{
3 color:#F00;
4 }

2.复合选择符

　　复合选择符包括交集选择符、并集选择符和后代选择符。

1）交集选择符

　　交集选择符由两个选择符直接相连构成，其中一个必须是标签选择符，另一个必须是类选择符或者id选择符，结果是选中二者各自元素范围的交集。

　　例如：

　　

 1 css:
 2     p {
 3         color:#00F;
 4         border:1px solid;
 5         }
 6     p.m{
 7         color:#C03;
 8         }
 9 代码中:
10 <p>1</p>
11 <p class="m">2</p>
12 <p>3</p>

结果图：

2）并集选择符

　　并集选择符又称为“集体声明”，就是让几组选择符共享同一个声明。

　　例如：

 1 CSS：
 2 h1,h2,h3{
 3         color:#00F;
 4         text-decoration:underline;
 5         }
 6     h2.s{
 7         color:#F3C;
 8     }
9 代码中：
10 <h1>1</h1>
11 <h2 class="s">2</h2>
12 <h2>3</h2>
13 <h3>4</h3>

　　结果图：

 

 3）后代选择符

　　当标签发生嵌套时，内层的标签会自动成为外层标签的后代，使用后代选择符可以简化代码，实现大范围的控制。

　　例如：

 1 CSS：
 2 p {
 3                 color:#00F;
 4         text-decoration:underline;
 5         }
 6     p span{
 7         color:#F3C;
 8     }
 9 代码中：
10 我想大喊两声：<p>Hello World!</p>
11 <p><span>Hello World!</span></p>

　　结果图：

 3.通用选择符

　　通用选择符分为通配符选择符和通用兄弟元素选择符。

　　1）通用符选择符

　　通用符“*”是一种特殊的选择符，可以定义所有元素样式。

　　例如：

 1 CSS部分：
 2 <style type="text/css">
 3     *{color:#000;}
 4     p{color:#00f;}
 5     p *{color:#F00;}
 6 </style>
 7 代码部分：
 8 <h2>111</h2>
 9 <p>222</p>
10 <p><span>333</span></p>

　　效果图：

 

 

 2）通用兄弟选择符

　　通用兄弟选择符用于同一父类元素下某元素后其他所有某一兄弟元素的样式。格式是：

1 E~F{   }

　　例如：

　

 1 CSS：
 2 <style type="text/css">
 3 div~span{ color:#F00;}
 4 </style>
 5 代码段：
 6 <div style="font-size:12px; border;">
 7 <div>
 8 <span>测试</span>
 9 <p>测试</p>
10 </div>
11 <span>测试</span>
12 <hr />
13 <span>测试</span>
14 </div>

　　结果图：

 4.特殊选择符

1）伪类选择符

　　伪类选择符是一种特殊的类选择符，能被支持CSS的浏览器直接识别，其最大的作用是对连接在不同效果下定义不同的样式。

例如：

 1 CSS部分：
 2 <style type="text/css">
 3 a:link{color:#000;}
 4 a:visited{color:#C0C;}
 5 a:hover{color:#399;font-size:18px;border:1px #006;}
 6 a:active{color:#F00;}
 7 </style>
 8 
 9 代码部分：
10 <a href="#">来试试吧</a>

结果图：

 

 

2）伪元素选择符

　　与伪类选择符差不多，伪元素选择符通过对插入文档的虚拟元素进行触发，从而达到某些效果。格式如下：

1 选择符：伪元素{}

常用伪元素如下：

常用伪元素
first-letter 将特殊样式添加到首字母
first-line 将特殊样式添加到首行
before 在某些元素前插入某些内容
after 在某些元素后插入某些内容

例如：

1 CSS部分：
2 <style type="text/css">
3 h4:first-letter{color:#F00;font-size:36px;}
4 p:first-line{color:#63F;}
5 </style>
6 
7 代码部分：
8 <h4>开开心心劳动节</h4>
9 <p>可惜梦想在前方</p>

结果图：

 

posted @ 2019-04-01 19:44  安久殇  阅读(240)  评论(0)  编辑  收藏  举报