css+html总结

leilei
142 阅读4分钟

CSS

  1. 定位
  2. 浮动
  3. 字体
  4. 背景
  5. 文本样式
  6. 盒子模型
  7. 选择器
  8. 行内元素、块元素、行内块元素
  9. input、img、文本框垂直对齐

定位

作用：允许我们任意把盒子摆到指定位置

语法：

1.静态定位 默认

postion:static;

2.相对定位

postion:relative;

3.绝对定位

postion:absolute;

4.固定定位

postion:fixed;

注意：相对定位与绝对定位一般是相辅相成，称为子绝父相

浮动

作用：脱离标准流，浮到盒子想要摆放的位置

语法：

1.浮动位置

float:left/right;

2.清除浮动

① 直接设置父元素高度

② 额外标签法 : 在父元素内容的最后添加一个块级元素

clear:both;

③ 单伪元素清除法

.clearfix::after{
            content: "";
            display: block;
            clear: both;
}

④ 双伪元素清除法

.clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
        }
        .clearfix::after{
            clear: both;
        }

注意：一般使用双伪元素清除法

字体

作用：给文字设置样式，使网页看起来更加美观

语法：

1.文字颜色

color:red;

2.文字大小

font-size:16px;

3.文字粗细

font-weight:normal/bold;
font-weight:400/700;

4.文字倾斜

font-style:normal/italic;

5.文字系列

font-family:宋体/楷体/....;

6.font复合连写

font:style weight size family;
font:italic 700 14px 宋体;

注意：连写的顺序不能变换

背景

作用：给元素添加背景，使其更美观

语法：

1.背景颜色

background-color:blue;

2.背景图片

background-image:url("图片路径")

3.背景平铺

background-repeat:repeat/no-repeat/repeat-x/repeat-y;

4.背景位置

background-position:left/center/right;
background-position:top/center/bottom;

5.背景连写

background:color image repeat position
background:red url("./img") no-repeat center top;

注意：顺序可调换，但不推荐

文本样式

作用：调节文本对齐方式以及修饰

1.文本缩进

text-indent:2em/32px;

2.水平对齐

text-align:left/center/right;

3.垂直对齐(行高)

line-height:40px/2;

4.文本修饰

①下划线

text-decoration:underline;

②删除线

text-decoration:line-through;

③上划线

text-decoration:overline;

④去除下划线

text-decoration:none;

盒子模型

作用：存放内容以及调整位置

语法：

1.边框

border-width:1px;
border-style:solid/dashed/dotted;
border-color:green;
border:1px solid yellow;

②圆角边框:正方形

border-radius:50%;

③胶囊边框：长方形

border-radius:50%(width);

2.内边距

padding-left/top/right/bottom:10px;

3.外边距

margin-left/top/right/bottom:20px;

4.解决外边距塌陷

overflow:hidden;

5.内减法

box-sizing:border-box;

选择器

作用：选择元素修改样式

语法：

1.标签选择器

div{} / p{} / h1{}......

2.类选择器

.box{} / .nav{}

3.id选择器

#box{} / #nav{}

4.通配符选择器

*{}

5.伪类选择器

:hover{}  / li:nth-child(n){}

6.伪元素选择器

::before / ::after

行内元素、块元素、行内块元素

1.常见元素标签

①行内元素：a 、span 、b 、u......

②块元素：div 、p 、h 、ul 、li......

③行内块元素：img 、input 、textarea 、button ......

2.元素转换

①转行内元素

display:inline;

②转块元素

display:block;

③转行内块元素

display:inline-block;

input、img、文本框垂直对齐

语法：

vertical-align:baseline / top / middle / bottom;

html

  1. 标签
  2. 列表
  3. 表格
  4. 表单

标签

1.标题标签

<h1></h1>  /  <h2></h2>  / <h3></h3>  /  <h4></h4>  /  <h5></h5>  /<h6></h6>

2.段落标签

<p></p>

3.水平分割线、换行标签

<hr>  /  <br>

4.图片标签

<img src="图片路径">

5.音频标签:控件、自动播放、循环播放

<audio controls autoplay loop></audio>

6.视频标签:控件、自动播放、循环播放、静音

<video controls autoplay loop muted></video>

7.超链接:地址、跳转另一个窗口

<a href="#" target="-blank"></a>

列表

1.无序列表

<ul>
    <li></li>
</ul>

2.有序列表

<ol>
    <li></li>
</ol>

css去除小圆点

list-style:none;

3.自定义列表

<dl>
    <dt></dt>
    <dd></dd>
</dl>

表格

1.表格：表格标题、表头、表中、表格底部

<table border="1" width="300" heighe="300">
        <caption><strong>期末考试成绩</strong></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>分数</th>
                <th>评语</th>
            </tr>
        </thead>
    
        <tbody>
            <tr>
                <td>张三</td>
                <td>100分</td>
                <td>666</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>90分</td>
                <td rowspan="4">还行</td>
                <!-- 跨行合并，遵循左上原则 -->
            </tr>
        </tbody>
    
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">满分一个</td>
                <!-- 跨列合并，遵循左上原则 -->
            </tr>
        </tfoot>
    </table>

表单

①文本框：类型 框内提示语

<input type="text" placeholder="请输入文字">

②密码框：类型 框内提示语

<input type="password" placeholder="请输入密码">

③单选框：类型 默认选中（使用name属性单选一个）(lable包裹点击文字也可以选中)

<input type="radio" checked>
<lable>
	<input type="radio" name="sex">男 
	<input type="radio" name="sex" checked>女
</lable>

④复选框：类型 默认选中

<lable>
<input type="checkbox" checked>
</lable>

⑤文件上传:类型 多文件上传

<input type="file" multiple>

⑥input按钮（form包裹实现按钮功能）

<form action="">
    <!-- 提交按钮 -->
    <input type="submit">
    <!-- 重置按钮 -->
    <input type="reset">
    <!-- 配合之后学习的js使用 -->
    <input type="button" value="按钮">
</form>

⑦botton按钮(可用于包裹文字、图片)

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<!-- 以下两个按钮都没功能 -->
<button type="button">普通按钮2</button>
<button>普通按钮1</button>

⑧下拉菜单(selected默认选中)

<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>深圳</option>
</select>

⑨文本域

<!-- text area 文本 区域 -->
<!-- column 列 -->
<!-- row 行 -->
<textarea cols="30" rows="10"></textarea>
avatar
文章
阅读
粉丝