CSS3基础笔记 - Study Fanl - 一广泛的知识学习聚集地

一、CSS简介

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

二、CSS开发环境：

显示环境： 浏览器
编辑环境：......（记事本、各大编辑器）

三、CSS编写规则：

目录结构命名规则：
存放css文件一般被命名为：style、css
样式文件命名规则：
.........
样式的命名规则：
由：小写英文字母、下画线组成，必须以字母开头，不能为纯数字，且要有意义（做到“见其名，知其意”）

CSS代码注释：
作用：增强可读性
①结构性注释：

/*header（定义网页头部区域）--------------*/

②提示性注释：

.new_list li span{
float:left;/*这里写注释...*/
width:80px;/*这里写注释...*/
color:#999;/*这里写注释...*/
}

四、CSS的引用方法

定义行内样式

<标签 style="属性:属性值;属性:属性值;...">

定义内部样式表

<style type="text/css">
<!--选择符1{属性:属性值;属性:属性值;...}-->
<!--选择符2{属性:属性值;属性:属性值;...}-->
<!--选择符3{属性:属性值;属性:属性值;...}-->
<!--选择符4{属性:属性值;属性:属性值;...}-->
//<!--...-->的作用是应对旧版本浏览器不支持CSS的情况，把<style>...</style>的内容以注释的形式表示，不支持css的浏览器会自动略过
</style>

五、链入外部样式表

用<link>标签必须放到页面的<head>...</head>标签对内，格式：

<head>
...
<link rel="stylesheet" href="外部样式表示文件名.css" type="text/css">
...
</head>

样式表文件的格式

选择符1{属性:属性值;属性:属性值;...}
选择符2{属性:属性值;属性:属性值;...}
...
选择符n{属性:属性值;属性:属性值;...}

导入外部样式

<style type="text/css">
<!-- 
@import url{"外部样式表的文件名1.css"}
@import url{"外部样式表的文件名2.css"}
其他样式表的声明
-->
</style>

六、CSS语法基础

CSS样式规则：

样式规则
样式规则表的每条规则都有两个主要部分：选择器和声明
```
selector{attribute:value}/*（选择符{属性:属性值}）*/
```
选择符的类型
CSS选择符包括基本选择符、符合选择符、通用符选择符和特殊选择符

基本选择符：

标签选择符
定义时直接使用元素本身

E{
  /*css 代码*/
}
//其中E表示网页元素（Element）。例如以下代码表示标签选择符
body{
  font-size:13pt;
}
div{
  boder:3px double #f00;
}

class选择符

<style type="text/css">
<!--
  .类名称1{属性:属性值;属性:属性值;...}
  .类名称2{属性:属性值;属性:属性值;...}  
  .类名称...{属性:属性值;属性:属性值;...}  
  .类名称n{属性:属性值;属性:属性值;...}
  -->
//示例：
.blue{
  color:#00f;/*class类blue定义为蓝色文字*/
}
p{/*p标签选择符*/
  boder:2px dashed #f00;/*边框为2px红色虚线*/
  width:280px;/*所有p元素定义宽度为280像素*/
}  
</style>

id选择符

<style type="text/css">
<!--
#id名1{属性:属性值;属性:属性值;...}
#id名2{属性:属性值;属性:属性值;...}
#id名...{属性:属性值;属性:属性值;...}
#id名n{属性:属性值;属性:属性值;...}
-->
//例如：
#top{
  line-height:20px;/*定义行高*/
  margin:15px 0px 0px 0px;/*定义外边距*/
  font-size:24px;/*定义字号大小*/
  color:#f00;/*定义字体颜色*/
}
</style>

复合选择符
（1）“交集”选择符
“交集选择符”构成：** 由两个选择符直接连接构成：如p里面有class=style，可以用：
```
p {
//内容
}
或
.style{
//内容
}
```
(2)“并集”选择符
如：有：h1，h2、h3
```
h1,
h2,
h3{
//h1、h2、h3属于并集
}
```
通配符选择符
如：
```
*{
/*代表所有标签，
一般用于设置边距*/
margin:0px;
padding:0px;
}
```
也可以直接对特定元素的子元素应用样式：
p段落的文字样式：
```
p{
  //样式
}
```
p段落里所有子元素样式：
```
p *{
  //样式
}
```

特殊选择符
（1）伪类选择符：
如<a>标签：

a:hover{} /*定义鼠标悬停在超链接样式*/
a:link{} /*定义未访问超链接样式*/
a:visited{} /*定义已访问超链接样式*/
a:active{} /*定义被激活的超链接样式*/

（2）伪元素

:first-letter /*特殊的样式添加到文本的首字母*/
:first-line /*特殊的样式添加到文本首行*/
:before /*在某元素之前插入内容*/
:after /*在某元素之后插入内容*/

七、CSS的属性单位

长度
色彩

八、文档结构

css采用html文档结构来决定其样式的应用
继承：子元素继承父元素的属性值
样式表的层叠、特殊性、重要性
①层叠：继承父元素属性且使用自定义的已有属性
②特殊性：通配符特殊值为0，基本选择符有特殊值为1，class类选择器有特殊值为10，id为100，行内样式style=""为100，越大越被优先采用
③重要性：可以用!important来提升样式优先权，则可以使低优先值进行提升优先权（不显示 -> 显示）
元素类型：
①块级元素：display:block
块级元素宽度为100%，占据一行，后附带隐藏换行符，如：标题、p、表格、li、分区div、body都是块级元素
②行级元素：dispaly:inline
元素前后没有换行符，也没有高度和宽度，也没有固定形状，如：span、a、img、表单元素等
③列表项元素：dispaly:listitem
listitem属性值标识列表项目，实质也是块状显示，不过是一种特殊的块状类型，增加了缩进项目符合
④隐藏元素：dispaly:none
none属性标识隐藏取消盒模型，所包含的内容不会被浏览器解析和显示
⑤其他分类
inline-table、run-in、table、table-caption、tabel-cell、table-column、table-column-group、table-row、table-row-group、inhert等