课程： 初识HTML(5)+CSS(3)-升级版
章节：6-8 到8-3
讲师： 五月的夏天
课程内容：表单部分选项，label 标签，css 的三种样式以及无权重情况下的优先级
学习收货：
<p>使用label为input标签穿上衣服,label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。 </p> <!-- <label for="控件id名称"> --> <h4>使用label为input标签穿上衣服 </h4> <!-- 语法： <label for="控件id名称"> 注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。 --> <p>它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。 </p> <hr> <h4>填填性别和兴趣爱好 - 单选框、复选框，让用户选择 </h4> <!-- 语法： <input type="radio/checkbox" value="值" name="名称" checked="checked"/> --> <p> 1、type: 当 type="radio" 时，控件为单选框 当 type="checkbox" 时，控件为复选框 2、value：提交数据到服务器的值（后台程序PHP使用） 3、name：为控件命名，以备后台程序 ASP、PHP 使用 4、checked：当设置 checked="checked" 时，该选项被默认选中 </p> <form action="save.php" method="post"> <label>sex:</label> <label>man</label> <input type="radio" value="1" name="gender-man"/> <label>woman</label> <input type="radio" value="2" name="gender-woman" /> </form> <h4>使用select、option标签创建下拉菜单 </h4> <p>1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。 2、select标签里面只能放option标签，表示下拉列表的选项。 3、option标签放选项内容，不放置其他标签。 4、value： <img src = "1.jpg" alt = "My Image" title = "My Image" /> 5、selected="selected"： 设置selected="selected"属性，则该选项就被默认选中。 </p> <form> <select> <option value="11">还好</option> <option value="22">不好</option> <option value="1122">非常棒</option> </select> </form> <h4>填完就可以提交咯 - 提交按钮 </h4> <!-- 语法： <input type="submit" value="提交"> --> <h4>重置按钮，重置表单信息</h4> <!-- 语法： <input type="reset" value="重置"> type：只有当type值设置为reset时，按钮才有重置作用 value：按钮上显示的文字 -->
<!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>
p{
color: red;
border: 1px solid red;
font-size: 12px;
/*设置文字字号*/
font-weight: bold;
/*设置字体加粗*/
}
.a1{
color:chocolate;
text-align: center;
}
span{
color: blue;
}
</style>
<link href="css\csslearn.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>
css
</h1>
<p >CSS的某些样式是具有继承性的，那么什么是继承呢？
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，
而且应用于其后代。比如下面代码：如某种颜色应用于p标签，
这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，
<span>这里子元素为span标签。</span></p>
<h2 style="color:aqua;text-align: center;" >内联式css样式</h2>
<!-- <p style="color:red">这里文字是红色。</p> -->
<h3> 嵌入式css样式</h3>
<p>嵌入式css样式，就是可以把css样式代码写在<span>style</span> 标签之间并且一般情况下嵌入式css样式写在<span>head</span> 之间</p>
<h4>外部式css样式</h4>
<p>css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在head内（不是在style标签内）使用 link标签将css样式文件链接到HTML文件内
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、link标签位置一般写在head标签之内。
</p>
<p style="text-align:center">三种链接方式的优先级:内联式 > 嵌入式 > 外部式;嵌入式><br>
外部式有一个前提：嵌入式css样式的位置一定在外部式的后面,其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下/p>
<h1><span class="a1">类选择器</span></h1>
<!-- 语法：
.类选器名称{css样式代码;} -->
<p>类选择器在css样式编码中是最常用到的,1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，
<!-- <span>胆小如鼠</span> -->
第二步：使用class="类选择器名称"为标签设置一个类
<!--
<span class="stress">胆小如鼠</span> -->
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/</p>
</body>
</html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦