选择器
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] 属性选择器
.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>