Web前端学习第二周

最后一首练习曲

已于 2022-10-28 18:56:54 修改

阅读量1.3k

点赞数

文章标签： html css

于 2022-10-27 21:45:16 首次发布

本文链接：https://blog.csdn.net/linglingpractice/article/details/127466761

版权

Web前端学习第二周

嵌套列表

ep:

<ul>
<li>广东省`<ul>
<li>珠海市<li>
<ul><li>
<ul>

表格标签

<table>(表格的最外层容器）
<tr>（定义表格行）
<th>（定义表头）
<td>（定义表格单元）
<caption>（定义表格标题）

语义化标签：<tHead>、 <tBody>、 <tFoot> `（有利于引擎优化，团队协作）

表格属性

border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan：合并列
align:左右对齐方式（含left、center、right三个值）（靠哪）
valign:上下对齐方式（含top、middle、bottom三个值）

表单表格组合

ep:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30"></table>
            <tbody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr  align="center">
                    <td>用户名</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr  align="center">
                <tr>
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr align="center">
                <tr>

                    <td colspan="2"></td>
                    <input type="submit"> &nbsp;&nbsp;&nbsp;
                    <input type="reset">
                </tr>
    </form>
</body>
</html>

效果展示
在这里插入图片描述

`<div`> 与`<span>`标签

div(块）:分区网页，相当于一块区域容器，可嵌套多层
span（内嵌）:用来修饰文字

CSS语法格式

格式：
选择器{属性1：值1；属性2：值2}
长度单位：
px->像素（pixel）
%–>百分比
基本样式：
width：宽
height：高
background-color：背景色
CSS注释:

 /*注释内容*/

内联样式与内部样式

内联（行内，行间）样式
在html标签上添加style属性

<body>
    <div style="width: 100px;height: 100px;background-color: blue;">BLUE</div>
    <div style="width: 100px;height: 100px;background-color: blue;">BLUEDY</div>
</body>

内部样式
在<style>标签内添加的样式

  <style> 
          div{width: 100px;height: 100px;background-color: :blue;}
   </style>
</head>
 <div>
  BLUE</div><siv>BLUEDY
 </siv>
</body>

优点：可以复用代码
区别：
内部样式的代码可以复用、复合W3C的规模标准，进行让结构和样式分开处理。

外部样式

引入一个单独的CSS文件，name.css
<link>标签(引入外部资源）
real属性：指定资源页面关系
href属性：资源的地址

CSS中的颜色表达

1.单词表示法: red, blue, green…
在这里插入图片描述
2.十六进制表示法：#000000
0 1 2 3 4 5 6 7 8 9 a b c d e f

3.rgb三原色表示法：rgb(255,255,255)
取值范围（0，255）

CSS背景样式

background-color :背景颜色
background-image：背景图片
background-repeat：背景图片平铺方式
background-position：背景图片位置
background-attachment：背景图片随滚动条的移动方式

CSS边框样式

border-style：边框的样式
solid:实线
dshed:虚线
dotted:点线
border-width：边框的大小
px…
border-color：边框的颜色
red #f00

<style>
        div{width: 300px;height: 300px;border-style: dashed;border-color: blue;border-width: 3px;}
    </style>
</head>
<body>
    <div></div>
</body>

效果展示
在这里插入图片描述

注：针对某一条边进行单独设置:border-left-style：中间是方向（left,right,top,bottom)
颜色：透明颜色：transparent
练习：实现三角形边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{ background-color:green;}
    div{ width:0px; height:0px;
        border-top-color: transparent;
        border-top-style:solid;
        border-top-width:30px;;
        border-right-color: red;
        border-right-style:solid;
        border-right-width:30px;;
        border-bottom-color: transparent;
        border-bottom-style:solid;
        border-bottom-width:30px;;
        border-left-color: transparent;
        border-left-style:solid;
        border-left-width:30px;;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/6d4a0293d6ff4ffc92e0d1940ca75039.png#pic_center)

效果展示
在这里插入图片描述

font-family:字体类型

英文字体：Arial，Times new roman
中午字体:微软雅黑，宋体（simsun）

<style>
        div{font-family: SimSun;}

    </style>
</head>
<body>
    <div>字体测试</div>
</body>

注意点：
1.多个字体类型设置目的
2.引号添加的原因

front-size:字体大小

默认：16px
写法：number(px) | 单词（small large…不推荐去）

font-weight:字体粗细

模式：
正常（normal）
加粗（bold）
写法：number(100 200…900,100到500为正常，600到900是加粗的）

font-style:字体样式

模式：
正常（normal)
斜体（italic)
写法：单词（normal,italic)

CSS段落样式

text-decoration:文本装饰
下划线 :underline
删除线 :line-through
上划线 :overline
无：none

text-transform:文本大小
小写：lowercase
大写: uppercase
只针对首字母大写：capitalize

text-indent: 文本缩进（首行缩进)

p{text-indent:2em;font-size:16px;}

em单位：相对单位，len永远跟字体大小相同

line-height: 定义行高

p{line-height:1;}

默认行高不是固定值，随字体大小改变
取值1.number(px) | scale(比例值跟文字大小成比例）

letter-spacing: 定义字间距

p{letter-spacing:10px;}

word-spacing: 定义词间距（针对英文）

p{word-spacing:10px;}

英文和数字不自动折行问题：
1.word-break：break-all；（非常强烈的折行）

 <style>
        div{width: 300px;height: 300px;border: 1px solid grey;word-break: break-all;}
    </style>
</head>
<body>
    <div>THE ANTS were spending a fine winter's day drying grain collected in the summertime. A Grasshopper, perishing with famine, passed by and earnestly begged for a little food. The Ants inquired of him, " Why did you not treasure up food during the summer?' He replied, "I had not leisure enough. I passed the days in singing." They then said in derision: "If you were foolish enough to sing all the summer, you must dance supperless to bed in the winter."


    </div>
</body>

效果展示
在这里插入图片描述

2.word-wrap：break-word：（较弱的折行，会产生一些空白区域
）

<style>
        div{width: 300px;height: 300px;border: 1px solid grey;word-wrap: break-word;}
    </style>
</head>
<body>
    <div>THE ANTS were spending a fine winter's day drying grain collected in the summertime. A Grasshopper, perishing with famine, passed by and earnestly begged for a little food. The Ants inquired of him, " Why did you not treasure up food during the summer?' He replied, "I had not leisure enough. I passed the days in singing." They then said in derision: "If you were foolish enough to sing all the summer, you must dance supperless to bed in the winter."


    </div>
</body>

效果展示
在这里插入图片描述

CSS复合样式

通过空格方式实现
1.background：red url()repeat 0 0;
2.border: lpx red solid;
3.font(最少要有两个值 size family,family在后)
注：尽量不要混写，如果非要混写，则需先写复合样式再写单一样式。

CSS选择器

ID选择器
css:#elem{}
html:id=“elem”
注：
1.在一个页面中，ID值是唯一的
2.命名规范，字母_-数字（命名第一位不能有数字）
3.命名方式：
驼峰式:searchbuttom(小驼峰）
下划线：search_small_buttom
短线式:search-samll-buttom

<style>
    #div1{width: 100px;height: 100px;background: rgb(79, 196, 36);}
    #div2{width: 100px;height: 100px;background: gray;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

效果展示
在这里插入图片描述

CLASS选择器
.elem{}
注：
1.可以1复用
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据css决定，而不是class树形中的顺序

<body>
    <style>
        .box{width: 100px;height: 100px;background-color: rgb(0, 255, 76);}
        .content{font-size: 30px;}
    </style>
</head>
<body>
    <p class="box"></p>
    <p class="box content">有字</p>
</body>