CSS基础 08-14
2018-08-14 本文已影响0人
Yehao_
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/hw.css">
<title>HTML CSS</title>
</head>
<body>
<div class="content">
<h2>目录</h2>
<ul>
<li><a href="#content1">表单标签</a></li>
<li><a href="#content2">input标签</a></li>
<li><a href="#content3">下拉菜单和文本域</a></li>
<li><a href="#content4">空白标签</a></li>
<li><a href="#content5">认识CSS</a></li>
<li><a href="#content6">CSS选择器</a></li>
<li><a href="#content7">伪类选择器</a></li>
</ul>
</div>
<div class="tag_form">
<h4 id="content1">表单标签(form)</h4>
<div class="content">
可以提交表单中收集的信息
<ol>
<li>action属性：设置提交信息的位置</li>
<li>method属性：提交方式(post、get)</li>
</ol>
</div>
<h4 id="content2">input标签(单标签)</h4>
<ol>
<li>是表单标签</li>
<li>type属性：
<ul>
<li>text:文本输入框</li>
<li>password:密码输入框</li>
<li>radio:单选按钮
<ul>
<li>name: 同一类型对应的name值必须一样</li>
<li>value：设置选中按钮提交的值</li>
<li>checked: 设置为checked，让按钮默认处于选中状态</li>
</ul>
</li>
<li>checkbox:多选按钮
<ul>
<li>name: 同一类型对应的name值必须一样</li>
<li>value：设置选中按钮提交的值</li>
<li>checked: 设置为checked，让按钮默认处于选中状态</li>
</ul>
</li>
<li>button:普通按钮</li>
<li>reset:重置按钮
<ul><li>disabled属性：disabled(让按钮不能点击)</li></ul>
</li>
<li>submit:提交按钮
<ul><li>让当前所在的form中的所有表单相关标签对应的值，回到最初的状态</li></ul>
</li>
<li>file:文件选择器</li>
</ul>
</li>
<li>name属性：必须设置（用于提交信息）</li>
<li>value属性：标签内容</li>
<li>placeholder属性：占位符（提示信息）</li>
<li>maxlength属性：输入框最多能输入的字符个数</li>
<li>readonly属性：readonly - 输入框只读(不能往里面输入内容)</li>
</ol>
<h5>演示</h5>
<fieldset>
<form action="" method="post">
<input type="text" placeholder="文本框"><br>
<input type="password" placeholder="密码框"><br>
性别：(单选框)
<input type="radio" name="sex" value="Female" checked="checked">男
<input type="radio" name="sex" value="Male">女<br>
爱好：(复选框)
<input type="checkbox" name="interest">吃饭
<input type="checkbox" name="interest">睡觉
<input type="checkbox" name="interest">打游戏
<input type="checkbox" name="interest">敲代码
<input type="checkbox" name="interest">刷知乎
<input type="checkbox" name="interest">看片<br>
<input type="submit" value="提交">
<input type="reset" value="重置"><br>
<input type="file">
</form>
</fieldset>
<h4 id="content3">下拉菜单和文本域</h4>
<!--fieldset：
一个fieldset标签对应一个表单分组
legend标签：设置分组名
-->
<fieldset>
<legend>账号信息</legend>
<input type="text" name="username" value="" placeholder="用户名" />
<input type="password" name="username" value="" placeholder="密码" />
<input type="reset" name="" value="重置1" />
</fieldset>
<fieldset>
<legend>反馈信息</legend>
<!--1.下拉菜单-->
<select name="city">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="北京">北京</option>
<option value="大连">大连</option>
<!--selected:设置默认选中-->
<option value="青岛" selected="selected">青岛</option>
</select><br><br>
<!--2.多行文本域(多行文本输入框)
-->
<textarea name="message" rows="8" cols="100" placeholder="请输入意见..." maxlength="200">上次没有发送信息</textarea><br>
<input type="reset" name="" id="" value="重置2" />
</fieldset>
<h4 id="content4">空白标签</h4>
<p>
html中标签分为两大类：<br>
1.块级标签：一行只能有一个(不管标签的宽度是多少)<br>
h1-h6, p, hr, 列表标签，table, form, div<br>
2.行内标签：一行可以有多个<br>
a, img, input,下拉列表(select), textarea span<br>
div标签，是空白标签，没有任何特殊的意义(无语义标签)
</p>
<h4 id="content5">认识CSS</h4>
1.什么是CSS<br>
CSS是web标准中的表现标准，用设置网页上的标签的样式（长什么样，在哪儿）<br>
CSS代码/CSS文件，我们叫样式表<br>
目前我们使用的是CSS3。<br><br>
2.写在哪儿<br>
内联样式表：将css代码写在标签的style属性中<br>
内部样式表：写在head标签中的style标签的内容中<br>
外部样式表：写在一个css文件中，通过head中的link标签来关联<br>
优先级: 内联的优先级最高；内部和外部没有绝对优先，主要看同一个属性谁最后赋值，谁就有效<br><br>
3.怎么写(CSS语法)<br>
选择器{属性:属性值; 属性：属性值;}<br>
选择器： 用来选中需要设置样式的标签<br>
属性：css属性（css2中的属性有两百多个）<br>
属性值：如果属性值是数字，表示的是大小要在后面加px<br>
注意：每个属性之间要使用分号隔开，否则属性无效<br><br>
补充属性: color: 设置字体颜色 background-color:设置背景颜色 width：标签的宽度 height：标签的高度
<h4 id="content6">CSS选择器</h4>
0. 元素选择器(标签选择器)：标签名<br><br>
选中所有的标签名对应的标签<br>
1.id选择器：#id属性值<br><br>
每个标签都有一个id属性，整个html中，id的值必须唯一<br>
2.class选择器：.class属性值<br><br>
每个标签都有一个class属性，<br>
3.通配符：*<br><br>
选中所有的标签<br>
4.层级选择器：选择器1 选择器2...<br><br>
5.群组选择器：选择器1，选择器，....<br><br>
补充:<br>
css中的颜色值：<br>
1.颜色英语单词<br>
2.16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)<br>
3.rgb值：rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1<br>
<h4 id="content7">伪类选择器</h4>
link: 超链接的初始状态; -- 一次都没有访问成功的时候的状态<br>
visited: 超链接访问后的状态 --- 已经访问成功后的状态<br>
hover: 鼠标悬停在标签上对应的状态<br>
active：鼠标按住的状态<br><br>
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则(先要爱才能恨)<br>
LoVe HAte
</div>
</body>
</html>
