0
点赞
收藏
分享

微信扫一扫

笔记记录(一)

图片标签

<img src="./11.png" alt="11111" title="图片文字">

替换文本       鼠标经过时候的文字提示

当图片不能正常

显示的时候的提示

-------------

样式

1.优先级:行间样式高于内嵌和链接样式,内嵌和链接样式由先后顺序决定。

2.选择器:

基础选择器:标签选择器,类选择器,id选择器

类选择器使用 class结构,例如<p class="qingxie"></p>,在样式中使用.qingxie{}进行样式的设定,页面中可以出现多个同名的类

id选择器使用 id结构,例如 <p id="tt"></p>,在样式中使用#tt{}进行样式的设定,页面中只能出现一次

h1 .qingxie{}    设定的h1内部的子标签.qingxie的样式

h1.qingxie{}     设定的是拥有类qingxie的h1的样式

h1,h2{}          集体选择器

<h1>11111</h1>

<h1>倾斜的标题</h1>

<h1>11111</h1>

<h2 id="tt">2222</h2>

<p>加粗的段落</p>

h1,h2字号都是20

h1是红色的,h2是紫色的

------------

css

1.字体  font-

1.文字大小   font-size:14px ,网页中默认的文字大小是16px

2.文字倾斜   font-style:italic/normal

倾斜   正常

3.文字加粗   font-weight:bold/normal

加粗   正常

4.文字字体   font-family:黑体,网页中常用的汉字字体有:宋体,黑体,微软雅黑

---------

5.文字颜色  color:red/#FF0000/rgba(255,0,0,1)

  0--1

6.行高:line-height:48px/2

具体值 字号的倍数

-----------

text-

文本对齐   text-align:left/center/right

左   中间   右

首行缩进    text-inden:28px  (字号的两倍)

   空格

<    <    

>    >

®   ?

©  ?

文本修饰    text-decoration:underline/none/line-through

下划线     无    删除线

a{ color: #333; text-decoration: none;}链接的样式

a:hover{ color: red;  text-decoration: underline;}    鼠标经过链接的样式

8.21

文字加粗  font-weight:bold/normal

文字倾斜  font-style:italic/normal

文字大小  font-size:14px

文字字体  font-family:

--------

文字颜色   color:red/#FF0000/rgba()

行高       line-height:30px/1.5

------

text-

文字对齐  text-align:left/center/right

文字缩进  text-indent:28px

文本修饰  text-decoration:underline/none/line-through

a{}

a:hover{}

-----------

列表:在样式中ul和ol不再需要进行区分。

去除列表前面的小图标  li{ list-style:none}

-------

background-

背景颜色 background-color: red;

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

背景重复 background-repeat: no-repeat/repeat/repeat-x/repeat-y;

不重复    重复    横向重复  纵向重复

背景位置 background-position:400px 100px;  数值方法,400px是距离左侧,100px是距离顶部

background-position:right bottom  方位方法,右下方

方位词

左 left

右 right

顶部 top

底部 bottom

居中 center

总样式   background: green url(./bg.png) no-repeat 400px center;

背景色  背景图       背景重复   背景位置

注意:分样式和总样式不能掺在一起使用

---------------------

盒子模型

宽度  width

高度  height

内边距  padding(内边距设置的是内容和盒子边界之间的距离)

外边距  margin(外边距设置的是盒子与盒子之间的距离)

padding:20px  30px

上下   左右

padding:20px 10px 50px 5px (钟表的12点指针顺时针旋转)

上   右   底   左

*{ margin:0; padding:0}   重置所有标签的内外边距为0

*是通配符,代表所有标签

margin:0 auto      让一个盒子在父盒子中居中放置

边框:border:20px   red   solid;

宽度   颜色   类型

实线  solid

点线  dotted

虚线  dashed

border-left:只为左侧设置边框线

8.23

浮动  float:left/right

浮动的对象不占据页面中的位置,可以理解为漂浮起来。

-------------

使用浮动进行页面布局的时候要注意只要有左右结构,外面就要包裹一个大div,同时这个大div还要设置高度。左右结构的小div都要添加浮动。

187*155

8.24

块元素可以有效的支持width,height,padding,margin等样式,块元素默认情况下是独占一行的,背景颜色会一直延伸到盒子的边界,典型的块元素有:div,p,ul,li,h1-h6等

行内元素不支持width,height,对于margin和padding只支持左右方向的效果,行内元素默认情况下背景颜色只延伸到有内容的地方。典型的行内元素有a,span等。

display:block   显示为块元素

display:inline  显示为行内元素

8.25

表单是用于数据收集,类型有文本框,密码框,单选复选按钮等。

表单元素要放在表单标签内部,对应的标签是form

<form action="" method=""></form>

action是点击提交按钮时跳转的页面链接

method的值可以是get或者post,其中get使用地址栏进行数据传递,有字数限制。post是将数据放在文件头中进行传递。

文本框   <input type="text">

密码框   <input type="password">

单选按钮 <input type="radio">

复选按钮 <input type="checkbox">

下拉菜单

<select>

<option>北京</option>

<option>上海</option>

<option>广州</option>

</select>

文件域 <input type="file">

提交按钮 <input type="submit" value="提交">

重置按钮 <input type="reset" value="重新填写">

普通按钮 <input type="button" value="按钮">

placeholder="" 放在文本框或者密码框中,用于提示

value=""  文本框或者密码框的值

checked 放在单选,复选框中默认被选中

举报

相关推荐

0 条评论