###常见的HTML标签
标题:h1、h2、h3、h4、h5…
段落:p
换行:br
容器:div、span(用来容纳其他标签)
表格:table、tr、td
列表:ul、ol、li
图片:img
表单:input
链接:a
CSS样式
行内样式
<p style="border: 10px purple; color: firebrick;">段落标签</p>
页内样式
<title>CSS的页内样式</title>
<style>
div{
background-color: green;
font-size: 25px;
color: white;
}
</style>
外部样式
<head>
<meta charset="UTF-8">
<title>CSS的外部样式</title>
<link rel="stylesheet" href="css/index.css">
</head>
CSS选择器
标签选择器
类选择器
id选择器
并列选择器(标签和类或者id 或的关系)
复合选择器(标签和类或者id 且的关系)
后代选择器(标签和标签)
直接后代选择器(标签和标签)
相邻兄弟
属性选择器
CSS选择器 – 伪类(标签不同状态)
CSS选择器的优先级别遵循:
1. 相同类型的选择器遵循: a.就近原则 b.叠加原则
2. 不同类型的选择器遵循:
important > 内联 > id > 类 | 伪类 | 属性选择 | 伪元素 > 标签 > 通配符 > 继承
3. 选择器的针对性越强,它的优先级就越高
<head>
<meta charset="UTF-8">
<title>CSS选择器的优先级别</title>
<style>
/*复合选择器*/
div.test1{/* 权值:10+1 */
color: orchid;
}
div#main{/* 权值:100+1 */
color: springgreen;
}
/*id选择器*/
#main{ /* 权值:100 */
color: purple;
}
#second{
color: yellow;
}
/*类选择器*/
.test1{ /* 权值:10 */
color: aqua;
}
.test2{ /* 权值:10 */
color: blue;
}
/*标签选择器*/
div{ /* 权值:1 */
color: red !important;
}
/*
通配符: 权值:0
1.优先级别是最低的;
2.性能是最差的.
*/
*{ /* 权值:0 */
font-size: 30px;
}
</style>
</head>
<body>
<div id="main" class="test1 test2" style="color: burlywood;">我是一段文字</div>
</body>
HTML的标签类型
HTML有N多标签,根据显示的类型,主要可以分为3大类
块级标签
独占一行的标签
能随时设置宽度和高度(比如div、p、h1、h2、ul、li)
行内标签(内联标签)
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸(比如span、a、label)
行内-块级标签(内联-块级标签)
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度(比如input、button)
display 修改标签类型
CSS中有个display属性,能修改标签的显示类型
none:隐藏标签
block:让标签变为块级标签
inline:让标签变为行内标签
inline-block:让标签变为行内-块级标签(内联-块级标签)
属性
/添加到文本的修饰/
text-decoration: line-through;
/首行缩进/
text-indent: 2%;
/处理超出的内容:hidden直接裁剪/
overflow: scroll;
/no-repeat:不平铺/
background: url(“images/bg.jpeg”) no-repeat;
/设置边框/ border: 2px solid black;
/设置内边距/padding:10px;
/设置外边距/ margin: 30px;
/块阴影/ box-shadow: 10px 10px 10px purple;
/文字阴影/text-shadow: 10px 10px 9px purple;
/设置圆角//border-radius: 20px;/
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
/设置不透明度/opacity: 0.1;
border: 5px solid #E6A43F;
float: left;
注意:任何标签只要一浮动,类型就会被转为行内-块级标签
position
/相对浏览器进行定位/
position: fixed
子绝父相
position: relative; (父) position: absolute;(子)
居中
水平居中:
适用于行内标签和行内-块级标签: text-align
适用于块级标签水平居中: margin:0 auto;
垂直居中:
适用于行内标签和行内-块级标签: line-height
适用于块级标签: position left top tanslate
relative相对定位会在标准流当中占位置;absolute绝对定位不会在标准流当中占位置;fixed生成绝对定位的元素,相对于浏览器窗口(相对于手机的window层)进行定位不会随内容的滑动而滑动,如果子元素是绝对定位,父元素没有相对定位的话,子元素的绝对定位是相对于文档
(
d
o
c
u
m
e
n
t
)
,
就
是
相
对
于
整
个
页
面
来
进
行
布
局
,
和
相
对
于
窗
口
(document),就是相对于整个页面来进行布局 ,和相对于窗口
(document),就是相对于整个页面来进行布局,和相对于窗口(window)浏览器的可视区域进行定位有着本质差别
float浮动是相对文档的脱离文档流,提升元素层级,但它们盒子里面的文本依然会为这个元素让出位置,环绕在其周围(就行富文本中的文字绕图片一样)float浮动虽然脱离了流但是响度当前位置的脱离没有重新从顶部重新开始,只规定的方向的位置,通过magin 或者padding改改变位置