CSS：Cascading Style Sheets -层叠 样式表
HTML：搭建网页结构
CSS：在网页结构基础上增加样式效果
css 就是给 html 定义外观 ，html是毛坯房css 就是装修
如果CSS的内容与HTML属性相冲突的话：优先使用CSS
2、CSS的使用方式（重点）
1、内联方式
将CSS的内容定义在单独的HTML元素中
语法：
<ANY style="样式声明">
样式声明：
1、样式声明由样式属性名称 和 样式属性值来组成的
2、属性名称 和 值 之间使用 : 连接
属性名:值
3、在一个style中允许有多个样式声明，多个样式声明之间使用 ; 来分割
<ANY style="属性1:值1;属性2:值2;">
常用属性 和 值：
1、文字大小
属性：font-size
取值：以 px 为单位的数字
ex：
<ANY style="font-size:16px">
2、文本颜色
属性：color
取值：表示颜色的英文单词
3、背景颜色
属性：background-color
取值：表示颜色的英文单词
2、内部样式表
1、作用
让定义好的样式能够适应当前页面中的多个元素
2、语法
<head>
<style>
样式规则1
样式规则2
... ...
样式规则n
</style>
</head>
样式规则语法：
由选择器 和 样式声明组成
选择器：规范了页面中哪些元素能够使用声明好的样式们
选择器{
属性1:值1;
属性2:值2;
... ...
}
ex:
div{
... ...
}
p{
... ...
}
h1{
... ...
}
3、外部样式表
1、作用
将声明好的样式应用在多个网页中
将样式规则声明在独立的css文件中(***.css)
在使用的网页上对 .css 文件进行引用
2、使用步骤
1、创建 .css 文件，并编写样式规则
2、引用 .css 文件
<head>
<link rel="stylesheet" href="css文件的url">
</head>
3、样式表的特征
1、继承性
大部分的css属性可以由父元素继承给子元素的
2、层叠性
允许为一个元素定义多种使用方式(内联，内部样式表，外部样式表)或多个样式规则，如果属性不冲突的话，那么所有的属性都可以应用到元素上
3、优先级
如果样式属性声明冲突的话，则按照不同的优先级来应用样式
浏览器缺省设置 ： 低
内部或外部样式表 ： 中
就近原则：后定义者优先
内联方式 ： 高
1、样式表的使用方式
1、内联方式
<ANY style="样式属性:值;属性:值;">
2、内部样式表
<head>
<style>
样式规则
选择器{
样式声明;
样式声明;
}
</style>
</head>
3、外部样式表
1、将样式声明在独立的css文件中(.css)
结构与内部样式表一致
2、在使用的网页中引入 .css 文件
<link rel="stylesheet" href="css文件的url">
font-size:字体大小
color:文本颜色
background-color:背景颜色
===============================================
1、CSS选择器(重点)
1、选择器作用
规范了页面中哪些元素能够使用声明好的样式
目的：为了匹配页面中的元素
2、选择器详解
1、元素选择器
特点：由标记的名称来作为选择器，主要匹配页面中指定标记所对应的所有元素
语法：
标记{
样式声明;
}
ex:
p{ ... }
div{ ... }
h3{ ... }
... ...
2、类选择器
特点：允许被任意一个元素所引用的选择器
语法：
.类名{ ... }
类名：
1、字母，数字，_,- 组成
2、数字不能开头
引用类选择器：
<ANY class="类名"> (此处不加 .)
练习：
1、创建一个01-selector-class.html文件
2、页面中创建几个元素(div,span,h3,p)
3、使用类选择器，设置以上所有标记的样式
1、文字大小：18px
2、文本颜色：黄色
3、背景颜色：红色
特殊用法：
1、分类选择器
允许将元素选择器和类选择器结合到一起使用，为了实现对某种元素不同样式的细分控制
语法：
元素选择器.类选择器{ ... }
ex:
.important{
类选择器，匹配页面中所有class为important的元素
}
div{
元素选择器，匹配页面中所有的 div
}
div.important{
分类选择器，匹配页面中所有class为important的div元素
}
练习：
在刚才的练习基础上
设置页面中所有的 class为bigFont的div标记，加粗效果(font-weight:bold;)
2、多类选择器
允许一个元素引用多个类选择器，类选择器的名称用 空格 隔开即可
<ANY class="c1 c2 c3">
练习：
增加一个类选择器
.dec{
text-decoration:underline;
}
让页面中所有的元素增加对 dec 类选择器的引用
3、id选择器
在HTML中，每个元素都允许设置一个 id 属性，用来表示元素在页面中独一无二的标识
ID选择器作用:
为了匹配页面中指定ID值的元素
语法：#ID值{ ... }
ex:
#main{
/*匹配页面中id为main的元素的样式*/
}
4、群组选择器
1、作用
定义多个选择器们共有的样式
定义方式是一个以 , 隔开的选择器列表
2、语法
选择器1,选择器2,选择器3,...{
... ...
}
ex:
#main,span,p.important{
color:red;
}
等价于
#main{color:red;}
span{color:red;}
p.important{color:red;}
5、后代选择器
1、作用
依托于元素的后代关系来匹配某元素的后代元素(不限制层级)
2、语法
选择器1 选择器2{ ... }
ex:
1、div span{
匹配所有div 中的 所有的 span
}
2、#top .important{
匹配 id为top的元素中 class 为important 的所有后代
}
6、子代选择器
作用：依托于元素的子代关系(只有一层层级)来匹配元素
语法：选择器1>选择器2{ ... }
ex:
#top>.important{
匹配 id为top元素中直接子级class为important的元素
}
7、伪类选择器
1、作用
为了匹配元素的不同的状态的
2、语法
:伪类状态
通常会配合其他的选择器一起使用
元素选择器:伪类{}
#ID:伪类{}
... ...
1、链接伪类
1、:link
匹配超链接未被访问时的状态
2、:visited
匹配超链接被访问过的状态
2、动态伪类
1、:hover
匹配鼠标悬停在元素上时候的状态
2、:active
匹配元素被激活时的状态
3、:focus
匹配元素获取焦点时的状态
2、尺寸 与 边框
1、CSS单位
1、尺寸单位
2、颜色单位
1、rgb(r,g,b)
r : 红色范围值 0-255
g : 绿色范围值 0-255
b : 蓝色范围值 0-255
ex:
rgb(255,0,0) : 红色
rgb(0,255,0) : 绿色
rgb(255,255,255) : 白色
rgb(0,0,0) : 黑色
rgb(128,69,32) : ??
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha)
alpha : 透明度 0-1之间的数字(小数)
0 ：完全透明
1 ：完全不透明
4、#rrggbb
由6位16进制的数字组成(0-9,A-F)
ex:
#ff0000 : 红色
#1a2b3c : ??
5、#rgb
#rrggbb的简写方式，当#rrggbb每两位数字相同时，可以使用 简写版
#112233 -> #123
#ff00aa -> #f0a
#f100aa -> 无简写方式
2、尺寸属性
1、作用
改变元素的宽度和高度
2、属性
width : 宽度，以px 或 % 为单位
ex：
width:500px;
width:0; width:0px;
height: 高度，以px 或 % 为单位
块级元素默认尺寸：
宽度：占父元素的100%
高度：以内容为准
行内元素默认尺寸：
宽度：以内容为准
高度：以内容为准
3、允许修改尺寸的元素
1、所有的块级元素都允许修改尺寸
2、行内块元素(表单控件)允许修改尺寸
3、table允许修改尺寸
4、除img以外的行内元素们，都不允许修改尺寸
4、溢出处理
1、什么是溢出
当使用尺寸属性限制元素尺寸时，如果内容所需空间大于元素尺寸时，将产生溢出的效果
2、溢出处理
属性：overflow
取值：
1、visible
默认值，可见的
2、hidden
溢出隐藏
3、scroll
显示滚动条，溢出时可用
4、auto
自动，溢出的方向产生滚动条
3、边框属性
1、边框的实现
1、简写方式
通过1个属性设置4个方向边框的所有效果(宽度,样式,颜色)
属性：border
取值：width style color
width:边框宽度，以px为单位
style:边框的样式
solid : 实线
dotted: 虚线(点)
dashed: 虚线(线)
color:颜色 或 transparent(透明)
特殊：
border:none; 取消所有边框的显示效果
2、单边定义
设置某一条边的宽度，样式，颜色
语法：
border-方向:width style color;
方向：top / bottom / left / right
ex:
1、上边框：1px宽度，实线，黑色
2、左边框：2px宽度，虚线，红色
3、单属性定义
设置四个方向边框的某一个属性值
属性：border-属性:值;
属性：width / style / color
ex:
1、设置四个方向的边框尺寸为5px
2、设置四个方向的边框颜色为蓝色
4、单边单属性设置
设置某一个方向的边框的某一个属性值
属性：border-方向-属性:值;
ex:
1、右边框的样式为 虚线(线)
2、下边框的颜色为 绿色
2、轮廓
outline:none; 取消轮廓
3、边框倒角
将四个直角变为圆角
属性：border-radius
取值：
1、以px为单位的数值
2、以%为单位的数值 - 50%
练习：
1、创建09-border-radius-exercise.html
2、创建一个div，尺寸 200*200，边框 ...
3、鼠标悬停时
1、将元素变为圆形的
2、背景颜色改为红色
3、框模型
1、什么是框模型
框：页面中所有元素皆为框
框模型：定义了元素的尺寸和距离的一种计算方式
Box Model,也称为 盒模型，方框属性
包含 ：尺寸属性，边框属性，内边距属性，外边距属性
当框模型的属性介入到元素中的时候，那么元素的整体占地尺寸会发生变化
元素的实际宽度=左右外边距 + 左右边框 + 左右内边距 + width
元素的实际高度=上下外边距 + 上下边框 + 上下内边距 + height
2、外边距
1、什么是外边距
围绕在元素边缘之外的空白空间就是外边距
2、语法
1、属性
1、margin
最多控制4个方向的外边距值
2、margin-top
上外边距
3、margin-right
右外边距
4、margin-bottom
下外边距
5、margin-left
左外边距
2、取值
1、以 px 为单位的数值
2、以 % 为单位的数字
左右外边距占父元素宽度的占比数
上下外边距占父元素高度的占比数
3、取值为 负数
移动元素
为元素设置上外边距为正数，元素向下移动
为元素设置上外边距为负数，元素向上移动
为元素设置左外边距为正数，元素向右移动
为元素设置左外边距为负数，元素向左移动
4、auto
自动
注意：
1、只能用在左右外边距，上下无效
2、只能为设定宽度的块级元素设置左右外边距为auto - 让块级元素水平居中显示
3、margin间接写法
1、margin:value
value表示的是上下左右四个方向的外边距值
2、margin:v1 v2;
v1 : 上下外边距的值
v2 : 左右外边距的值
ex：
margin:0 auto;
3、margin:v1 v2 v3;
v1 : 上外边距
v2 : 左右外边距
v3 : 下外边距
ex:
margin:10px auto 5px;
4、margin:v1 v2 v3 v4;
v1 : 上外边距
v2 : 右外边距
v3 : 下外边距
v4 : 左外边距
3、页面中具备默认外边距的元素
body，p，h1~h6，ol，ul
将所有具备外边距的元素们的外边距都设置为0
body,p,h1,h2,h3,h4,h5,h6,ol,ul{
margin:0;
}
3、内边距
1、什么是内边距
内容与元素边框之间的距离
注意：内边距会扩大元素边框的所占区域
2、语法
属性：
padding ：4个方向的内边距
padding-top / right / bottom / left:值;
取值：
1、以px为单位的数值
2、以% 为单位的数值
简洁写法：同margin
padding:value; 四个方向内边距
padding:v1 v2; 上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
3、页面中具备默认内边距的元素
1、ol，ul ：左内边距 40px
2、文本框，密码框
<div id="main">
<p>
<span>这是 p1中的 s1</span>
</p>
<span> 这是 main 中的 s2 </span>
</div>
1、页面中#main中的所有的span，文本变为红色，文字大小 24px
2、页面中 #main 直接子级的span 增加下划线
3、#main中，p中的span 设置为加粗的效果
2656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
