HTML CSS基础

选择器

p  标签选择器
h1,h2,h3   同时选择3个标签
ul li  派生选择器，选择ul下的li
a:hover  伪类选择器，当某种情况发生时，才会起作用。a:hover作用是：当鼠标停留在超链接上，触发css
a:link  伪类选择器，未访问的链接，和a标签选择器相同，会覆盖a
a:active  伪类选择器，被选定的超链接
a:visited  伪类选择器，已访问的超链接
ul li:first-child  伪类选择器，只选择第一个标签
.suggest input[type=text]   属性选择器
#suggest   id选择器

.nav  类选择器，选择nav类

标签

<p>  段落
<ul><li></li></ul>  无序列表
<ol><li></li></ol>  有序列表
<a href="http://www.baidu.com" target="_blank">免责声明</a>   _blank是在新页面中打开，_self在本页打开
<a href="../legal.com" target="_blank">免责声明</a>    写了相对路径，会参考当前页面上一页地址发送请

属性

font-size  字体大小
color  字体颜色
text-decoration  下划线

颜色

color:red
color:#FF0000  红绿蓝占比
color:(255,0,0)

块标签

块标签占据页面的整个宽度
块标签包括：h1-h6,p,ul,ol,li

如果一个标签不是块标签，那它就是内联标签，内联标签会从左到右显示

display:block  转换为块标签
display:inline 转换为内联标签

盒模型

content
padding
border
margin

h1 {
  padding-top:6px;
  padding-right:9px;
  padding-bottom:0;
  paddingleft:0;
}

h1 {
  padding:6px 9px 0 0;
}

h1 {
  border-width:6px;
  border-style:solid;
  border-color:#FF0000;
}

h1 {
  border:6px solid #FF0000;
}

h1 {
  border-bottom:6px solid #FF0000;
}

空标签

<link type="text/css" rel="relationship" href="main.css" >   空标签没有结束标签，type告诉浏览器要加载一个css文件,rel告诉浏览器关联进来的文件是用来修饰页面样式的

内容图片

<div class="logo">
    <img src="images/egg.jpg" alt="图片简单描述" /> 
</div>

.logo{
    text-align:center;    居中
}
.logo img{                chrome浏览器要定义图片大小才能显示图片描述
    width:184px;
    height:140px;
}

img是空标签，没有结束结束标签

布局图片

背景属性
background-color
background-image
background-repeat   背景是否平铺
background-position   背景位置

.header{
    padding:10px;
    background:#b56663 url(images/egg.jpg) top left repeat;
}

用户交互图片

<div class="login-bar">
    <a class="qq-login" href="#">QQ登录</a>
    <a class="wb-login" href="#">微博登录</a>
</div>

.login-bar{
    text-align:right;    显示在屏幕右侧
    margin:10px 30px 0 0;
}
.login-bar a{
    color:#ffffff;
    text-decoration:none;    不显示下划线
    background:url(images/login.png) 0 0 no-repeat;   小图标的话一般用png或gif格式
    padding-left:28px;    图标的大小是28px，不添加的话，图标会和文字重合 
    height:28px;          不加的话，图片的高度会显示不够
    line-height:28px;     行高，设置之后可以让文字和图片看起来是居中的
    display:inline-block;        a标签是内联标签，height属性不起作用，要变成块标签。此处是内联块标签
}

.login-bar a.qq-login{
    background-position:0 0;
}

.login-bar a.wb-login{
    background-position:0 -28px;
}

.login-bar a:hover{
    text-decoration:underline    鼠标移动上去的时候显示下划线
}

字体

font-style:italic   斜体，字体风格
font-weight:bold    字体粗细
font-size:20px      字体大小
line-height:70px    一段文字行高
font-family:微软雅黑  字体样式

如果子标签没有定义字体样式，就会继承父标签的字体样式

表单

对于input标签，打包表单数据要有name属性
对于radio标签，打包表单数据要有value属性
<form action="login.php" method="post">       #action指定表单发送到那里  method指定发送方式
    <lable for="recipe-name">食谱名称</lable>
    <input type="text" id="recipe-name">      #lable标签的for属性和input标签的id属性会关联起来
    <input type="submit" value="保存食谱">
    <textarea id="aaa"></textarea>                       #文本区域标签
    <select>                 #下拉列表
        <option>原创</option>       
        <option>转载</option>
    </select>
</form>

type属性决定input标签的样式：
text：文本框
checkbox：复选框
radio：单选框
file：文件上传按钮
password：密码
submit：提交按钮
reset：重置按钮
button：普通按钮，和JS一起工作

        <form action="success.html" method="post">
            <label for="recipe-name">食谱名称</label>
            <input type="text" id="recipe-name" name="recipe-name"><br>
            <label for="photos">上传成品图</label>
            <input type="file" id="photos"><br>
            <label>美食类型</label>
            <input type="radio" name="type" id="type-a" checked value="1"><label for="type-a">原创</label>
            <input type="radio" name="type" id="type-b" value="2"><label for="type-b">转载</label><br>
            <label>人数</label>
            <select>
                <option>1人</option>
                <option selected>2人</option>
                <option>3人</option>
                <option>多人</option>
            </select><br>
            <label for="ingredients">材料</label>
            <textarea id="ingredients"></textarea><br>
            <label for="directions">制作过程</label>
            <textarea id="directions"></textarea><br>
            <input type="checkbox" id="newsletter" checked>
            <label for="newsletter">订阅新闻邮件？</label><br>
            <input type="submit" value="发布">
            <input type="reset" value="重新填写">
        </form>

HTML表格

<table>
    <tr>
        <td></td>
    </tr>
</table>

盒模型–浮动

float:left
overflow: hidden;   将溢出的文本隐藏

定位

position:static/relative/absolute/fixed

relative:先正常显示，然后再根据正常的位置偏移
absolute：相对浏览器的位置定位，如果父标签是relative，则相对父标签定位
fixed：将某个区域固定在窗体上，使用z-index属性标明哪个元素在上面


.login-bar{
    position: fixed;
    right: 30px;
    top: 10px;
    background-color: rgba(138, 32, 10, 0.75);
    padding: 10px;
    z-index: 99;
}

内联框架

ifram--在一个网页中嵌入另一个网页

百度搜索“天气预报代码”可得到下面代码
<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=5"></iframe>