HTML+CSS笔记
首先:首先新建一个文件夹,取好名字,在里面新建两个文件夹,img:用于放置图片,img里面的图片名字命名为icon。
css:用于放置css文件,将新建的css文档命名为layout.css 建一个HTML5文档,命名为index.html
div是块级元素,会换行
span是行内元素,不会换行
display:block 将元素显示为块级元素 display:inline 默认,元素会被显示为行内元素
display:inline-block 可以使竖排的文字排成横排
定位:0(上) 0(右) 0(下) 0(左) 顺时针
opacity:.5 改变透明度
字距调整:letter-spacing:20px;
list-style:none 可以取消项目符号 就是前面的点,圆之类的
border-radius:50% 可以使按钮变成圆形
cursor:pointer 可以使鼠标呈现超链接状态 也就是鼠标过去会是一个小手的形状
<div style=”cursor:pointer;” onClick=”#”/> 背景图片做超链接
min-width 属性设置元素的最小宽度。
常用:clear:both
clear语法:
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
overflow语法:
visible:默认值。内容不会被修剪,会呈现在元素框之外。
hidden:内容会被修剪,并且其余内容是不可见的。
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。
常用:overflow:hidden
head里面可以下body的属性 可以将一张大图写在body里面做背景(center 0)可以使图片从中间开始加载 也可以设置字体 大小
vertical-align: middle 使一个元素垂直居中
常用标签:
<b>:加粗
<br/>:换行
<i>:倾斜
<u>:下划线
<s>:删除线
x<sup>2</sup> 上标
x<sub>2</sub> 下标
<font color=”red” size=”1-7″/> size只有整数,最小为1,最大为7
#666666:深灰
#999999:中灰
##cccccc:浅灰
#00ff00:绿色
#ffff00:黄色
#0000ff:蓝色
#ff0000:红色
#ffffff:白色
#000000:黑色
bgcolor:背景颜色
bgsound:背景音乐
background:背景图片
空格: 大于号(>):>
小于号(<):lt
引号(”):”
版权符号@:?
锚链接:
<a name=”marker”>目标位置乙</a>
<a href=”#marker”>目标位置甲
不同页面锚链接:
<a name=”marker”>目标位置乙</a>
<a href=”乙页面的地址#marker”>目标位置甲
用乙做标记,使点击甲的时候调转到乙,marker是目标位置的英文说法,marker名称要一致
<bgsound src=”abc.mp3″/>
bgsound是背景音乐标签
src用于引入音频文件
<embed src=”xyz.mp4″ height=”#” width”#”/>
embed是视频标签
src用于引入视频文件
height用于设置视频的高度
width用于设置视频的宽度
超链接:<a href=”链接地址“target=“目标窗口位置”>链接文本或图像</a>
示例:
<a href=”链接地址“target=“_blank”> <img src=”“图片位置”alt=“名称”title=”注释”</a>
意思是点击链接文本或图像会跳转带链接地址,blank新建一个窗口的意思,alt是指链接文本或图像的名称,替换文本 title是指悬停的文字
图像标签的基本语法:
<img src=”图片地址”alt=“图像的替代文字”title=“鼠标悬停提示文字”width=“图片宽度” height=“图片高度”
img和a标签之间不加任何内容,可以使img和a标签之间的内容水平在一条线上。
功能性链接:<a href=“mailto:邮箱地址”>联系我们<a> 点击联系我们会调转到邮箱地址,
点开始的样式要用class调用 #号开始的样式要用ID调用
.head{width:100%; height:60px; background-color:#0ff; text-align:right; padding:o 20px; box-sizing:border-box;}
这是一个带有背景的文字效果图,文字在右边,想要实现文字保持右边,像左边移动20px,但是画面被撑大了,出现了滚动条
box-sizing:border-box 可以使背景不动,只移动文字 没有滚动条
并集选择器:
相同的样式可以写在一个css样式里,用class代入,不同样式的名称之间用逗号隔开,不同的样式再单独写
格式: a,h1,p,span{}
相同的标签用同一种样式
另一种方法:
相同的样式可以写在一个css样式里,可以取一个css样式名称,不同的样式再单独写,
用class代入,一个class的值可以代入无数个css样式名称,样式名称之间用空格号分开 格式:.user_t{}
子选择器:
在一个组里面只想改变某一个值时记作:table.company td > p 此标签只作用于被应用的这个标签的样式
交集选择器:
a.aook{} 前面必须是标签,后面必须是类选择器或ID选择器 中间不用空格 意思是aook里面的a标签的样式
后代选择器:
最外面的标签嵌套最里面的标签,不用class代入,中间用空格隔开,样式的最终呈现效果会在最里面的标签里 格式:.nav li a{}
按钮:
要使按钮内文字水平居中,按钮的高度要和文字的高度一致,height=50px line-height=50px
<input type=”button” class=”ak book” name=”button” value=”立即注册”/>
border-radius:50% 可以使按钮变成圆形
cursor:pointer 可以使鼠标呈现超链接状态 也就是鼠标过去会是一个小手的形状
背景颜色:background-color:
背景图像: 一,图像路径:background-image:url(img/buy.png)可以使框内出现小图标
二,重复方式:background-repeat:no-repeat;不重复,
三,背景定位:background-position:10px 50% 可以设置框内小图标位置,也可使用上中下左右设置
简写方式:background:url(img/buy.png) no-repeat #cccccc 10px 50%;
font-fanily:“微软雅黑” 设置字体类型
font-size:12px;设置字体大小
font-style:12px;设置字体大小 font-weight:bold(粗);设置字体粗细
text-align:right 设置元素水平对齐方式 text-indent 设置首行文本的缩进,可移动左右距离 line-height 设置文本的行高
text-decoration underline 设置文本的装饰,下划线 underline加下划线 none不要下划线
css:新建一个css,保存至于HTML同一个文件夹里,复制HTML head style里面所有的样式到新建的css里面保存,回到HTML里面,注释刚刚复制的所有样式则所有样式都消失,在 HTML head style上面新建一个样式,则之前所有样式重现
<link href=”Untitled-1.css” rel=”stylesheet” type=”text/css”/>
Untitled-1.css就是新建的css stylesheet——样式表
<link rel=”icon” href=”#”/> 用于设置标题前面的小图标
div做背景颜色:
在head里面 <style type=”text/css”> div{background: #0F2B96;width: 1000px;height: 200px;} </style>
body <div>文字</div> body
一个div的开始结束是一个矩形色块,若想做到多个字体不同大小颜色,在一个div里输入,用br换行,用style设置文字
无序列表应用:
<ul type=“disc(实体圆心) spuare(实体方心) circle(空心圆)”> <li>名称</li> </ul>
有序列表应用:
<ol type=”1(数字排列)A/a(英文大小写排列)I/i(罗马大小写排列) <li>名称</li> </ol>
list-style:none 可以取消项目符号 就是前面的点,圆之类的
定义列表应用:
<dl> <dt>名称</dl> <dd>名称</dd> </dl> 标题与注释的结合 层级递减
表格:<table border=“n”> <tr> <td>任意内容</td> </tr> </table>
border——设置边框的宽度
tr的开始结束 决定了有多少行 每一个tr是一列 border:#ccc 1px solid; 1px solid——实线 边框为1
bordercolor:表格边框颜色
cellspacing:
外边距 单元格与单元格之间的距离叫做外边距
cellpadding:
内边距 单元格与单元格之间的内容之间的距离叫做内边距
rowspan:改变行的距离
colspan:改变列的距离
DW里面的插入列表中,表格,可调整设置表格,将实施审图改成设计,选中两个以上右键可合并和拆分单元格,可拖动表格位置
valign=”top” 可以使表格内的内容上对齐 valign=”bottom” 可以使表格内的内容下对齐 valign=”middle” 可以使表格内的内容居中对齐
样式:
<head>
<meta charset=”utf-8″><title>无标题文档</title>
<style type=”text/css”>
h3{color: #187B10; font-size: 30px; font-weight: (normal细)(bild粗); text-align: center;}
p{font-size: 18px; text-align: center;}
</style>
</head>
<h3>今天</h3>
<p>今天</p>
<p>今天</p>
这是一个类选择的形式,注意要写在head里面,设置了h3和p的颜色,大小,粗细,排列方式
系统会默认所有的p值 若要形成不同样式的p,格式——在head里面 .标题_name{样式} 在body里面<p class=”标题_name”>内容</p>
若要再形成不一样的文字样式,则再设定一个格式——方法同上,可以自己定义花括号前的名字,只要上下是一致的就行
去掉下划线:text-decoration underline(加下划线)none(空,不要下划线)
伪类选择器:
a:link 鼠标未访问时颜色
a:visited 鼠标单击访问后的颜色
a:hover{ color text-decoration } 作用于鼠标悬停在某个内容时颜色会变换 根据需求可以加下划线
a:active 鼠标单击未释放时的颜色
文字本来有的颜色 鼠标单击后会默认为鼠标单击后的颜色
表格对齐方式:
align(水平对齐方式)
eft(左对齐)
center(居中对齐)
right(右对齐)
valign(垂直对齐方式)
top(顶端对齐)
middle(居中对齐)
bottom(底端对齐)
baseline(基线对齐)
表单:
<form(表单) method(方法)=”post(传送)” action{提交的地 址}=”https://hao.360.cn/?h_lnk”>
<p>名字:<input(输入) name=”name” type(类型)=”text”></p>
<p>密码:<input(输入) name=”pass” type(类型)=”password(隐藏输入的数值)”></p>
<p><input type=”submit(提交)” name=”button(按钮)” value=”可选属性”>
<input type=”reset(重置)” name=”reset” value=”重填”></p>
</form>
这是一个输入的登录信息框,密码的输入框显示是隐藏的,重填可以清除已输入的信息,提交会跳转到所输入的网址
可输入size规定文本框的长度,maxlebfth可输入规定的数字长度,value与placeholder的效果一样,可以使文本框内显示文字
value显示的效果颜色深一点,placeholder显示的效果颜色浅一点,readonly与disabled的效果一样,可以显示只读效果,框内文字不可编辑
readonly显示的效果与正常框一样,disabled显示的效果好一点,
<select name=”select”> <option>请选择</option> 下拉框 option是设置里面的内容
<input type=”checkbox” name=”checkbox2″ />IT设备 复选框
<input type=”button” class=”ak book” name=”button” value=”立即注册”/>
<input type=”file” name=”file”/> 选择文件
<textarea name=”textarea” cols=”60″ rows=”5″>不少于100字</textarea> 设置自我评价
cols是列数 rows是行数
border 边框
margin:改变边框外边距
padding:改变边框内边距 可使用上中下左右设置
margin:0 auto 居中,前提是一定要有一个宽的值
border-width 规定边框的宽度。参阅:border-width 中可能的值。
border-style 规定边框的样式。参阅:border-style 中可能的值。
border-color 规定边框的颜色。参阅:border-color 中可能的值。
inherit 规定应该从父元素继承 border 属性的设置。
单选按钮:<form method=”post” action=”https://hao.360.cn/?h_lnk”>
性别:<label><input name=”gen” type=”radio” value=”男”>男 <input name=”gen” type=”radio” value=”女”
checked=”checked”>女</form></label>
这是一个选择性别的单选框,在哪个选项加入checked就是默认哪个选项,通过相同的name属性的值将多个单选框分为一组,同一组里面只能选一个
label标签的作用是,使点击后面文字时前面的也会被选择。
overflow:hidden 隐藏溢出 到高和宽超出时,能使高宽不发生改变 并隐藏
position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
static 默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
relative 位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 “left:20” 会将元素移至元素正常位置左边 20 个像素的位置。
absolute 位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
fixed 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。
不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。
inherit 规定应该从父元素继承 position 属性的值。
固定定位:position:fixed;opacity:.5;top:0;left:0; 固定定位后要给方向的值
相对定位:position: relative;top: 50px;left: 50px; 固定定位一般与相对定位一起使用,设置相对定位的盒子会相对他原来的位置进行偏移,到达新的位置,其原来位置也会以空白位置占据。
z-index属性:只对有定位的有效果,可调整定位时重叠层的上下位置,默认的z-index值为0,z-index值越大,所在位置越在顶层。
.mod1{background-color: #0fc; position: relative;z-index: 1;}
.mod2{background-color: #fc0; position: relative; bottom: 50px;left: 20px; z-index: 1;}
.mod3{background-color: #f09; position: relative;bottom: 100px;left: 30px; z-index: 1;}
绝对定位:position: absolute 会以最近的一个已经定位的元素为基准进行偏移,没有定位的元素,会根据浏览器为基准进行定位。
偏移后的位置不会有空白占据,后面的元素会紧随其后,后面可以给值,不需要移动时也要给值 top:0;left:0;
<div/>
<div/>第二块</div>
</div>
background-position:10px 6px; 属性设置背景图像的起始位置。
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
HTML做渐变背景:截取一小部分的渐变颜色,保存为图片,css样式中给background:url(#) repeat-x 0 0;
repeat-x 0 0的意思是延x轴平铺 repeat-y 0 0的意思是延y轴平铺
clear : 属性规定元素的哪一侧不允许其他浮动元素。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
<div style=”cursor:pointer;” onClick=”#”/> 背景图片做超链接的格式!
HTML+CSS 命名规范
页头:top
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
页脚:footer
版权:copyright
外套:wrap
主导航:mainnav
子导航:subnav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
主导航:mainbav(globalnav)
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
旗志:logo
标语:banner
菜单内容1:menu1content
菜单容量:menucontainer
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadcrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:Login
功能区:shop(如购物车,收银台)
当前的:current
未经允许不得转载:安超峰的网站 » HTML+CSS笔记
一如既往的表示支持!