文档介绍：
韩山师范学院教育科学学院
CSS快速入门
关键内容:
(1) CSS语法、选择器类型及虚类
(2)不同选择器类的应用方式
类自动,ID认名字,标签和虚类自动
(3)引入方式(即样式代码写在什么位置)
(4)DW图形化样式设置--》写“样式代码”
①文本:字体、大小、颜色、行高、对齐等
②列表:
③链接:<a>的四种状态,display:block变成“块”
④图片:边框、边框样式、边框宽度、大小
⑤环绕方式:float浮动、padding内边距、position:fixed
CSS : Cascading Style Sheets
层叠(级联)样式表,习惯叫CSS样式表
CSS是层叠样式表,多重样式定义被层叠在一起成为一个整体,在网页设置中是标准的布局语言,用来控制元素的尺寸、颜色和排版等。
使用样式表:将“网页结构代码”和“网页格式风格代码”分离,从而使网页设计者可以对网页的布局进行更多的控制。
(一)CSS基础知识介绍
2. CSS的基本语法
一个样式(style)由selector选择器、property属性和value属性值三部分组成,形式如下:
selector{ property:value }
在selector大括号里,使用属性名和属性值参数对来定义选择器里面的样式。多个属性和属性值,中间用分号隔开。
① selector{
property1:value1;
property2:value2
}
② selector{property1:value1;property2:value2}
③ selector{property1:value1;property2:value2;}
(一)CSS基础知识介绍
CSS选择器
HTML选择器、Class选择器、ID选择器
(1)HTML selector:指HTML标签
(2)class selector:
“.类名”定义,使用HTML标签的class属性值的选择器
(3)ID selector:
“#ID名”定义,使用HTML标签的ID属性定义的选择器,一个网页文件中只能有一个元素使用某一个ID的属性值,即ID名不能重复(可以理解为元素的名字)
id,name属性:以前用name,现在习惯用id
(一)CSS基础知识介绍
虚类(伪类)选择器
即链接的4种状态
a:link (a)
a:visited
a:active
a:hover
(一)CSS基础知识介绍
一般情况下建议所有定义名称都用小写
例子1-1 了解三种选择器的应用方式(包括虚类)
重点,理解应用方式
(一)CSS基础知识介绍
选择器声明
集体声明和嵌套声明
(1)集体声明(并列)
例子:
h1,h2,h3,h4,p{
color:red;
}
(一)CSS基础知识介绍
(2)嵌套声明(包含)
一定要掌握它的含义,虽然不难。对特殊位置的HTML标签进行声明,例子:
(一)CSS基础知识介绍
例子1:
P b{
color:blue;
font-family:arial
}
例子2:区别?
a{
color:blue;
}
.list1 a{
color:red;
}
3. CSS的引入方式
(1)CSS代码直接添加到HTML标签里,style属性:内联式
<p style=“font-size: 14px; color: #F00;”>test</p>
(2)放在<head>头部<style>块里:嵌入式
<style type=“text/css”>...</style>
(3)链接样式表:链接式
<link href=“样式表路径" rel="stylesheet" />
(一)CSS基础知识介绍