注释标签:对代码进行说明常用格式标签加粗斜体下划线删除线
段落标签
:分割线
:换行上标下标
保留当前格式样式(粗字体)强调文本../:返回上一级(父级)目录标题标签
我是一级标题标签(最大)
我是二级标题标签
我是三级标题标签
我是四级标题标签
我是五级标题标签
我是六级标题标签(最小)
列表标签无序列表:- 标题,图片
- 描述
-...行内元素:不能占满网页整行的元素表头1 表头2
单元格1 单元格2 单元格3 单元格4
优先级:td>tr>table跨行:跨2行跨列:跨2列盒子模型网页中所有的元素都是盒子
盒子组成部分:
content:内容padding:内边距border:边框margin:外边距居中对齐:
text-align:center;/*文本居中*/margin:0pxauto;/*盒子水平居中*/盒子属性height:高度width:宽度padding、border、margin:都有四个方向:top、bottom、left、right;例:padding-top:50px;border-left:50px;margin-right:50px;width:200px;/*内容宽度*/height:150px;/*内容高度*/border-width:25px;/*边框宽度*/border-color:red;/*边框颜色transparent:透明*/border-style:solid;/*边框样式soild:实线,dashed:线虚线,dotted:点虚线*/border:10pxredsolid;等价于:border-width:10px;border-color:red;border-style:solid;padding-top:50px;padding-bottom:100px;padding-left:50px;padding-right:100px;padding:50px;/*内边距上下左右各50px*/padding:50px100px;/*第一个值:上下第二个值:左右*/padding:50px30px100px;/*第一个值:上第二个值:左右第三个值:下*/padding:10px30px50px100px;/*第一个值:上第二个值:右第三个值:下第四个值:左(顺时针方向)*/
如何选定网页中某些或某个元素选择器:1、标签选择器:标签名,网页中所有这样的标签都具有相同的属性
div{width:300px;/*宽度*/height:250px;/*高度*/border-width:10px;/*边框宽度*/border-color:red;/*边框颜色*/border-style:solid;/*边框样式solid:实线dashed:虚线dotted:点虚线*/}2、ID选择器:#+ID名,选择网页中唯一元素,命名规则同C语言,关键字:id
#box2{border-color:blue;}3、类选择器:.+类名,选择网页中具有相同类名的元素,关键字:class
.style2{background-color:green;border-color:black;border-style:dashed;}4、伪类选择器:
a:link/*未访问的链接*/a:visited/*已访问的链接*/a:hover/*鼠标移动到链接上*/a:active/*点击时的链接*/这四种不同的状态必须按照固定的顺序写::link:visited:hover:active5、通配符选择器(*)
/*清除网页默认样式*/*{margin:0;padding:0;}选择器优先级:
!important>ID选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认属性样式有三种使用方式:内嵌样式:定义在该标签里面的
内部样式:定义在网页的里面的
优先级:td>tr>table跨行:...行内元素:不能占满网页整行的元素 表头1 表头2 单元格1 单元格2 单元格3 单元格4 跨2行跨列: 跨2列 盒子模型网页中所有的元素都是盒子
盒子组成部分:
content:内容padding:内边距border:边框margin:外边距居中对齐:
text-align:center;/*文本居中*/margin:0pxauto;/*盒子水平居中*/盒子属性height:高度width:宽度padding、border、margin:都有四个方向:top、bottom、left、right;例:
padding-top:50px;border-left:50px;margin-right:50px; width:200px;/*内容宽度*/height:150px;/*内容高度*/border-width:25px;/*边框宽度*/border-color:red;/*边框颜色transparent:透明*/border-style:solid;/*边框样式soild:实线,dashed:线虚线,dotted:点虚线*/ border:10pxredsolid;等价于:border-width:10px;border-color:red;border-style:solid;padding-top:50px;padding-bottom:100px;padding-left:50px;padding-right:100px;padding:50px;/*内边距上下左右各50px*/padding:50px100px;/*第一个值:上下第二个值:左右*/padding:50px30px100px;/*第一个值:上第二个值:左右第三个值:下*/padding:10px30px50px100px;/*第一个值:上第二个值:右第三个值:下第四个值:左(顺时针方向)*/ 如何选定网页中某些或某个元素选择器:1、标签选择器:标签名,网页中所有这样的标签都具有相同的属性
div{width:300px;/*宽度*/height:250px;/*高度*/border-width:10px;/*边框宽度*/border-color:red;/*边框颜色*/border-style:solid;/*边框样式solid:实线dashed:虚线dotted:点虚线*/}2、ID选择器:#+ID名,选择网页中唯一元素,命名规则同C语言,关键字:id #box2{border-color:blue;}3、类选择器:.+类名,选择网页中具有相同类名的元素,关键字:class
.style2{background-color:green;border-color:black;border-style:dashed;}4、伪类选择器:
a:link/*未访问的链接*/a:visited/*已访问的链接*/a:hover/*鼠标移动到链接上*/a:active/*点击时的链接*/这四种不同的状态必须按照固定的顺序写::link:visited:hover:active5、通配符选择器(*)
/*清除网页默认样式*/*{margin:0;padding:0;}选择器优先级:
!important>ID选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认属性样式有三种使用方式:内嵌样式:定义在该标签里面的
HelloWorld!
行内样式表>内嵌样式表>外部样式表
字符实体
表单元素: