图片标签
<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 放在单选,复选框中默认被选中