css基础总结(css简介、css语法框架、css样式表格式、css选择器)
css基础总结
1-css概述
- css含义
cascading style sheets——层叠样式表，也称css样式表、级联样式表。 - css作用
html负责网页页面中“有什么”，而css负责网页页面中的内容“长什么样”，用来定义网页内容的格式 - css语法框架
/*展开格式——推荐 */
选择器 {
属性:值;/* 每行称为一个“声明” */
……;
属性:值/* 最后一个声明后不需要跟“;” */
}
/* 紧凑格式 */
选择器 {属性:值;……;属性:值}
- 样式表格式
css样式表的格式可以按照书写位置分为三类：行内样式表、内部样式表、外部样式表。
- 行内样式表
直接在元素标签中设定样式，可简单修改某些标签的样式。例如如下代码：
<p color="red" font-size="10px" >文字部分</p>
- 内部样式表
首先回顾一下html文件的基本框架：
<html>
<head>
<title>网页标题</title>
</head>
<body>
<!--各类标签-->
</body>
内部样式表即把样式表写在html代码中，将样式打包放在<style>标签中，因此，html文件的框架变为如下格式：
<html>
<head>
<title>网页标题</title>
<style><!--放在head标签中，对本结构中所有标签均可选择和赋予样式-->
选择器{声明}
……
选择器{声明}
</style>
</head>
<body>
<!--各类标签-->
</body>
- 外部样式表：在开发中更加常用，结构（html）和样式（css）分离，将css部分单独写成.css文件，并引入html页面中。.css文件的基础结构如下：
选择器 {
属性:值;
……;
属性:值
}
……
选择器 {
属性:值;
……;
属性:值
}
而在html文件中，需要使用<link>标签引入css样式表，操作如下：
<html>
<head>
<title>网页标题</title>
<!--引入xx.css文件中的样式表-->
<link rel="stylesheet" href="xx.css的路径">
</head>
<body>
<!--各类标签-->
</body>
2-css选择器
- 基础选择器
- 标签选择器
选择一类标签，将此类标签全部应用某种格式标签名 { 属性:值; ……; 属性:值 } /* 在标签中 */ <h1>标题1</h1> <h1>标题2</h1> <p>段落文字</p> /* 如果选择器是h1，那个就选择所有h1标签进行格式处理*/ - 类选择器
对于目标标签，设置class属性，即设置类名，根据类名选择若干个标签应用某种格式.类名 { 属性:值; ……; 属性:值 } /* 在标签中 */ <h1 class="class1">标题1</h1> <h1 class="class2">标题2</h1> <h1 class="class1">标题3</h1> /* 如果选择器是.class1，选择第一个和第三个h1标签； 如果选择器是.class2，选择第二个h1标签 */ - id选择器
对于目标标签，设置id属性，根据id值选择某一个标签（注意：只能选择某一个标签，因此id值不能重复）应用某种格式#类名 { 属性:值; ……; 属性:值 } /* 在标签中 */ <h1 id="id1">标题1</h1> <h1 id="id1">标题2</h1> /* 如果选择器是#id1，选择第一个h1标签； 且第二个标签这样的写法是错误的。 */ - 通配符选择器
选择页面中的所有标签，一般用于所有元素在格式处理前的风格统一化。* { 属性:值; ……; 属性:值 } /* 在标签中所有标签都会被应用某种格式 */
- 标签选择器
- 复合选择器
首先介绍一下标签的关系，有两种基本的关系：父子关系（包含关系）、兄弟关系(并列关系)。如下是表格标签的基础结构：
其中<table> <tr><!--第一行--> <th></th> <td></td> …… <td></td> </tr> …… <tr><!--第n行--> <th></th> <td></td> …… <td></td> </tr> </table><table>和<tr>是父子关系，<th>和<td>是兄弟关系。下面以表格标签为例介绍复合选择器-
后代选择器
选择父标签中的所有子标签table tr { 属性:值; ……; 属性:值 } /* table标签中的所有tr标签都会被选择 */这里的“table”、“tr”是标签选择器，也可以使用其他基础选择器，例如如下代码：
.choosen #special{ 属性:值; ……; 属性:值 }<table class="choosen"><!--表1--> <tr><!--第一行--> <th></th> <td></td> </tr> …… <tr id="special"><!--第n行--> <th></th> <td></td> </tr> </table> <table><!--表2--> <tr><!--第一行--> <th></th> <td></td> </tr> …… <tr id="special"><!--第n行--> <th></th> <td></td> </tr> </table> <!--此时的css选择器，选择的就是表1的第n行--> -
子选择器
选择父标签中最近的一级子元素。table>tr { 属性:值; ……; 属性:值 } /* table标签中选择第一个tr标签，即选择第一行 */ -
并集选择器
选择多个并列的标签进行相同样式设置th,td { 属性:值; ……; 属性:值 } /* table标签中的所有th、td标签都会被选择 */ -
伪类选择器
比较特殊的一类选择器，主要用来给某些标签添加特殊效果。- 链接伪类：主要针对链接标签
<a href="xx" target="-self">文本或图像</a>
a:link{声明} /* 选择所有未访问过的链接 */ a:visited{声明} /* 选择所有已访问过的链接 */ a:hover{声明} /* 选择鼠标放于之上的链接，很常用 */ a:active{声明} /* 选择鼠标已经点击但是尚未结束点击的链接，即被选中的链接（活动链接） */ /* 开发过程中四个链接伪类不一定都需要写出来，可以只写a:hover{} ,但是四个链接伪类都写的话，需要按照link --> visited --> hover --> active 的顺序 */- 结构伪类：根据 HTML 页面中元素之间的关系来选择元素。
还是取上面的<table>标签例子。
table:nth-child(k){声明} /* 选择table标签中的第k个tr标签，即第k行,k <= 总行数 */ table:nth-last-child(k){声明} /* 选择table标签中倒数第k个tr标签，即第n-k行,k <= 总行数 */ table:first-child{声明} /* 选择table标签中的第一个tr标签，即第一行 */ table:last-child{声明} /* 选择table标签中的最后一个tr标签，即第n行 */- focus伪类：主要用于表单元素的选择，选择鼠标放于上方的标签元素
input:focus{声明} - 链接伪类：主要针对链接标签
-