CSS
1、CSS介绍
CSS ：Cascading Style Sheets
HTML:搭建网页结构
CSS:修饰和美化网页
2、CSS的使用方式（重点）
1、内联方式
又称为：行内样式，内联样式
特点：将CSS的内容定义在单独的HTML标签中
语法：
<标记 style="样式声明">
样式声明：就是要修饰的样式效果
1、样式声明是由样式属性和属性值来组成的
2、属性 和 值之间使用 : 连接
<标记 style="属性:值">
3、在一个style中允许出现多个样式声明，多个样式声明之间，用 ; 隔开
<标记 style="属性:值;属性:值;">
常用的属性和值：
1、文字大小
属性：font-size
取值：以 px 为单位的数字
ex:设置某div的文字大小为18px
<div style="font-size:18px;">xxx</div>
2、文本颜色
属性：color
取值：取值为表示英文的单词
ex:设置某div的文字颜色为红色(red)
<div style="color:red;">xxx</div>
3、背景颜色
属性：background-color
取值：取值为表示英文的单词
练习：
1、创建一个网页 01-style.html
2、创建一个div，内容随意(lorem)
3、使用内联方式，设置样式如下：
1、文字大小为 36px
2、文本颜色为 红色（red）
3、背景颜色为 黄色（yellow）
2、内部样式表
1、作用
让定义好的样式能够使用在当前页面的多个元素上
2、语法
<head>
<style>
样式规则1
样式规则2
... ...
样式规则n
</style>
</head>
样式规则：
由选择器 和 样式声明 组成的
目的：为了声明一组独立的样式
选择器：规范了页面中哪些元素能够使用声明好的样式
选择器{
属性1:值1;
属性2:值2;
}
ex:
p{
color:red;
}
span{
font-size:36px;
}
3、外部样式表
1、作用
将声明好的样式应用在多个网页中
将样式规则声明在独立的css文件中(***.css)
在使用的网页中对css文件进行引入即可
2、使用步骤
1、声明
创建.css文件，并编写样式规则
2、引用
<head>
<link rel="stylesheet" href="css文件路径">
</head>
3、样式表的特征
1、继承性
大部分的css属性是可以由父元素继承给子元素的
2、层叠性
允许为一个元素定义多种的使用方式或多个样式规则
如果样式的声明之间不冲突的话，那么所有的样式声明都可以应用在元素上
3、优先级
允许为一个元素定义多种的使用方式或多个样式规则，如果样式声明冲突的话，会按照不同方式的优先级来应用样式
浏览器缺省设置 低
内部或外部样式表 中
就近原则 ：后定义者优先
内联方式 高
4、简易挑错
1、Invalid property value
属性值写错了
2、Unknown property name
属性名称写错了
5、CSS选择器(重难点)
1、作用
规范了页面中哪些元素能够使用声明好的样式
目的：为了匹配页面的元素
2、选择器详解
1、元素选择器
特点：由标记名称作为选择器，主要匹配页面中指定标记所对应的所有元素
语法：
标记{
样式声明;
}
ex:
div{ ... }
p{ ... }
input{ ... }
练习：
设置页面中所有的 a 元素，不显示下划线
不显示下划线：
text-decoration:none;
2、类选择器
特点：允许被任意元素所引用的选择器
语法：
1、声明
.类名{ 样式声明 }
类名：
1、字母，数字，_, - 组成
2、数字不能开头
ex:
div{ ... } /*元素选择器*/
.div{ ... }/*类选择器*/
2、引用
<标记 class="类名">(引用不加.)
练习：
1、创建网页04-selector-class.html
2、创建几个元素(div,p,span,h1)
3、使用类选择器，设置以上标记的样式
1、文字大小28px
2、背景颜色 silver
3、斜体显示 : font-style:italic;
特殊用法：
1、分类选择器的定义方式
允许将元素选择器和类选择器结合到一起使用，为了实现对某种元素不同样式的细分控制
语法：
元素选择器.类选择器{ ... }
ex:
.important{
类选择器，匹配所有class为important的元素
}
div{
元素选择器，匹配所有的div元素
}
div.important{
匹配class为important的div元素
}
2、多类选择器的引用方式
允许让一个元素同时引用多个类选择器，多个类选择器之间使用 空格 隔开
.c1{ ... }
.c2{ ... }
.c3{ ... }
<标记 class="c1 c2 c3">
练习：
增加一个类选择器
.dec{
text-decoration:underline;
}
让所有的元素都增加对dec类选择器的引用
3、id选择器
1、ID的作用
在HTML中，每个元素都允许设置一个id属性，主要用于表示该元素在网页中独一无二的标识
<div id="main"></div>
2、ID选择器
为了匹配页面中指定ID值的元素
语法：
#ID值{ ... }
EX:
#main{
color:red;
}
4、群组选择器
1、作用
定义多个选择器们的共有样式
定义方式是一个以,隔开的选择器列表
2、语法
选择器1,选择器2,选择器3,... ...{
... ...
}
ex:
#main,p,div.span,.redColor{
color:red;
}
等同于：
#main{color:red;}
p{color:red;}
div.span{color:red;}
.redColor{color:red;}
5、后代选择器
1、作用
依托于元素的后代关系来匹配元素(不限制层级)
2、语法
选择器1 选择器2{ ... }
ex:
#wang span{
匹配 id为wang的元素中所有的span元素
}
6、子代选择器
1、作用
依托于元素的子代关系来匹配元素
(只有一层层级关系)
2、语法
选择器1>选择器2{ ... }
#wang>span{
id为wang的元素中的下一级span元素
}
7、伪类选择器
1、作用
匹配元素不同状态的选择器
ex：超链接 a 元素，具备四个状态
状态1：链接未被访问时的状态
文本为蓝色，并有下划线
状态2：鼠标悬停在元素上的状态
鼠标的状态变成了 "手"
状态3：当元素被激活时(鼠标点击时)
文本变为红色
状态4：当访问过后的时候
文本颜色变为紫色
2、语法
:伪类状态
通常会配合其他元素一起使用
选择器:伪类状态{ ... }
选择器：匹配元素
:伪类状态：匹配状态
1、链接伪类
1、:link
匹配超链接未被访问时的状态
2、:visited
匹配超链接被访问后的状态
2、动态伪类
1、:hover
匹配悬停在元素上面时的状态
2、:active
匹配元素被激活时的状态
3、:focus
匹配获取焦点时的状态
(文本框和密码框使用居多)
3、选择器的优先级
当多个选择器能够同时应用到一个元素上时，并且样式发生冲突的话，则要按照不同选择器的优先级来应用样式
选择器的优先级看"权值"
选择器 取值
元素选择器 1
类/伪类选择器 10
id选择器 100
内联方式 1000
如果是复杂的选择器(后代，子代，分类)的计算方式是将选择器们的权值累加
6、尺寸 与 边框
1、单位
1、尺寸单位
1、px - 像素
2、% - 占据父元素对应属性的占比
3、in - 英寸 1in = 2.54cm
4、pt - 磅 1pt = 1/72in
在css中通常表示文字大小
计算机中通常设置PPI(Pixel Per Inch)为72
5、cm - 厘米
6、mm - 毫米
在css中，所有的尺寸单位是不能省略的
2、颜色单位(颜色取值)
1、rgb(r,g,b)
r:红色范围值，0-255
g:绿色范围值，0-255
b:蓝色范围值，0-255
ex:
background-color:rgb(255,0,0)
rgb(0,255,0) : 绿色
rgb(0,0,0) : 黑色
rgb(255,255,255) : 白色
2、rgba(r,g,b,alpha)
alpha:颜色透明度，取值 0-1 之间的数字
0 ：完全透明
1 ：完全不透明
ex:
background-color:rgba(128,36,72,0.5)
3、#rrggbb
由6位16进制数字来组成的颜色
#ff0000:
4、#rgb
#rrggbb的缩写，当每两位数字相同时，可以使用缩写的方式
#ff0000 -> #f00
#11ff33 -> #1f3
#333 -> #333333
5、表示颜色的英文单词
red,green,blue,... ...
1、CSS介绍
CSS ：Cascading Style Sheets
HTML:搭建网页结构
CSS:修饰和美化网页
2、CSS的使用方式（重点）
1、内联方式
又称为：行内样式，内联样式
特点：将CSS的内容定义在单独的HTML标签中
语法：
<标记 style="样式声明">
样式声明：就是要修饰的样式效果
1、样式声明是由样式属性和属性值来组成的
2、属性 和 值之间使用 : 连接
<标记 style="属性:值">
3、在一个style中允许出现多个样式声明，多个样式声明之间，用 ; 隔开
<标记 style="属性:值;属性:值;">
常用的属性和值：
1、文字大小
属性：font-size
取值：以 px 为单位的数字
ex:设置某div的文字大小为18px
<div style="font-size:18px;">xxx</div>
2、文本颜色
属性：color
取值：取值为表示英文的单词
ex:设置某div的文字颜色为红色(red)
<div style="color:red;">xxx</div>
3、背景颜色
属性：background-color
取值：取值为表示英文的单词
练习：
1、创建一个网页 01-style.html
2、创建一个div，内容随意(lorem)
3、使用内联方式，设置样式如下：
1、文字大小为 36px
2、文本颜色为 红色（red）
3、背景颜色为 黄色（yellow）
2、内部样式表
1、作用
让定义好的样式能够使用在当前页面的多个元素上
2、语法
<head>
<style>
样式规则1
样式规则2
... ...
样式规则n
</style>
</head>
样式规则：
由选择器 和 样式声明 组成的
目的：为了声明一组独立的样式
选择器：规范了页面中哪些元素能够使用声明好的样式
选择器{
属性1:值1;
属性2:值2;
}
ex:
p{
color:red;
}
span{
font-size:36px;
}
3、外部样式表
1、作用
将声明好的样式应用在多个网页中
将样式规则声明在独立的css文件中(***.css)
在使用的网页中对css文件进行引入即可
2、使用步骤
1、声明
创建.css文件，并编写样式规则
2、引用
<head>
<link rel="stylesheet" href="css文件路径">
</head>
3、样式表的特征
1、继承性
大部分的css属性是可以由父元素继承给子元素的
2、层叠性
允许为一个元素定义多种的使用方式或多个样式规则
如果样式的声明之间不冲突的话，那么所有的样式声明都可以应用在元素上
3、优先级
允许为一个元素定义多种的使用方式或多个样式规则，如果样式声明冲突的话，会按照不同方式的优先级来应用样式
浏览器缺省设置 低
内部或外部样式表 中
就近原则 ：后定义者优先
内联方式 高
4、简易挑错
1、Invalid property value
属性值写错了
2、Unknown property name
属性名称写错了
5、CSS选择器(重难点)
1、作用
规范了页面中哪些元素能够使用声明好的样式
目的：为了匹配页面的元素
2、选择器详解
1、元素选择器
特点：由标记名称作为选择器，主要匹配页面中指定标记所对应的所有元素
语法：
标记{
样式声明;
}
ex:
div{ ... }
p{ ... }
input{ ... }
练习：
设置页面中所有的 a 元素，不显示下划线
不显示下划线：
text-decoration:none;
2、类选择器
特点：允许被任意元素所引用的选择器
语法：
1、声明
.类名{ 样式声明 }
类名：
1、字母，数字，_, - 组成
2、数字不能开头
ex:
div{ ... } /*元素选择器*/
.div{ ... }/*类选择器*/
2、引用
<标记 class="类名">(引用不加.)
练习：
1、创建网页04-selector-class.html
2、创建几个元素(div,p,span,h1)
3、使用类选择器，设置以上标记的样式
1、文字大小28px
2、背景颜色 silver
3、斜体显示 : font-style:italic;
特殊用法：
1、分类选择器的定义方式
允许将元素选择器和类选择器结合到一起使用，为了实现对某种元素不同样式的细分控制
语法：
元素选择器.类选择器{ ... }
ex:
.important{
类选择器，匹配所有class为important的元素
}
div{
元素选择器，匹配所有的div元素
}
div.important{
匹配class为important的div元素
}
2、多类选择器的引用方式
允许让一个元素同时引用多个类选择器，多个类选择器之间使用 空格 隔开
.c1{ ... }
.c2{ ... }
.c3{ ... }
<标记 class="c1 c2 c3">
练习：
增加一个类选择器
.dec{
text-decoration:underline;
}
让所有的元素都增加对dec类选择器的引用
3、id选择器
1、ID的作用
在HTML中，每个元素都允许设置一个id属性，主要用于表示该元素在网页中独一无二的标识
<div id="main"></div>
2、ID选择器
为了匹配页面中指定ID值的元素
语法：
#ID值{ ... }
EX:
#main{
color:red;
}
4、群组选择器
1、作用
定义多个选择器们的共有样式
定义方式是一个以,隔开的选择器列表
2、语法
选择器1,选择器2,选择器3,... ...{
... ...
}
ex:
#main,p,div.span,.redColor{
color:red;
}
等同于：
#main{color:red;}
p{color:red;}
div.span{color:red;}
.redColor{color:red;}
5、后代选择器
1、作用
依托于元素的后代关系来匹配元素(不限制层级)
2、语法
选择器1 选择器2{ ... }
ex:
#wang span{
匹配 id为wang的元素中所有的span元素
}
6、子代选择器
1、作用
依托于元素的子代关系来匹配元素
(只有一层层级关系)
2、语法
选择器1>选择器2{ ... }
#wang>span{
id为wang的元素中的下一级span元素
}
7、伪类选择器
1、作用
匹配元素不同状态的选择器
ex：超链接 a 元素，具备四个状态
状态1：链接未被访问时的状态
文本为蓝色，并有下划线
状态2：鼠标悬停在元素上的状态
鼠标的状态变成了 "手"
状态3：当元素被激活时(鼠标点击时)
文本变为红色
状态4：当访问过后的时候
文本颜色变为紫色
2、语法
:伪类状态
通常会配合其他元素一起使用
选择器:伪类状态{ ... }
选择器：匹配元素
:伪类状态：匹配状态
1、链接伪类
1、:link
匹配超链接未被访问时的状态
2、:visited
匹配超链接被访问后的状态
2、动态伪类
1、:hover
匹配悬停在元素上面时的状态
2、:active
匹配元素被激活时的状态
3、:focus
匹配获取焦点时的状态
(文本框和密码框使用居多)
3、选择器的优先级
当多个选择器能够同时应用到一个元素上时，并且样式发生冲突的话，则要按照不同选择器的优先级来应用样式
选择器的优先级看"权值"
选择器 取值
元素选择器 1
类/伪类选择器 10
id选择器 100
内联方式 1000
如果是复杂的选择器(后代，子代，分类)的计算方式是将选择器们的权值累加
6、尺寸 与 边框
1、单位
1、尺寸单位
1、px - 像素
2、% - 占据父元素对应属性的占比
3、in - 英寸 1in = 2.54cm
4、pt - 磅 1pt = 1/72in
在css中通常表示文字大小
计算机中通常设置PPI(Pixel Per Inch)为72
5、cm - 厘米
6、mm - 毫米
在css中，所有的尺寸单位是不能省略的
2、颜色单位(颜色取值)
1、rgb(r,g,b)
r:红色范围值，0-255
g:绿色范围值，0-255
b:蓝色范围值，0-255
ex:
background-color:rgb(255,0,0)
rgb(0,255,0) : 绿色
rgb(0,0,0) : 黑色
rgb(255,255,255) : 白色
2、rgba(r,g,b,alpha)
alpha:颜色透明度，取值 0-1 之间的数字
0 ：完全透明
1 ：完全不透明
ex:
background-color:rgba(128,36,72,0.5)
3、#rrggbb
由6位16进制数字来组成的颜色
#ff0000:
4、#rgb
#rrggbb的缩写，当每两位数字相同时，可以使用缩写的方式
#ff0000 -> #f00
#11ff33 -> #1f3
#333 -> #333333
5、表示颜色的英文单词
red,green,blue,... ...
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
