html-day04

1、html属性的弊端
1、完成相同的功能需要不同的属性支持
2、可维护性不高
2、CSS
1、什么是CSS
Cascading Style Sheet
层叠样式表、级联样式表、样式表
2、使用CSS的好处
1、将内容与表现分离
2、提高了代码的可重用性和可维护性
3、CSS与HTML之间的关系
1、html主要用于构建网页结构与内容
2、CSS 用于构建网页的样式
4、html属性与 css使用
能使用css修改的样式就不要用html属性
html特有的属性只能使用html属性，比如 colspan,rowspan
3、使用CSS样式表
1、CSS样式表使用方式
1、内联方式
在html标签中使用css【样式】
2、内部样式表
将【样式表】定义在html<head>中
3、外部样式表
将【样式表】定义在外部css文件中(.css)
由html页面进行引入

2、样式表的使用
1、内联方式
行内样式
使用方法：将样式定义在标签的style属性中
CSS语法：
1、允许出现一个或多个属性:值; 对在style中
2、<div style="color:red;"></div>
2、内部样式表
1、在<head>中添加一对 <style></style>
2、在style 中，允许出现若干【样式规则】
样式规则组成:
选择器：规范了页面中哪些元素能够使用定义好的样式
样式声明：各个样式属性以及值属性:值;

选择器{
/*注释*/
样式声明;
属性:值;
属性:值;
}
/*

*/
3、外部样式表
step1:创建样式表文件，用于保存样式规则
xxx.css
step2:在页面对样式表文件进行引入
<head>
<link rel="stylesheet" type="text/css" href="样式表文件路径" />
</head>
4、CSS语法
1、CSS语法规范
1、样式语法总结
1、内联：样式声明
2、样式表(内外)
多个样式规则组成
样式规则：选择器和样式声明组成
2、CSS样式表特征
1、继承性
大多数样式规则可以被继承的
2、层叠性
为一个元素定义多个样式
样式属性不冲突时，多个样式可以层叠为一个
3、优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式

浏览器缺省设置最低
外部样式表或内部样式表中
就近原则:就近优先
内联样式最高
相同样式，以最后一次为主

!important规则 :
调整样式规则的优先级
p{
color:red !important;
}

2、选择器
选择器的作用：规范了页面中哪些元素能够使用定义好的样式
1、通用选择器
作用：匹配页面上的任何一个元素
语法：*{}
*{
font-size:12px;
/*...*/
}
2、元素选择器
别名：标签选择器、标记选择器
作用：匹配页面上指定的元素
语法：元素名称作为选择器
body{

}
div{

}
....

body{
font-size:12px;
/*字体*/
font-family:Verdana,"微软雅黑";
}
3、类选择器
作用：通过元素的class属性值，对类选择器进行引用
语法：.类名{}
使用: <div class="类名"></div>
注意：类名不能以数字开头

.div123{}
<div class="div123"></div>

h3{} -->元素选择器
.h3{} -->类选择器
4、分类选择器
将类选择器和元素选择器结合使用，实现对某种元素中不同样式的细分控制
语法:元素选择器.类选择器{}
div.redBack{}
5、id选择器
为标有特定id的html元素指定样式
语法：#id值{}
#header{
background-color:red;
}
<div id="header"></div>
6、群组选择器
语法：选择器声明是以 , 隔开的选择器列表
场合：将一些相同的规则用于多个元素时
div,p,#p1,div.top{
color:red;
}

#p1{
background-color:orange;
}
7、后代选择器
语法：选择器1 选择器2{}
div span{
/*匹配div中所有的span*/
}
#d1 #p1{

}
div.top span{

}
8、子代选择器
只通过父子级关系定位元素
语法：选择器1>选择器2
#d1>div{}
9、伪类选择器
特点：匹配元素某种特定的状态
语法: 由 :作为结合符
选择器:伪类选择器{}
CSS伪类可以分为：
1、链接伪类
:link 匹配尚未访问的超链接
:visited 匹配访问过的超链接
2、动态伪类
:hover 匹配鼠标悬停在html元素的状态
:active 匹配元素被激活时的状态
:focus 匹配元素获取焦点时的状态(多数使用在文本框上)

3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
问题：如果多个选择器，同时改掉一个元素的样式，最终以谁为准？？

5、颜色单位
RGB ：
R ：red 红色
G ：green 绿色
B ：blue 蓝色
1、rgb(r,g,b)
每个值的范围 0-255
rgb(0,0,0) : 黑色
rgb(255,255,255) : 白色
rgb(255,0,0) : 红色
2、rgb(r%,g%,b%)
3、#rrggbb
十六进制：0-9 A-F

#000000 : 黑色
#ffffff : 白色
#abc12f
4、#rgb
#000 -> #000000
#aaa -> #aaaaaa
5、颜色的英文单词
6、尺寸
设置元素的宽度和高度
像素和百分比作为单位
1、宽度
width

max-width : 最大宽度
min-width : 最小宽度
2、高度
height

max-height
min-height
3、溢出处理
属性：
overflow
overflow-x : 横向溢出处理方式
overflow-y : 纵向溢出处理方式
取值：
visible ：溢出可见
hidden ：溢出隐藏
scroll ：出现滚动条
auto ：自动不溢出不显示滚动条，溢出的话则显示滚动条
4、注意
能够修改尺寸属性的元素
1、块级元素
p,div,hn,ul,ol,dl,dt,dd
2、存在width、height属性的html元素
img，table

行内元素：无法修改尺寸
7、边框属性
1、边框
属性：
简写方式：border:width style color;
width : 宽度，以px为单位
style : 样式
取值： solid 实线
dotted 虚线
dashed 虚线
color : 颜色#rrggbb,...
单边定义：
border-left/right/top/bottom:width style color;

border:1px solid black;
border-left:1px solid red;

border-方向:width style color;

border-width : 四个方向边框宽度;
border-方向-单边宽度

border-style : 四个方向边框样式
border-方向-style:单边样式

borer-color:四个方向边框颜色
border-方向-color:单边颜色

注意：颜色取值可以为 transparent(透明色)

2、边框倒角
属性 : border-radius
取值 : 具体数值或 %

border-radius:20px; 四个角倒角半径都为20px
border-radius:10px 20px 30px 40px;
单独定义：
border-top-left-radius:
border-bottom-right-radius: