html css 笔记

cursor其他取值 鼠标移入

auto          :标准光标

default        :标准箭头

pointer        :手形光标

wait          :等待光标

text          :I形光标

vertical-text   :水平I形光标

no-drop        :不可拖动光标

not-allowed     :无效光标

help          :帮助光标

all-scroll      :三角方向标

move          :移动标

crosshair       :十字标

Html5中标签(包括新增常用):

<div>  块

<span>  区分掩饰

<a rel="nofollow" href="#">  超链接

<header>  页面头部(板块)

<footer>  页面底部(板块)

<section>  页面中的板块→代替<div>

<nav>  导航

<article>  页面中独立完整的一块内容,可以是一个文章、帖子、博客及回复的内容块:

<aside>   用法一:用来写在<article>中,作为其附属信息

用法二:用来写在页面主体当中,作为整个页面的附属信息

<details>

<summary>今天天气不错</summary>

</details>

类似于隐藏框 当<details open>是<summary>内容显示出来

<dialog>  一个对话框一般隐藏,显示加open

<h1>~<h6>  标题标签

<p>  段落

<mark>  强调标签——加背景色

<strong>  强调标签——字体加粗

<em>  强调标签——字体倾斜

<time>  强调标签——时间

<ul>  无序列表

<ol>  有序列表

<dl>  分为dt dd,dd为dt进行列表的再次分类

<img src=""/>  图片

<form>  表单

<input>  一些框

<textarea>  输入一段文本框

<select>  下拉框 选择为<option>

<table>  表格

<thead>  表格头部

<tbody>  表格内容

块标签(block):

1.独占一行

2.支持所有的样式

3.不设置宽度,撑满父级的空间

内嵌标签(行内/内联)(inline)

1.在一行显示

2.不支持宽高,对上下的margin和padding支持的也有问题

3.代码换行会被解析成一个空格

4.内嵌的宽度,有内容撑开

块:

div,header,footer,nav,article,aside,section,p,h1-h6,ul,ol,li,dl,dt,dd

内嵌:

span,a,strong,em,time,mark

background 背景(集合样式)

background-color 背景颜色

background-image 背景图片(添加路径 url())

同一个元素可以拥有多个背景,用逗号分开,先写的背景在上面

background-repeat  背景图片平铺方式

no-repeat     (不平铺)

repeat        (平铺)

repeat-x      (水平平铺)

repeat-y      (纵向平铺)

background-postion 背景定位

关键字

x:left  center  right

y:top  center  bottom

数值

x:10px/20%   (像素大小/百分比)

y:10px/20%

background-attachment:fixed     固定图片不动

background-origin     背景图位置

border-box

padding-box     (默认)

content-box

background-clip 背景裁切

-webkit-text       (文字背景,只限谷歌)

border-box         (默认)

padding-box

content-box

background-size 背景图大小(!!!手机端不建议使用)

等比放大:contain(包含)

cover (覆盖)

线性渐变

background-image:linear-gradient(red,blue) (有红色变蓝色 从上到下)

渐变定位(从什么地方开始到什么地方结束)

在(red,blue)中加入位置

如:(red 50px,blue 100px)也可加入百分比

渐变方向 deg

在开是位置加入角度值 (角度默认180deg)

如:background-image:linear-gradient(120deg,red,blue)

斑马线(就是平铺渐变)

background-image:repeating-linear-gradient()

兼容IE6(方向)

filter:progid:DXTmageTransform.Microsoft.gradient

(starColorstr=‘red‘,endColorstr=‘blue‘,GradientType=‘1‘);或者2

径向渐变

background-image:radial-gradient(起点 形状 大小 点)

起点:可以是关键字(left,top,right,bottom)、具体数值或百分比

形状:ellipse、aircle

大小:具体数值或百分比,也可以是关键字

最近端(closest-side)

最近角(closest-corner)

最远端(farthest-side)

最远角(farthest-side)

包含 contain

覆盖 cover

!!!火狐只支持关键字。

font 文字(集合样式)

color  字体颜色

font-size  文字大小

font-family  字体

font-weight:  字体加粗与否

bold  加粗

normal  正常

font-style:  字体倾斜

italic  倾斜

nomral  正常

line-height  行高

字体语法:

font:font-style  font-weight  font-size/line-height  font-family;

文本:

text-decoration: 文本修饰

line-through 删除线

overline 上划线

underline 下划线

none 没有修饰

text-algin: 文本对齐方式

left     左

center   中

right    右

text-indent 首行缩进

white-space:nowrap 强制不换行(wrap 换行)

word-spacing 单词间距

letter-spacing 字母间距

direction 文字排列方向

rtl  右到左

ltr  左到右

unicode-bidi:bidi-override  改变文字的书写方式(从右到左)

在某一元素内文字超出显示省略号

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

border 边框(复合样式,集合样式)

border-top

border-right

border-bottom

border-left

border-top-width 上

border-right-width 右

border-bottom-width 下

border-left-width 左

border-style 边框样式(solid 实线/dashed 虚线/dotted 点线)

border-top-style

border-right-style

border-bottom-style

bordder-left-style

border-color 边框颜色

关键字

rgb(0-255,0-255,0-255);

六位或者三位的一个十六进制的数字;

border-top-color

border-right-color

border-bottom-color

border-left-color

border-radius 圆角半径

列:border-radius:10px 20px 30px 40px

border-width 边框宽度

border-image语法 :

border-image:border-image-sourceg  border-image-slice  border-image-repeat

-webkit-border-image:url(border.png) 27 27 stretch stretch;

border-image     给内容加入图片仅限谷歌 要加如前缀 -webkit-

border-image-sourceg     引入图片

border-image-slice     切割图片 两个值(上下或左右)不用加px

border-image-repeat    图片的排列方式

round      平铺

repeat     重复

streth     拉伸

border-colors 为边框加颜色(从外层一层层显示)

只可在火狐下使用,并单独为某个方向上的边框设置

盒模型:

怪异盒模型

在IE6,7,8,下,没有文档声明会进入怪异盒模型

box-sizing:

border-box(怪异盒模型)

content-box (标准盒模型)

box-shadow

inset (可选)内阴影、 x 偏移、 y 偏移、 模糊半径、 扩展半径、 阴影颜色

阴影先写的在上边,后写的在下边

padding

padding 内填充(使元素和它的内容之前有一个空隙)

padding:30px(上下左右);

padding:30px(上下) 60px(左右);

padding:10px(上) 30px(左右) 60px(下);

padding:10px(上) 30px(右) 60px(下) 80px(左);

padding-top

padding-right

padding-bottom

padding-left

padding不算在元素的width里边

padding在元素的边框以里,并且padding会显示元素的背景

margin

margin 外边距

margin:30px(上下左右);

margin:30px(上下) 60px(左右);

margin:10px(上) 30px(左右) 60px(下);

margin:10px(上) 30px(右) 60px(下) 80px(左);

margin-top

margin-right

margin-bottom

margin-left

margin在元素的边框以外,并且margin不会显示元素的背景

**同级元素之间的距离用margin,父元素和子元素之间的距离用padding

a 超链接

href 页面地址 点击会跳到这个页面来

href 压缩包 点击会下载这个压缩包

href id名字 点击跳到这个id的元素的位置

a 标签不继承父级的字体颜色

a标签中不能再包含a标签

span 标签区分样式用

包含选择 a span{} 找到a标签下的span标签

base 定义页面上的链接默认的打开方式和默认地址

新窗口打开页面 target="_blank"

当前窗口打开页面 target="_self"

table 表格

table 设置宽度之后,宽度会自动分配到每一行,设置高度之后也会自动分配到tbody下的每一行

thead 表格头部

tbody 表格主体

tr 行

th 单元格    (加粗,居中)

td 单元格

colspan     横向合并单元格

rowspan     纵向合并单元格

td,th 不支持margin

tr,thead,tbody :不支持margin和padding

border-spacing:0; 单元格间距为0(IE6,7不支持)

border-collapse:collapse; 合并边框

单元格中的内容默认垂直居中,可通过设置vertical-align进行修改

单元格设置 宽度,一竖列宽度都变,单元格设置 高度,一横行高度都变

表格清除默认样式:

table{border-collapse:collapse;}

td,th{padding:0;border:1px;}

vertical-align 垂直对齐方式(用在两个或多个,内联或者内联块元素垂直方向的对齐)

值               描述

baseline       默认。元素放置在父元素的基线上。

sub          垂直对齐文本的下标。

super         垂直对齐文本的上标

top          把元素的顶端与行中最高元素的顶端对齐

text-top       把元素的顶端与父元素字体的顶端对齐

middle        把此元素放置在父元素的中部。

bottom        把元素的顶端与行中最低的元素的顶端对齐。

text-bottom    把元素的底端与父元素字体的底端对齐。

length

% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit 规定应该从父元素继承 vertical-align 属性的值。

float(浮动 left/right/none):

1.使内嵌元素支持宽高

2.使块元素在一行显示

3.不设置宽度的时候,宽度由内容

4.脱离文档流

浮动原理:

使元素脱离文档流,然后按照指定的方向去移动,直到碰到父级的边界,或者另外一个浮动元素停止

文档流:

文档流是文档中可显示对象在排列时所占用的位置。

BFC ( Box Formatting Context) 块级格式化上下文

inline formatting context 行内格式化上下文

BFC 作用

1.清除内容浮动

2.阻止margin向外传递

触发BFC的条件:

1.根节点

2.float不为none的情况

3.display的值为inline-block、table-cell、table-caption

4.overflow的值不为visible

5.position的值为absolute或fixed

overflow的值

visible    默认值。内容不会被修剪,会呈现在元素框之外。

hidden     内容会被修剪,并且其余内容是不可见的。

scroll     内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto       如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit    规定应该从父元素继承 overflow 属性的值。

clear      元素的某个方向上不能有浮动元素(left、right、both、none)

清浮动的方法:

1.给同为父元素设置  float

2.给父元素设置  display:inline-block;

3.给父元素设置  overflow不为visible(默认值) 一般设为auto;

4给父元素加个样式

clearFix:after{content:"";display:block; clear:both;} 最流行的方法

定位(position)

position:relative; 相对定位(只加相对定位元素不会有任何变化)

1.不脱离文档流(元素移走元素的初始位置,还会被保留)

2.根据自己的原始位置来计算left(right)和top(bottom)值

3.提升层级

position:absolute; 绝对定位

1. 脱离文档流

2.提升层级

3.根据自己有定位的父级来计算坐标,如果父级没有定位就会一层一层的向外去找.所有的父级都没有定 位,就根据document来计算

4.使内嵌元素支持宽高

5.绝对定位之后不设置宽度,宽度有内容撑开

!!!!元素定位之后,默认情况下,后边的层级高于前边的元素

z-index 层级

1.数值越大层级越高

2.层级只在定位元素上起效果

3.层级最好只在同级元素之间做比较

document 是html的父级

form 表单

action    提交跳转地址

常用控件-----

textarea       输入一段文本

select         下拉框  option

input

type="text"      文本输入框

type="password"  密码框

type="radio"     单选框

type="checkbox"  复选框

type="file"      上传控件

type="submit"    提交按钮

type="email"     邮箱 必须以@结尾

type="tell"      电话 (移动设备自动弹出数字输出法)

type="url"       网址

type="range"     数值选择

max="100" min="1" value="50" step(部署控制,每次移动多少)="10"

type="number" 数字选择

max="9" min="1" value="3" step="3"

type="color" 取色器

type="datetime-local"   时间(年月日小时)

time: 只有时间

date: 只有年月日

week: 第几周/年

month: 第几月/年

value  值

name 数据名称

常用属性-----

checked 单选和复选的默认选中

selected 的默认选中

disabled 禁止控件的编辑和提交

for=要辅助input的id

pattern:正则验证

placeholder:提示文字信息(不兼容IE)

autocomplete:是否保存用户输入值 on(默认)/off

autofocus:指定表单获取输入焦点

required:强制用户输入不能为空

<input type="text" name="user" list="valList" required/>

<datalist id="valList">(为input中提示选择的内容,下拉框。)

<option value="javascript">javascript</option>

<option value="html">html</option>

<option value="css">css</option>

</datalist>

表单草稿箱

当用户想保存草稿箱时

为submit加入

formaction="地址" 新的提交地址

formnovalidate 取消验证

清除表单默认样式

form{margin:0;}

input,select,textarea{padding:0;margin:0;border:1px solid #000;}

textarea{resize:none;overflow:auto;}

resize 属性规定是否可由用户调整元素的尺寸。

注释:如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。

值               描述

none         用户无法调整元素的尺寸。

both         用户可调整元素的高度和宽度。

horizontal    用户可调整元素的宽度。

vertical      用户可调整元素的高度。

伪类

:link{}      此链接未被访问过

:visited{}   此链接已访问

:hover{}     鼠标移入

:active{}     鼠标按下

L-V-H-A

:target     点击后出发hash值 类似锚点a

:checked     被选中的单选框或复选框

文本伪类

p:first-letter  第一个字

p:first-line   第一行

p:selection    选中的颜色改变

p:after       元素末尾

p:before      元素开始

p:not        (命的名) 排除掉谁

结构性伪类:

box h2:nth-child(3){background:Red;}

找到h2标签的父级下边的第3个子元素,并且标签类型还必须是h2

p:nth-of-type(3){background:Red;}

找到p标签的父级下的第3个p标签

:first-child == :nth-child(1)

:last-child == :nth-last-child(1)

:first-of-type == :nth-of-type(1)

:last-of-type == :nth-last-of-type(1)

(其中括号里面的值可以是:odd(奇数)、even(偶数)、或者数学里面的数列(n、2n、)!)

IE6 兼容问题

1、在IE6下子元素会撑开父级设置好的宽高

2、max-width 最大宽度    min-width 最小宽度

max-height 最大高度    min-height 最小高度

不兼容IE6

3、在IE6下,不支持1px的点线

4、元素内,除了内嵌还有其他类型的元素,行高会失效

5、在IE6,7下,父级有边框,可能会造成子元素的margin值失效

解决办法:触发父级的haslayout

6、关于标签兼容问题--------<!-- 引入html5标签支持的js文件来处理 -->

7、IE6下只支持l-v-h-a这四个伪类,并且支持加给a标签

8、在IE6下,每行元素宽度和父级的总宽度,相差超过3px,最后一行下margin 失效

9、在IE6下,不支持给块标签加inline-block

10、在IE6下,块元素有横向的margin和浮动的时候,横向的margin会被放大两倍ss

解决办法:给元素加display:inline

11、在IE6下,高度不满19px的元素,高度会被当做19px来处理

解决办法:加overflow:hidden

12、在IE6,7下,li本身没浮动,但是li里边的内容浮动了,li下边会多出几个像素的间隙

解决办法: 1.给li加浮动(当li下的空隙问题和最小高度问题并存的时候,给li加浮动)

2.给li设置vertical-align

13、在IE6下,两个浮动元素之间有注释或者内嵌元素,并且元素的宽度和父级宽度相差小于3px,最后几个文字 会被复 制

14、在IE6,7下,浮动元素父级有宽度的情况下不用请浮动

haslayout(触发)、元素会根据自己自身内容的大小,或者父级的大小来重新计算自己的宽高

haslayout触发条件:

display: inline-block、 height: (任何值除了auto)、 float: (left 或 right)、position: absolute、 width: (任何值除了auto)、zoom: (除 normal 外任意值) zoom放大或缩小

15、在IE6下,浮动元素和绝对定位元素是并列关系的时候,绝对定位元素会消失掉

解决办法:用div把绝对定位元素包起来

16、在IE6,7下,子元素有相对定位的话,父级的overflow对它不起作用

解决办法:给父级也加相对定位

17、在IE6下,父级的宽高是奇数的话,元素的right(bottom)有1px的偏差

18、IE6,7,8不支持opacity、用filter:alpha(opacity=50);

19、在IE6下,给输入类型的表单控件加border:none无效

解决办法:重置input背景

在IE6下,输入类型的表单控件上下各有1px的空隙

解决办法:给元素浮动

在IE6下,输入类型的表单控件输入文字的时候,背景会随着一块移动

解决办法:把背景加给父级

20、在IE6下,子元素的margin -1px(超出父集边框,) 父集会自动包裹住子元素

解决办法:给父集加 position:relative

动画 animation

@keyframs animate(名称随变起){

0%{

width=100px;

}

10%{

width=500px;

}

}

样式内容:.box{animation:animate(名称)  3s(时间)  1s(延迟时间)  infinite(无限循环) altermate(反向运行); }

transform:变换

transform-origin:变还原点位置

(x轴方向 (left  center right  百分比%)

y轴方向 (left  center right  百分比%)

z轴方向 (left  center right  百分比%)

transform-style:preserve-3d  (做3d必须加)

transform:scale(x,y)

scale3d  (x,y,z) 缩放

rotate  (deg角度)

rotate  (x,y,z,deg角度)旋转

过渡属性:

transition: property duration timing-function delay;

值 描述

transition-property  CSS 属性的名称

width、height

transition-duration 过度时间(秒、毫秒)

transition-delay 延迟时间(秒、毫秒)

transition-timing-function 规定运动形式

ease    逐渐变慢(默认值)

linear   匀速

ease-in  加速

ease-in-out 先加速后减慢

cubic-bezier(x1,y1,x1,y1) 贝塞尔曲线

滤镜:

-webkit-filter:blur(5px);  //模糊,此处为5像素

-webkit-filter:sepia(0.5);  //叠加褐色,取值范围0-1,此处表示50%的褐色

-webkit-filter:brightness(0.5);  //亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的是100%亮度,无 法看 到图片)

-webkit-filter:hue-rotate(30deg); //色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红- 红) 此处为叠加黄色滤镜

-webkit-filter:invert(1);  //反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色

-webkit-filter:saturate(4);  //饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大

-webkit-filter:contrast(2);  //对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大

-webkit-filter:opacity(0.8);  //透明度,取值范围0~1,0为全透明,1为原图

-webkit-filter:drop-shadow(17px 17px 20px black); //阴影

移动端写默认

宽度适应屏幕大小

<meta name="viewport" content="width=device-width,user-scalable=no" />

加入JS 使最宽不超过540px  设置rem 为16分之一

<script>

var oHtml=document.getElementsByTagName("html")[0];

var iWidth=document.documentElement.clientWidth;

iWidth=iWidth>540?540:iWidth;

oHtml.style.fontSize=iWidth/16+"px";

</script>

清除样式:

a{-webkit-tap-highlight-color:rgba(255,0,0,0);} 点击有暗影

input{-webkit-appearance:none;}

body *{-webkit-text-size-adjust:none;} 字体最小大小

解决滑动内容效果:

<script>

var oScroll= new mScroll("wrap");    wrap{指的是内容块}
    </script>

处理已给像素边框!!

<script>

var iScale=1/window.devicePixelRatio;

document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+iScale+‘,minimum-scale=‘+iScale+‘,maximum-scale=‘+iScale+‘" />‘);

</script>

处理设备高度固定屏幕高度:

<script>

document.body.style.height=document.documentElement.clientHeight+"px";

</script> 加入body第一个

响应式(媒询media)

媒体类型

all 所有的媒体类型

screen 彩屏设备

print 打印设备

handheld 手持设备

braille 盲文触觉设备

embossed 盲文打印机

projection 投影

speech 听觉设备

TTY

TV 电视

关键字

and

not

only

媒询三种引入方式

1.<link rel="nofollow" href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />

[email protected] url("css/style.css");

3.直接写入style里面。

@media all

{

.box{

width:100px;

}

}

弹性盒模型(需要加前缀)

display:flex == display:inline-flex    类似浮动,不用清浮动

在改类型的元素内 子元素可以设置margin:auto  auto;

设置主轴方向(flex-direction:)

row 从左向右排列(默认值)

row-reverse 从右向左

column 从上到下

column-reverse 向下到上

主轴内元素对齐方式(justify-content:)

flex-start 元素在开始位置 富裕空间在另一侧(默认)

flex-end  元素在末尾位置富裕空间在起始处

center     元素居中富裕空间平分左右两侧

space-between 富裕空间在元素之间平分

space-around   富裕空间在元素两侧平分

侧轴对齐 (align-items:为对齐元素的父集设置)

flex-start 元素在开始位置 富裕空间在另一侧(默认)

flex-end  元素在末尾位置 富裕空间在起始处

center     元素居中 富裕空间平分左右两侧

注意:align-self 也是侧轴对齐但是用来写在对齐元素的样式内!!!

换行 (flex-wrap:)

nowrap(默认)

wrap 换行

wrap-reverse 反向换行

其中 主轴对齐方式 与 换行可以写集合

flex-flow:row(主轴对齐方式)  wrap(换行)

堆栈伸缩行(algin-content:)

algin-content 会更改 flex-wrap 的行为

它和 align-items 相似,但是不是对齐伸缩项目,它对齐的是伸缩行。

flex-start

flex-end

center

space-between

space-around

oder(在元素的排列位置,给子元素加人)  oder=0(默认)

遮罩(mask)

-webkit-mask:url(img)

mask:用背景图片来覆盖掉图片。

删栏(columns)加浏览器前缀

column-width 栏目宽度

column-cunt   栏目列数

column-gap   栏目距离

column-rule   栏目间隔线

column-fill   栏目高度是否统一

外联框架

<iframe src="http://www.baidu.com#form" width="900" height="40" scrolling="no" frameborder="0"></iframe>

ioc 网页小标

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link rel="nofollow" href="favicon.ico" rel="icon" />

</head>

热区

<map name="mt">

<area shape="rect" coords="923,398,1271,504" rel="nofollow" href="http://www.baidu.com">

</map>

shape="rect" 矩形

coords="左上角X,左上角Y,右下角X,右下角Y"

shape="circle" 圆形

coords="圆心的X,圆心的Y,半径"

shape="poly" 多边形

coords="第1个点X,第1个点y,第2个点X,第2个点y,第3个点X,第3个点y......"

视频(优酷视频):

<iframe height=400 width=200 src="http://player.youku.com/embed/XMTM0NDEyMTQxNg==" frameborder=0  allowfullscreen></iframe>

时间: 2024-10-12 13:20:06

html css 笔记的相关文章

HTML+CSS笔记 CSS中级 颜色&长度值

颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数. 每

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左

css笔记-display属性

css笔记-display属性 display属性可取值 display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | co

css笔记-选择器详解

css笔记-选择器详解 CSS通过选择器来定位要应用样式的元素. 下面对所有的选择器做了一个解释(CSS为版本号). CSS选择器详解 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 element,element div,p 选择所有

HTML/CSS笔记归纳整理

前言: 前端无非就是围绕标签.属性.属性值这三个词展开的. *HTML基本语法: 1. 常规标签 <标签 属性1="属性值1" 属性2="属性值2"></标签> # 一个标签可以没有属性也可以有多个属性, 属性和属性之间不分先后顺序. 2. 空标签 <标签 属性1="属性值1" 属性2="属性值2" /> # 空标签没有结束标签, 用"/"代替. *HTML标题: <

HTML+CSS笔记 CSS进阶再续

CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.

HTML+CSS笔记--1

(初接触html+css时一些笔记) 1.父盒子的高可以不用给,让里面的内容撑起来就好. 2.对于外边距合并问题,解决方法overflow : hidden;,或者是另外加一个边框可以下来. 3.对于网站的logo,我们要给它设置关键字,写在a元素里, 1 .logo a{ 2 display: block; 3 height: 40px; 4 text-indent: -2000em;/*首行缩进 em是一个字的大小,rem是以一个根的大小 这个字是给搜索引擎看的*/ 5 } 4.我们可以将具

HTML+CSS笔记 CSS中级 缩写入门

盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有三种缩写的方法: 1.如果top.right.bottom.left的值相同, margin:10px 10px 10px 10px; 可缩写为: margin:10px; 2.如果top和

HTML+CSS笔记 CSS进阶续集

元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<span>.<br>

HTML+CSS笔记 CSS进阶

文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体.(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体.) 现在一般网页喜欢设置"微软雅黑" 关于字体的问题可以参考阮一峰的经典文章:http://www.ruanyifeng.com/blog/20