CSS3基础笔记
一、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、h3h1, 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等