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²  上标

x₂ 下标

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