12 .表格标签
<table>:表格最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
注:它们之间有嵌套关系
语义化标签:<tHead><tBody><tFood>
在一个<table>中:
<tBody>:可以出现多次
<tHead><tFood>:只能出现一次
13.表格属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对其方式
valign:上下对齐方式
align: left、center、right
valign:top、middle、bottom
14.表单intput标签
表单标签:
:表单的最外层容器. :标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框等. 具有type属性,决定是什么控件text 普通的文本输入框
password 密码输入框
checkbox 复选框
radio 单选框
file 上传文件
submit 提交按钮
reset 重置按钮
checked:已选
disabled:无法勾选
placeholder:框中文字
select:下拉菜单置顶
size:调节选项个数
multiple:多选(ctrl+鼠标左键)下拉菜单和上传文件
15.表单相关标签
:多行文本框. 、:下拉菜单. < label>:辅助表单 双标签,扩大可选范围 ## 16.div与span3. 外部样式
引入一个单独的css文件,name.css
标签::(引入外部资源)
rel:指定资源和页面的关系.
href: 表示资源的地址.
<style>
@import url('./common.css');
</style>(引入外部资源)
4. CSS颜色表示法
1.单词表示法:
2.十六进制表示法
3.RGB三原色表示法
获取颜色的工具:photoshop
<style>
/* div{background-color:#a365365b ;} */
div{background-color:rgb(rgb(124, 49, 49), green, rgb(33, 33, 117));}
</style>
``
## 5.css背景样式
background-color:背景颜色.
background-image:背景图片.
url(背景地址)
默认会水平垂直都铺满背景图
background-repeat:背景图片的平铺方式.
repeat-x x轴平埔
repeat-y y轴平铺
repeat(x,y都进行平铺,默认值)
no-repeat 都不平铺
background-position:背景图片的位置.
background-position:00px 00px;
x y:number|单词
x :left ,center,right
y:top, center,bottom
background-attachment:背景图片随滚动条的移动方式.
scroll:默认值(背景位置按当前元素进行偏移)
fixed:(背景位置按浏览器进行偏移)
视觉差效果练习:
```html
<style>
#div1{width:1400px;height:800px;
background-image: url(./风景夏季.jpg);background-attachment: fixed;}
#div2{width:1400px;height:800px;
background-image: url(./风景落叶.jpg);background-attachment: fixed;}
#div3{width:1400px;height:800px;
background-image: url(./风景冬季.jpg);background-attachment: fixed;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
6.css边框样式
border-style:边框的样式
solid:实线
dashed:虚线
dotted:点线
border-width:边框的大小
px....
border-color:边框的颜色
red #f00
注:对某一条边单独设置
边框实现三角形:
颜色透明:transparent
<style>
div{width:300px; height:300px;border-right-style: solid;border-right-color: red;border-right-width: 1px;}
</style>
7.family字体类型
font-family:字体类型
英文字体:Arial、‘Times New Roman’
中文字体:微软雅黑、宋体
font-family:字体类型
英文、中文
中文字体的英文名称:
微软雅黑:‘Microsoft YaHei'
宋体:SimSun
衬线体和非衬线体:
字体样式注意事项:
1.设置多字体方式(逐级识别计算机语言)
2.引号问题:当字体中出现空格
8.文字大小粗细
font-size:字体大小
默认16px
xx-small:最小
x-small:较小
small:小
medium:正常(默认值)
large:大
x-large:较大
xx-large:最大
字体大小一般为偶数(更好对齐)
font-weight:字体粗细
两种模式: 正常(normal),加粗(bold)
写法:单词、数值(100-900)为整数值(100-500:正常)(600-900:加粗)
font-style:字体样式
模式:正常(normal)、斜体(italic)
注:oblique:也表示斜体,用的比较少
区别:1.italic所有带有倾斜字体属性的才可以设置倾斜操作
2.oblique没有倾斜属性的字体可以设置倾斜操作
9.文本修饰
text-decoration:文本装饰
下划线:underline
删除线:line-through
上划线:overline
取值
添加多个(通过空格隔开)
text-transform:文本大小写(针对英文)
小写:lowercase
大写:uppercase
只针对首字母大写:capitalize
10. 文本缩进与文本对齐
text-indent:表示文本缩进
首行缩进
em单位:相对单位,1em永远更字体大小相同
text-align:文本对齐方式
left:左对齐
center:居中对齐
justify:两端点对齐
取值
line-height: 文本的行高
定义:上边距、行高、下边距
默认:不是固定值,根据当前字体大小不断变化
取值:1. number(px) | scale(比例值,跟文字大小)
11. 文本间距与英文折行
letter-spacing:定义字间距
word-spacing:定义词间距(针对英文)
英文数字 自动折行:
word-break:break-all;(非常强烈的折行)
word-wrap:beak-word;(不是那么强烈的折行,会产生一些空白区域)
12. css复合样式
一个css属性只能控制一种样式,叫作单一样式。
一个css 属性控制多种样式,叫作复合样式。
复合样式 :
复合的写法,是通过空格的方式实现的
复合写法有的是不需要关心顺序的,例如:background,border.
有的需要关心顺序,例如:font
1. background :red url( )repeat 0;
2. border:1px red soild
3. font:
最少要有两个值,size family
weight style size family √
style weight size family √
weight style size/line-height family √
尽量不要混写,如果非要混写,先复合后单一
13.css选择器
ID选择器及注意事项
css:#elem{}
html:id=“elem"
注:
1.在一个页面中,id值是唯一的,出现多次不符合规范
2.命名规范,字母 、_、-、数字(命名的第一位不能是数字 )
3.命名方式,驼峰式
searchButton(小驼峰)、SearchButton(大驼峰)
短线线 下划线
search-small-button search_small_button
class:选择器
class:.elem{}
html:class="elem"
注:1.class选择器是可以复用的.
2.可以添加多个class样式.
3.多个样式的时候,样式的优先级根据css决定,而不是class属性中的顺序.
4.标签+类的写法 p.box