html&&css 基础知识笔记

时间:2022-11-18 22:00:51

diV有 Class、Style、title、ID 等属性。

1.margin 空出边缘

margin:上 下 左 右(按顺时针顺序,缺少某一方向则对称)

2.border 边框(三要素:像素 形状 颜色)

border-top : 1px solid black 上框

border-bottom : 1px solid #6699cc 下框

border-left : 1px solid #6699cc 左框

border-right : 1px solid #6699cc 右框

border: 1px solid #6699cc 四边框

3.background 背景

text-decoration: none;">black 背景颜色

background-image : url(image/bg.gif) 背景图片

background-attachment : fixed 固定背景

background-repeat : repeat 重复排列-网页预设

background-repeat : no-repeat 不重复排列

background-repeat : repeat-x 在x轴重复排列

background-repeat : repeat-y 在y轴重复排列

background-position : 90% 90% 背景图片x与y轴的位置

over-flow: hidden ,让超出的部分隐藏。

4.浮动和清除浮动

float: left;  //左浮动

clear: left;  //清除该位置左浮动

 

5.常见的块状元素与内联元素

块状元素 内联元素

address – 地址

blockquote – 块引用

center – 居中对齐

dir – 目录列表

div – 常用块级容易,也是CSS layout的主要标签

dl – 定义列表

fieldset – form控制组

form – 交互表单

h1 – 大标题

h2 – 副标题

h3 – 3级标题

h4 – 4级标题

h5 – 5级标题

h6 – 6级标题

hr – 水平分隔线

isindex – input prompt

menu – 菜单列表

noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容

noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)

ol – 有序表单

p – 段落

pre – 格式化文本

table – 表格

ul – 无序列表

a – 锚点

abbr – 缩写

acronym – 首字

b – 粗体(不推荐)

bdo – bidi override

big – 大字体

br – 换行

cite – 引用

code – 计算机代码(在引用源码的时候需要)

dfn – 定义字段

em – 强调

font – 字体设定(不推荐)

i – 斜体

img – 图片

input – 输入框

kbd – 定义键盘文本

label – 表格标签

q – 短引用

s – 中划线(不推荐)

samp – 定义范例计算机代码

select – 项目选择

small – 小字体文本

span – 常用内联容器,定义文本内区块

strike – 中划线

strong – 粗体强调

sub – 下标

sup – 上标

textarea – 多行文本输入框

tt – 电传文本

u – 下划线

var – 定义变量

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6.标签

a标签: <a href="链接地址" target="_blank" title=" 鼠标点到位置显示的文字"> </a>

伪类: link(普通状态) visited(访问过的) hover(扫过的瞬间) active(点击的瞬间)  按照这个顺序设置颜色

h,p标签: <h>标题(h1-h6)</h>  <p>段落</p>

img标签: <img src="图片地址" title="鼠标放过来显示的文字" alt="图片丢失时代替图片的文字" />

ul无序标签:  <ul> <li>内容</li>   </ul>

ol有序标签:  <ol> <li>内容</li>  </ol>

 7.字体和文本

<p> hejiale</p>

font-size:20px 字体大小

font-weight:bold 加粗

font-family:黑体  字体

font-style:narmal 正常 italic 斜体 

font-height:20px  行高

text-indent: 20px 首行缩进

text-align: left right center justify  对齐方式