html+css样式
CSS：层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
多个样式：
1.外部样式：通过头部中的link标签外链的方式
2.内部样式：通过头部标签添加style属性定义body中的所有元素标签样式
3.内联样式：直接定义body中元素标签的样式
当同一个标签元素被以上三种样式同时定义时，内联样式拥有最高优先级，其次外部样式，最后内部样式
内联样式：
在body标签中使用style属性直接定义样式
style属性就是css样式定义
当个别标签需要特别定义时，可使用内联样式，因为拥有最高优先级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> yifachen </title> </head> <body> <form action="http://www.baidu.com" method="get" ><br /> 你喜欢的游戏是？<br /> <lable style="color: blue;"><input type="checkbox" />LOL</lable> <lable style="color: burlywood;" ><input type="checkbox" />PUBG</lable> <lable style="color: darkgreen;" ><input type="checkbox" checked=""/>DNF</lable><br /> <button style="color: red;" type="reset">重置</button> <button style="color: green" type="submit">提交</button> </form> </body> </html>
内部样式：
在head头部中使用style标签来定义body中所有的标签样式
style标签中的type属性为text/css 是为了告诉html接下来的文本内容使用css的样式
代码中lable标签与button标签的颜色被定义 所以body中label标签与button标签的颜色属性将使用css样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yifachen</title> <style type="text/css"> lable{ color: aqua; } button{ color: blue; } </style> </head> <body> <form action="http://www.baidu.com" method="get" ><br /> 你喜欢的游戏是？<br /> <lable><input type="checkbox" />LOL</lable> <lable ><input type="checkbox" />PUBG</lable> <lable ><input type="checkbox" checked=""/>DNF</lable><br /> <button type="reset">重置</button> <button type="submit">提交</button> </form> </body> </html>
外部样式：
使用link标签来指向外部资源
当需要渲染多个相同的页面时，使用外部样式最好不过了
link标签中使用href属性来指向外部资源的路径 即可调用到外部文件中的css样式代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yifachen</title> <link rel="stylesheet" type="text/css" href="../css/css1.css"/> </head> <body> <form action="http://www.baidu.com" method="get" ><br /> 你喜欢的游戏是？<br /> <label style="color: #FFFF00;" ><input type="checkbox" />LOL</label> <label ><input type="checkbox" />PUBG</label> <label ><input type="checkbox" checked=""/>DNF</label><br /> <button type="reset">重置</button> <button type="submit">提交</button> </form> </body> </html>
id选择器：
id选择器 可以选择到body中所有标签的id值，并把等于该值的标签渲染成css样式
id选择器以#来定义或选择id的值
#youzi就是选中body中所有 id=youzi的标签值 并把颜色定义成绿色
实际工作中id一般具有唯一性，所有id选择器实战中并不适用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yifachen</title> <style type="text/css"> #youzi{ color: green; } </style> </head> <body> <form action="http://www.baidu.com" method="get" ><br /> 你喜欢的游戏是？<br /> <label style="color: #FFFF00;" ><input type="checkbox" />LOL</label> <label id="youzi" ><input type="checkbox" />PUBG</label> <label id="youzi"><input type="checkbox" checked=""/>DNF</label><br /> <button id="youzi" type="reset">重置</button> <button type="submit">提交</button> </form> </body> </html>
class选择器：
class选择器 可以选择到body中所有标签的class值，并把等于该值的标签渲染成css样式
class选择器以.来定义或选择id的值
.youzi就是选中body中所有 class=youzi的标签值 并把颜色定义成绿色
实际工作中一般都使用class选择器，因为class属性不具有唯一性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yifachen</title> <style type="text/css"> .youzi{ color: green; } </style> </head> <body> <form action="http://www.baidu.com" method="get" ><br /> 你喜欢的游戏是？<br /> <label style="color: #FFFF00;" ><input type="checkbox" />LOL</label> <label class="youzi" ><input type="checkbox" />PUBG</label> <label class="youzi"><input type="checkbox" checked=""/>DNF</label><br /> <button class="youzi" type="reset">重置</button> <button type="submit">提交</button> </form> </body> </html>
选择器分组与元素选择器：
选择单个标签时叫元素选择器
选择多个标签时叫选择器分组
代码中使用选择器分组 选中了label与button标签
元素选择器选中了p标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yifachen</title> <style type="text/css"> label,button{ color: green; } p{ color: darkgreen; } </style> </head> <body> <form action="http://www.baidu.com" method="get" ><br /> <p>你喜欢的游戏是？</p><br /> <label style="color: #FFFF00;" ><input type="checkbox" />LOL</label> <label class="youzi" ><input type="checkbox" />PUBG</label> <label class="youzi"><input type="checkbox" checked=""/>DNF</label><br /> <button class="youzi" type="reset">重置</button> <button type="submit">提交</button> </form> </body> </html>
伪类选择器：
css伪类向其他选择器添加特殊效果
a:link{color: #FF0000} 未访问的链接
a:visited{color: #00FF00} 已访问的链接
a:hover{color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yifachen</title> <style type="text/css"> label,button{ color: green; } label:hover{ color: azure; } </style> </head> <body> <form action="http://www.baidu.com" method="get" ><br /> <p>你喜欢的游戏是？</p><br /> <label style="color: #FFFF00;" ><input type="checkbox" />LOL</label> <label class="youzi" ><input type="checkbox" />PUBG</label> <label class="youzi"><input type="checkbox" checked=""/>DNF</label><br /> <button class="youzi" type="reset">重置</button> <button type="submit">提交</button> </form> </body> </html>
选择器中的其他属性：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yifachen</title> <style type="text/css"> label,button{ color: green; font: "微软雅黑"; /*字体颜色*/ font-size: 50px; /*字体大小*/ font-style: italic; /*字体斜体*/ font-weight: bold; /*字体加粗*/ text-decoration: underline; /*下划线*/ text-align: center; /*文本内容居中*/ cursor: pointer; /*鼠标移动上去变为手状*/ } label:hover{ color: azure; } </style> </head> <body> <form action="http://www.baidu.com" method="get" ><br /> <p>你喜欢的游戏是？</p><br /> <label style="color: #FFFF00;" ><input type="checkbox" />LOL</label> <label class="youzi" ><input type="checkbox" />PUBG</label> <label class="youzi"><input type="checkbox" checked=""/>DNF</label><br /> <button class="youzi" type="reset">重置</button> <button type="submit">提交</button> </form> </body> </html>
