HTML+CSS笔记

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笔记

赞 (0)