javaweb实训第一天上午——HTML和CSS（2)
https://developer.aliyun.com/article/1414806?spm=a2c6h.13148508.setting.25.4d4d4f0erzCTC6
类选择器
所有的标签都有一个class属性
我们为这个class设定一个值，然后再写选择器来匹配这一个值、
/* 要求：第一个，第三个，第五个变成红色 如果要对应 class的属性，需要在前面加上一个 . */ .ren{ color: red; font-size: 20px; }
例
<span class="ren">我才是最最特殊的,哈哈哈...</span>
ID选择器
所有的标签都有一个id属性
我们为这个id设定一个值，然后再写选择器来匹配这一个值
例：
/* 如果要对应id的属性，需要在前面加上一个 # */ #mydiv{ color: gray; }
<div id="mydiv">我才绿色的</div>
Id使用的 # ，class 使用的是 .
规则上来说:一个html页面的id最必需唯一的
5.3.4 其他的一些选择器
E,F
多元素选择器 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 p,h1,h2{margin:0px;}
测试代码:
style> h1,p{ background-color:yellow; } </style> html代码: <h1>欢迎来到我到的主页</h1> <div class="intro"> <p>我是老王</p> <p>我住在你隔壁</p> </div> <p>欢迎你随时过来</p>
E F:
后代元素选择器 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 #slidebar p{font-color:#990000;}
先说一下什么是后代？
1.设计div中的p标签字体颜色
2.设定ul中的所有span标签字体变大
3.设置一个class为myfocus的元素(div)内的字体加粗，并加上下划线
注意：如果多层，只作用到最后一层
多元素选择器可以和后代选择器同时使用
后代选择器不要嵌太多层p
测试代码：
<style> div p{ background-color:yellow; } </style> </head> <body> <h1>欢迎来到我到的主页</h1> <div class="intro"> <p>我是老王。</p> <p>我住在您隔壁。</p> </div> <p>欢迎随时过来。</p>
E > F 选择父元素为 元素的所有 元素。
子元素选择器 子元素选择器，匹配所有E元素的子元素F div > p{color:#990000;}
比后代选择器更加精确
注意：多元素选择器，子元素选择器可以和后代选择器同时使用
测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div>p{ background-color:yellow; } </style> </head> <body> <h1>欢迎来到我到的主页</h1> <div> <p>我是老王。</p> <p>我住在您隔壁。</p> </div> <p>欢迎你随时过来。</p> <div> <span><p>我不会过来的。</p></span> </div> </body> </html>
这E + F
相邻元素选择器 相邻元素选择器，匹配所有紧随E元素之后的同级元素F div + div{ color:#990000; }
测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div>p { background-color: yellow; } </style> <html> <head> <style> div+p { background-color: yellow; } </style> </head> <body> <h1>欢迎来到我到的主页</h1> <div> <p>我是老王。</p> <p>我住在您隔壁。</p> </div> <p>我最好的朋友是米老鼠。</p> <p>我不会过来的。</p> </body> </html>
E[attr] 匹配所有具有att属性的E元素，不考虑它的值 h1[align]{……}
input[type][size]{……}
比如:
<style> a[target]{ background-color:yellow; } </style> <a href="http://www.baidu.com" target="_blank">baidu.com</a>
E[attr = val] 匹配所有attr属性值等于val的E元素 h1[align=center]{……}
属性值一般不加引号
对于 a 标记，其对应4种不同的状态：未访问链接(link)、、鼠标放上状态(hover)、已访问链接(visited)、当前活动链接(active)。CSS允许对于元素的不同状态，定义不同的格式化信息。
写个a标签看一下，大家看一下有什么效果
到网上看一下百度，淘宝，京东，别人是什么效果
a:link 未访问的链接 a:hover 鼠标移动到链接上 a:active 选定的链接 a:visited 已访问的链接 a.red:link class等于red的a元素 a.red:visited class等于red的a元素 a.red:active class等于red的a元素 a.red:hover class等于red的a元素
/*将所有的a标签的状态都修改成下面这样*/ a{ color:black; text-decoration: none; /*不显示下划线*/ } /*当鼠标移上来的状态我们进行单独的修改*/ a:hover{ color:red; text-decoration: underline; font-size:30px; }
5.4 引用、继承与优先级
5.4.1 引用CSS
引用CSS有三种方式：
第一种：使用style属性
<div style=“color:red;”></div>
能不用尽量不要使用(我们要把样式和结构相分离)
第二种：使用style标签
<style type="text/css"> div{ color:red; } </style>
这个样式只能作用到当前页面
大家想一下:我们开发软件(网站),对所有的网页都一个统一的格式标准.那么这些格式标准我们是否需要每一个页面都写一次呢???
我们使用什么办法来解决这个问题?? 使用外连式!!!
第三种：使用link标签进行外连
步骤：
1 新建一个CSS文件
2 在CSS文件里直接写样式表
3 使用link标签将它们链接起来、
<link rel="stylesheet" href="hello.css" />
5.4.2 CSS的继承特性（了解）
CSS继承性
HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。
HTML中，是其他元素的容器，是其他元素的最外层元素，所以元素中定义的样式将影响其他所有元素的显示格式。
具有继承的CSS属性
文本相关的属性是继承的
text-align、color、text-indent、font-family、font-size
font-style、font-weight、 letter-spacing、word-spacing
text-transform、line-height等
列表相关的属性是继承的(ul,ol,li)
list-style、 list-style-image、list-style-position、list-style-type
测试代码:
<div style="color: red; border: 1px solid red ">我想要变成红色的文字</div>
5.4.3 CSS的优先级
样式是有优先级的
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器
在选择器优先级(先看优先级)相同的情况下，我们参照就近原则
5.5 CSS属性
块元素和行内元素
块：独占一行，可以设置宽高
行内：不可以设置宽高
5.5.1为table设置边框样式
例子：
table{ border-collapse: collapse; /* 合并单元格的边线 */ } /* 如果我们要为 table设置边框的话 请用 table td */ table td{ border: 1px solid red; }
其他样式可以从CSS文档中查阅
6课后练习
1 .第一题: 完成下面表格练习
2 .第二题：表格+图片 ★
3.第三题: 完成课程表
4.第四题: 图片墙
5 .第五题: 链接与列表
第六题: 列表,字体等
7.第七题 表单(选做)
