CSS3Basic : C3基础
1、CSS概述
1、问题
1、在HTML中，所有的文本颜色变为红色
2、在HTML中，让所有的div变为蓝色
3、在HTML中，让所有的div变为黄色
HTML属性带来的弊端
1、相同的事情要用不同的属性完成
<body text="">
<font color="">
2、相同的事情重复的做(可重用性较低)
2、什么是CSS
Cascading Style Sheets
层叠样式表，级联样式表，通常称为：样式表
用户在HTML中定义元素样式
1、实现内容与表现相分离
2、提供代码的可重用性
3、CSS 与 HTML之间的关系
HTML ：定义网页结构
CSS ：构建页面的样式
HTML属性 与 CSS内容 如果能完成相同的事情，优先使用 CSS
2、CSS语法
1、使用CSS样式表的方式
1、内联方式(行内样式)
将 CSS样式 定义在单个 HTML 元素内
<ANY style="样式声明1;样式声明2;...样式声明n;"></ANY>
样式声明：(重点)
样式属性1:值;样式属性2:值;
ex:
样式属性 属性值
color 任意合法颜色值
background-color 任意合法颜色值
font-size 以px 或 pt 为单位
<p style="color:red;font-size:60px;">
2、内部样式表
在 <head>元素中的 <style></style> 里 编写若干"样式规则"
<html>
<head>
<style type="text/css">
样式规则1
样式规则2
...
样式规则n
</style>
</head>
</html>
样式规则：
选择器{
样式声明1;
样式声明2;
...
样式声明n;
}
ex
h1{
样式声明 ....
}
特点：
提升了样式的可重用性 和 可维护性
若在body定义了<p class="blue">对应.blue{}或者p.blue{}
定义了<p id="blue">对应#blue{}
3、外部样式表
将样式规则以及声明，存放在 独立的 样式文件中(**.css)
使用步骤：
1、创建样式表文件并编写样式
2、在使用的网页中，使用 <link>标记链接到外部样式表
<head>
<link rel="stylesheet" href="样式表URL" url="绝对定位">
</head>
就是在新建一个（ys.css)记得要选保存类型为css，调用<link rel="stylesheet" href="样式表URL" url="ys.css">
注释符：开始符/* 结束符*/
2、样式表的特征
1、继承性
直接使用父元素声明好的样式
大部分样式属性是可以被继承的
2、层叠性
可以为一个元素定义多个选择器
如果样式不冲突时，他们可以合并为一个，都应用在当前元素上
3、优先级
样式定义冲突时，会按照 不同 使用方式的优先级来应用样式
浏览器的缺省设置(UA Stylesheet) 最低
外部样式表或内部样式表 中
就近原则 - 后定义者优先
内联样式 高
/*优先级高低：内联选择（1000）〉ID选择（100）〉类选择（10）=伪类选择（10）〉元素选择（1），优先级可以在选择器相加*/
4、!important 规则
!important 可以显示调整优先级，永远都以 !important 的为准
样式属性:值 !important;
注意：尽量少用
/*p{color:blue !important;}*/
3、排错
1、Unknown property name
不认识的属性名称 - 属性名写错了
2、Invalid property value
未验证的属性值 - 属性值写错了
3、缺失分号
一部分样式 不识别
4、中文标点
一部分样式 不识别
4、选择器(重点 & 难点)
1、作用
p{} , div{} ,h1{}
规范了页面中哪些元素能够使用定义好的样式
为了匹配页面的元素
2、详解
1、通用选择器
作用：用于匹配页面中所有的元素,默认样式，但会降低css效率
语法：* { ... ... }
注意：
尽量少用 通用选择器
大部分属性是可以通过继承来取代 *
/*一般设置
*{
margin:0;
padding:0;
list-style:none;
}
*/
2、元素选择器
又称为：标签选择器，标签样式，元素样式
作用：用于定义或重写页面中某元素的默认样式
语法：页面元素作为选择器 {}
h1{ ... }
div{ ... }
...
input{ ... }
/*多个元素选择器设置css样式：h1,p,.bule,#pop{},用逗号隔开*/
3、类选择器
作用：用于定义一些元素的通用样式。类选择器定义好之后，允许被任意元素的class属性进行引用
语法：
.类名{}
类名规范：
1、英文，数字，下滑下(_),连字符(-)
2、不能以数字开头
页面元素 通过 class属性值 ，可以对类选择器进行引用
<ANY class="类名"></ANY>
<div class="important"></div>
类选择器-多类选择器的引用方式
即 让一个元素同时引用多个类选择器
语法：
<ANY class="class1 class2 class3">
/*如:<div class="center pop">*/可以定义div.center和div.pop的样式
类选择器-分类选择器的定义方式
即 将元素选择器 和 类选择器结合到一起来定义
目的：为了实现对某种元素中不同样式的的细分控制
语法：元素选择器.类选择器{}
div.important{} : 匹配页面中 class 为 important 的 div元素
span.redBack{} :匹配页面中 class 为 redBack 的 span元素
4、ID选择器
作用：用于 匹配 页面中 指定 ID值的 元素
（专属定制/私人订制）
语法：#ID值{}
<div id="container"></div>
样式表中：
#container{
}
5、群组选择器
作用：定义多个选择器中的通用样式
语法：以 , 隔开的选择器列表
ex:
.heavy,#container,div.important{
font-size:25px;
color:orange;
}/*用逗号隔开*/
等价于
.heavt{font-size:25px;color:orage;}
#container{font-size:25px;color:orage;}
div.important{font-size:25px;color:orage;}
6、后代选择器
后代元素：出现在某元素的任意层级的子元素都可以称之为 "后代元素"，用空格隔开
语法：
选择器1 选择器2{ .. ..}
ex:
#d1 span{
/*定义 id为d1 中 出现的所有span 元素的样式*/
}
7、子代选择器
子代元素：出现在某元素中，只具备一级层级关系元素称之为 "子代元素"，只存在父子关系，用大于号隔开
语法：
选择器1>选择器2{}
8、伪类选择器
作用：匹配页面元素不同状态的选择器
语法：
:伪类选择器{}
选择器:伪类选择器{}
分类：
1、链接伪类
1、:link , 定义未被访问的超链接状态
2、:visited,定义访问过的超链接状态
2、动态伪类
***1、:hover,定义鼠标悬停在元素时的状态（常用于链接，如a:hover{}）
2、:active,定义元素被激活时的状态
3、:focus,定义元素获取焦点时的状态
3、目标伪类
4、结构伪类
5、否定伪类
3、尺寸 与 边框
1、单位
1、尺寸单位
1、%
相对单位
2、in（英寸）
1in=2.54cm
3、cm
厘米
4、mm
毫米
5、pt
磅(点) -> Point
1pt = 1/72in
多数用在 文字 大小
6、px
Pixel ，像素，计算机屏幕上的一个点
屏幕分辨率：1024*768
7、em
倍数，父元素文字大小倍数
1em ：父元素字体原始大小
2em ：父元素字体大小的2倍
8、rem
倍数，相对于根元素(html)设置字体的尺寸倍数
2、颜色单位
在css中合法的颜色取值
1、rgb(r,g,b)
r:red (0-255)
g:green (0-255)
b:blue (0-255)
ex:
#d1{
color:rgb(0,0,0);/*黑色*/
}
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha)
alpha : 透明度
0 - 1 之间的数字
4、#rrggbb
由 6位 十六进制数字 表示一个颜色
十六进制：0-9 A-F 组成
A:10,B:11,C:12,D:13,E:14,F:15
ex:
#000000 : 黑色
#111111 : 深深深灰
#eeeeee : 浅浅浅灰
#ffffff : 白色
#1a2b3c : ?
常用：如京东红：#e4393c
5、#rgb
#rrggbb 的缩写，每两位数字相同时，可以采用缩写
#000000 -> #000
#aabbcc -> #abc
#1abbcc -> 无法缩写
常用：#000,balck,黑， #f30,red,红
#666,lime,石灰 #930,maroon,栗
#999,gray,灰 #ccc,silver,银白
#03c,navy,海军蓝 #363,olive,橄榄绿
#600,purple,紫 #ff0,yellow,黄
#06f,qaua,浅蓝绿 #0ff,blue,蓝
#6f0,green,绿 #933,fuchsia,紫红
#fff,white,白 #066,teal,暗蓝绿
6、颜色的英文表示法
red,blue,darkred,lightright,
2、尺寸属性
1、作用
用于设置元素的宽度和高度
单位通常为 px 或 %
2、语法
1、宽度
width : 指定元素的宽度
max-width : 最大宽度
min-width : 最小宽度
注意：
块级元素默认宽度：父元素宽度的100%
行内元素默认宽度：以内容为准
2、高度
height : 指定元素的高度
max-height: 最大高度
min-height: 最小高度
注意：
所有元素默认高度：以内容为准
3、哪些元素允许修改尺寸
1、块级元素 都允许修改尺寸
div,p,h1~h6,section,header,footer,...
2、大部分行内块元素允许修改
input 元素允许改，但 checkbox,radio 除外
3、存在 width，height 属性的HTML元素允许修改
<img width="" height="">
<table width="" height="">
/*如果行内元素如a、span要修改尺寸要在css定义：display: inline-block/block再添加宽高;或者增加宽高padding:Xpx;或者加浮动float:left/right再添加宽
高;或者加绝对定位position:absolute再添加宽高。*/
4、溢出
1、什么是溢出
使用尺寸属性控制元素大小时，如果内容所需空间大于元素本身，会导致内容 "溢出"
2、溢出处理属性
属性：
overflow
overflow-x : 横向溢出处理
overflow-y : 纵向溢出处理
取值：
1、visible
默认值，溢出可见
2、hidden
隐藏，溢出隐藏
3、scroll
滚动，让元素显示滚动条，溢出时可用
4、auto
自动，溢出时显示滚动条并可用，自适应
3、边框属性
总：border:width style color;
分：border-left/right/top/bottom
border-width:
border-style:solid(实线)dashed(虚线)dotted(点状线)none(没有)transparent(透明)double(双线边)groove(3D凹槽)ridge(菱形)inset(3D凹边)outset(3D突边)
border-color:
border-radius(圆边)：Xpx Xpx Xpx Xpx；
<div id="d1">
<span>#d1 中的 span</span>
<p>
<span>
<b>#d1 中的 p 中的 span 中的 b</b>
</span>
</p>
</div>
1、CSS概述
1、问题
1、在HTML中，所有的文本颜色变为红色
2、在HTML中，让所有的div变为蓝色
3、在HTML中，让所有的div变为黄色
HTML属性带来的弊端
1、相同的事情要用不同的属性完成
<body text="">
<font color="">
2、相同的事情重复的做(可重用性较低)
2、什么是CSS
Cascading Style Sheets
层叠样式表，级联样式表，通常称为：样式表
用户在HTML中定义元素样式
1、实现内容与表现相分离
2、提供代码的可重用性
3、CSS 与 HTML之间的关系
HTML ：定义网页结构
CSS ：构建页面的样式
HTML属性 与 CSS内容 如果能完成相同的事情，优先使用 CSS
2、CSS语法
1、使用CSS样式表的方式
1、内联方式(行内样式)
将 CSS样式 定义在单个 HTML 元素内
<ANY style="样式声明1;样式声明2;...样式声明n;"></ANY>
样式声明：(重点)
样式属性1:值;样式属性2:值;
ex:
样式属性 属性值
color 任意合法颜色值
background-color 任意合法颜色值
font-size 以px 或 pt 为单位
<p style="color:red;font-size:60px;">
2、内部样式表
在 <head>元素中的 <style></style> 里 编写若干"样式规则"
<html>
<head>
<style type="text/css">
样式规则1
样式规则2
...
样式规则n
</style>
</head>
</html>
样式规则：
选择器{
样式声明1;
样式声明2;
...
样式声明n;
}
ex
h1{
样式声明 ....
}
特点：
提升了样式的可重用性 和 可维护性
若在body定义了<p class="blue">对应.blue{}或者p.blue{}
定义了<p id="blue">对应#blue{}
3、外部样式表
将样式规则以及声明，存放在 独立的 样式文件中(**.css)
使用步骤：
1、创建样式表文件并编写样式
2、在使用的网页中，使用 <link>标记链接到外部样式表
<head>
<link rel="stylesheet" href="样式表URL" url="绝对定位">
</head>
就是在新建一个（ys.css)记得要选保存类型为css，调用<link rel="stylesheet" href="样式表URL" url="ys.css">
注释符：开始符/* 结束符*/
2、样式表的特征
1、继承性
直接使用父元素声明好的样式
大部分样式属性是可以被继承的
2、层叠性
可以为一个元素定义多个选择器
如果样式不冲突时，他们可以合并为一个，都应用在当前元素上
3、优先级
样式定义冲突时，会按照 不同 使用方式的优先级来应用样式
浏览器的缺省设置(UA Stylesheet) 最低
外部样式表或内部样式表 中
就近原则 - 后定义者优先
内联样式 高
/*优先级高低：内联选择（1000）〉ID选择（100）〉类选择（10）=伪类选择（10）〉元素选择（1），优先级可以在选择器相加*/
4、!important 规则
!important 可以显示调整优先级，永远都以 !important 的为准
样式属性:值 !important;
注意：尽量少用
/*p{color:blue !important;}*/
3、排错
1、Unknown property name
不认识的属性名称 - 属性名写错了
2、Invalid property value
未验证的属性值 - 属性值写错了
3、缺失分号
一部分样式 不识别
4、中文标点
一部分样式 不识别
4、选择器(重点 & 难点)
1、作用
p{} , div{} ,h1{}
规范了页面中哪些元素能够使用定义好的样式
为了匹配页面的元素
2、详解
1、通用选择器
作用：用于匹配页面中所有的元素,默认样式，但会降低css效率
语法：* { ... ... }
注意：
尽量少用 通用选择器
大部分属性是可以通过继承来取代 *
/*一般设置
*{
margin:0;
padding:0;
list-style:none;
}
*/
2、元素选择器
又称为：标签选择器，标签样式，元素样式
作用：用于定义或重写页面中某元素的默认样式
语法：页面元素作为选择器 {}
h1{ ... }
div{ ... }
...
input{ ... }
/*多个元素选择器设置css样式：h1,p,.bule,#pop{},用逗号隔开*/
3、类选择器
作用：用于定义一些元素的通用样式。类选择器定义好之后，允许被任意元素的class属性进行引用
语法：
.类名{}
类名规范：
1、英文，数字，下滑下(_),连字符(-)
2、不能以数字开头
页面元素 通过 class属性值 ，可以对类选择器进行引用
<ANY class="类名"></ANY>
<div class="important"></div>
类选择器-多类选择器的引用方式
即 让一个元素同时引用多个类选择器
语法：
<ANY class="class1 class2 class3">
/*如:<div class="center pop">*/可以定义div.center和div.pop的样式
类选择器-分类选择器的定义方式
即 将元素选择器 和 类选择器结合到一起来定义
目的：为了实现对某种元素中不同样式的的细分控制
语法：元素选择器.类选择器{}
div.important{} : 匹配页面中 class 为 important 的 div元素
span.redBack{} :匹配页面中 class 为 redBack 的 span元素
4、ID选择器
作用：用于 匹配 页面中 指定 ID值的 元素
（专属定制/私人订制）
语法：#ID值{}
<div id="container"></div>
样式表中：
#container{
}
5、群组选择器
作用：定义多个选择器中的通用样式
语法：以 , 隔开的选择器列表
ex:
.heavy,#container,div.important{
font-size:25px;
color:orange;
}/*用逗号隔开*/
等价于
.heavt{font-size:25px;color:orage;}
#container{font-size:25px;color:orage;}
div.important{font-size:25px;color:orage;}
6、后代选择器
后代元素：出现在某元素的任意层级的子元素都可以称之为 "后代元素"，用空格隔开
语法：
选择器1 选择器2{ .. ..}
ex:
#d1 span{
/*定义 id为d1 中 出现的所有span 元素的样式*/
}
7、子代选择器
子代元素：出现在某元素中，只具备一级层级关系元素称之为 "子代元素"，只存在父子关系，用大于号隔开
语法：
选择器1>选择器2{}
8、伪类选择器
作用：匹配页面元素不同状态的选择器
语法：
:伪类选择器{}
选择器:伪类选择器{}
分类：
1、链接伪类
1、:link , 定义未被访问的超链接状态
2、:visited,定义访问过的超链接状态
2、动态伪类
***1、:hover,定义鼠标悬停在元素时的状态（常用于链接，如a:hover{}）
2、:active,定义元素被激活时的状态
3、:focus,定义元素获取焦点时的状态
3、目标伪类
4、结构伪类
5、否定伪类
3、尺寸 与 边框
1、单位
1、尺寸单位
1、%
相对单位
2、in（英寸）
1in=2.54cm
3、cm
厘米
4、mm
毫米
5、pt
磅(点) -> Point
1pt = 1/72in
多数用在 文字 大小
6、px
Pixel ，像素，计算机屏幕上的一个点
屏幕分辨率：1024*768
7、em
倍数，父元素文字大小倍数
1em ：父元素字体原始大小
2em ：父元素字体大小的2倍
8、rem
倍数，相对于根元素(html)设置字体的尺寸倍数
2、颜色单位
在css中合法的颜色取值
1、rgb(r,g,b)
r:red (0-255)
g:green (0-255)
b:blue (0-255)
ex:
#d1{
color:rgb(0,0,0);/*黑色*/
}
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha)
alpha : 透明度
0 - 1 之间的数字
4、#rrggbb
由 6位 十六进制数字 表示一个颜色
十六进制：0-9 A-F 组成
A:10,B:11,C:12,D:13,E:14,F:15
ex:
#000000 : 黑色
#111111 : 深深深灰
#eeeeee : 浅浅浅灰
#ffffff : 白色
#1a2b3c : ?
常用：如京东红：#e4393c
5、#rgb
#rrggbb 的缩写，每两位数字相同时，可以采用缩写
#000000 -> #000
#aabbcc -> #abc
#1abbcc -> 无法缩写
常用：#000,balck,黑， #f30,red,红
#666,lime,石灰 #930,maroon,栗
#999,gray,灰 #ccc,silver,银白
#03c,navy,海军蓝 #363,olive,橄榄绿
#600,purple,紫 #ff0,yellow,黄
#06f,qaua,浅蓝绿 #0ff,blue,蓝
#6f0,green,绿 #933,fuchsia,紫红
#fff,white,白 #066,teal,暗蓝绿
6、颜色的英文表示法
red,blue,darkred,lightright,
2、尺寸属性
1、作用
用于设置元素的宽度和高度
单位通常为 px 或 %
2、语法
1、宽度
width : 指定元素的宽度
max-width : 最大宽度
min-width : 最小宽度
注意：
块级元素默认宽度：父元素宽度的100%
行内元素默认宽度：以内容为准
2、高度
height : 指定元素的高度
max-height: 最大高度
min-height: 最小高度
注意：
所有元素默认高度：以内容为准
3、哪些元素允许修改尺寸
1、块级元素 都允许修改尺寸
div,p,h1~h6,section,header,footer,...
2、大部分行内块元素允许修改
input 元素允许改，但 checkbox,radio 除外
3、存在 width，height 属性的HTML元素允许修改
<img width="" height="">
<table width="" height="">
/*如果行内元素如a、span要修改尺寸要在css定义：display: inline-block/block再添加宽高;或者增加宽高padding:Xpx;或者加浮动float:left/right再添加宽
高;或者加绝对定位position:absolute再添加宽高。*/
4、溢出
1、什么是溢出
使用尺寸属性控制元素大小时，如果内容所需空间大于元素本身，会导致内容 "溢出"
2、溢出处理属性
属性：
overflow
overflow-x : 横向溢出处理
overflow-y : 纵向溢出处理
取值：
1、visible
默认值，溢出可见
2、hidden
隐藏，溢出隐藏
3、scroll
滚动，让元素显示滚动条，溢出时可用
4、auto
自动，溢出时显示滚动条并可用，自适应
3、边框属性
总：border:width style color;
分：border-left/right/top/bottom
border-width:
border-style:solid(实线)dashed(虚线)dotted(点状线)none(没有)transparent(透明)double(双线边)groove(3D凹槽)ridge(菱形)inset(3D凹边)outset(3D突边)
border-color:
border-radius(圆边)：Xpx Xpx Xpx Xpx；
<div id="d1">
<span>#d1 中的 span</span>
<p>
<span>
<b>#d1 中的 p 中的 span 中的 b</b>
</span>
</p>
</div>
59
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
