元素显示模式
<!--元素显示模式:
块元素:独占一行 div 宽、高、内外边距可以设置
行内元素:一行可以存在多个 span 宽、高、内外边距不可以设置
行内块元素:
-->
表格标签属性
<!-- 表头 rows data
table:border(只控制最外围大小)、width、height(tbody 值是底线,只高不低)、cellspacing(单元格与单元格之间的距离)
caption;通过css更改
thead、tr、tbody、tfoot:height\align(水平)\valign(垂直)
-->
单元格合并
<!-- td 跨行:rowspan
跨列:colspan
-->
details
<!-- details:详情标签 配合summary使用 -->
tabindex
<!-- tabindex:让本不能tab遍历获取焦点的元素可以获取 可以为负数,0,正数-->
表单的基本结构
<!-- 表单:网页交互区,收集用户信息
action:将数据交给谁处理
name:必有属性
method:提交方式 ajax
-->
html的全局属性
<!-- id身份证号,在一个页面中只能出现一次 -->
<!-- class 一类 可以出现多个-->
<!-- accesskey 设置快捷键 -->
<!-- style -->
<!-- data-* 自定义属性 -->
css体验
div {
width: 300px;
height: 300px;
background-color: pink;
}
css的三种引入方式
<!-- 外部样式 推荐!!!!! -->
<link rel="stylesheet" href="./14-样式.css">
<!-- 内部样式 -->
<style>
/* css基本结构
选择器{
属性名: 属性值;
属性名: 属性值;
}
*/
.box1 {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<body>
<div class="box1">我是盒子</div>
<!-- 行内样式:不推荐 -->
<div style="width: 300px; height: 300px; background-color: green;"></div>
<div class="box2">我是box2</div>
</body>
基本选择器
<style>
/* 标签选择器 选中所有的p标签*/
p {
color: aqua;
}
/* id选择器 */
#box1 {
color: pink;
}
/* 类选择器 */
.box2 {
color: blueviolet;
}
/* 通配符选择器
*{
}
*/
</style>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
包含选择器
<style>
/* 子代选择器 选中亲生儿子*/
.a>li {
background-color: pink;
}
/* 后代选择器 找到后代所有要找的元素*/
.a li {
color: blueviolet;
}
</style>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</body>
复合选择器
<style>
/* div {
color: pink;
}
p {
color: pink;
}
span {
color: pink;
} */
div,
p,
span {
color: red;
}
</style>
<body>
<div>wisjiajsskmx</div>
<p>cndklcdsmc</p>
<span>jnckdsmc</span>
<ul>
<li>吃饱穿暖CNBCCDC</li>
</ul>
</body>
属性选择器
<style>
input {
background-color: pink;
}
input[type="password"] {
background-color: aquamarine;
}
div[id] {
width: 300px;
height: 300px;
background-color: blue;
}
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
}
input[type$="l"] {
background-color: green;
}
/* type*="e" type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
}
</style>
<body>
<input type="text"><br>
<input type="password"><br>
<input type="search"><br>
<input type="url"><br>
<input type="number"><br>
<div id="aquamarine">1</div>
<div>2</div>
</body>
字体的样式
div {
cursor: pointer;
/* 字体大小 */
/* font-size: 40px; */
/* 字体粗细 */
/* font-weight: bold; */
/* font-weight: 900; */
/* 100-900 400===normal 800===bold 100-900越来越粗 font-weight: 400;*/
/* 字体是否倾斜 */
/* font-style: italic/normal; */
/* font-family: "微软雅黑"; */
/* italic 900可省略,字体大小,font-family必须存在 */
font: italic 900 70px "微软雅黑"
}
首行
p {
/* text-indent: 32px; */
font-size: 20px;
text-indent: 2em;
}