week 3

影Nothing

已于 2023-12-01 19:13:02 修改

阅读量36

点赞数

文章标签： html 前端

于 2023-11-17 17:34:49 首次发布

本文链接：https://blog.csdn.net/qq_74105106/article/details/134465555

版权

第十三章字体样式

1.字体类型：font-family

语法：font-family：字体1，字体2，。。。，字体N；

①设置一种字体

#div1{font-family:Arial}(head)

②设置多种字体

p{font-family：多种字体；}

2.字体大小：font-size

语法：font-size：像素值；

属性取值：

Ⅰ.关键字（small，medium，large）

Ⅱ.像素值：px；

ps：px是相对单位，因为屏幕的分辨率不同而不同。1px可以看成一个小点

3.字体粗细：font-weight

语法：font-weight：取值；

属性取值：

Ⅰ.关键字（normal400，ligher100，bold700，bolder900）

Ⅱ.100-900的值

4.字体风格：font-style

语法：font-style：取值；

属性取值：normal，italic，oblique

5.字体颜色：color

语法：color：颜色值；

属性取值：

Ⅰ.关键字：英文单词的颜色名称

Ⅱ.十六进制RGB值

#000000是黑色

#FFFFFF是白色

6.CSS注释

语法：/*注释内容*/

第十四章文本样式

1.首行缩进：text-indent

语法：text-indent：像素值；

PS：中文首行一般缩进两个字的空间，所以text-indent的值是font-size的两倍

2.水平对齐：text-align

语法：text-align：取值；

属性取值：left，center，right

3.文本修饰：text-decoration

语法：text-decoration：取值；

属性取值：none，underline，line-through，everline

PS：用none属性，去除超链接的下划线。

4.大小写：text-transform

语法：text-transform：取值；

属性取值：none，uppercase，lowercase，capitalize

5.行高：line-height

PS：一行的高度

6.间距：letter-spacing，word-spacing

①字间距：letter-spacing

语法：letter-spacing：像素值；

②词间距：word-spacing

语法：word-spacing：像素值；

第十五章边框样式

一、整体样式

border-width、border-style（none无样式、dashed虚线、solid实线）、border-color

二、局部样式

上边框border-top、下边框border-bottom、左边框border-left、右边框border-right.

第十六章列表样式

一、列表项符号：list-style-type

1.定义列表项符号： list-style-type:取值

list-style-type是针对于ol或ul的，属性取值有有序列表：demical、lower-roman、upper-roman、lower-alpha、upper-alpha；无序列表：disc、circle、square

2.去除列表项符号：list-style-type：none

二、列表项图片：list-style-image

list-style-image：url（图片路径）；

三，课后习题

第十七章表格样式

1、表格标题样式：

caption-side:取值；（top顶部，bottom底部）

2、表格边框合并：

border-collapse：取值；（separate有空隙，collapse无空隙）只限用于表格，不能用于其他元素。

3、表格边框间距：

border-spacing:像素值；

以上三种属性都是在table元素中定义的。

第十八章图片样式

1、图片大小 width,height

2、图片边框 border:1px solid red;

3、图片对齐

垂直对齐:vertical-align:top（顶部）、middle（中部）、baseline（基线）、bottom（底部），vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式。

文字环绕 float：left（元素向左浮动）、right（向右）

第十九章背景样式

1.背景颜色 background-color:颜色值；color用于定义“文本颜色”，background-color用于定义“背景颜色”。

2.背景图片样式 background-image：url（图片路径）；

3.背景图片重复：background-repeat：

repeat，在水平方向和垂直方向上同时平铺（默认）
repeat-x:只在水平方向上平铺
repeat-y:只在垂直方向上平铺
no-repeat:不平铺

4.背景图片位置 background-position 像素值/关键字

像素值 background-position：水平距离垂直距离；（相对该元素的左上角）
关键字，此时水平和垂直方向的两个值用关键字代替
top left,top center,top right,left center,center center,right center,bottom left,bottom center,bottom right

5.背景图片固定 background-attachment：scroll（随元素一起滚动，默认）、fixed（固定）

第二十章超链接样式

一、超链接伪类简介

a:link{……}：定义元素a未访问时的样式
a:visited{……}：定义元素a访问后的样式
a:hover{……}：定义鼠标经过元素a时的样式
a:active{……}：定义鼠标单击激活时的样式
其中，hover伪类可以定义任何一个元素在鼠标经过时的样式。

二、鼠标样式

1、浏览器鼠标样式 cursor：default（三角箭头）、pointer（手指）、text（文本输入）等

2、自定义鼠标样式 cursor：url（图片地址），属性值；其中鼠标图片后缀名一般是“.cur”

第二十一章盒子模型

1、CSS盒子模型

盒子模型由四个属性组成：content（内容），padding（内边距），margin（外边距），border（边框）；还有宽度width和高height两大辅助属性（块元素可设置，行内元素不行，其宽高只能由内容区撑起）。所有的元素都可以看成一个盒子

块元素和行内元素的区别

2、display: inline-block;将元素转换为inline-block元素，让元素的宽度由内容区撑起来，以便观察

3、padding“补白”。padding-top、padding-bottom、padding-left和padding-right指定内容区与各方向边框之间的距离。padding的三种写法：

padding:20px;/*表示4个方向内边距都是20px*/
padding:20px 40px;/*表示top和bottom是20px，right和left是40px*/
padding:20px 40px 60px 80px;/*表示top20px，right40px，bottom60px，left80px(顺时针)*/

4.margin

5、浏览器审查元素；①将鼠标移至元素上，右键单击“审查”，或快捷键“Ctrl+Shift+I”；②在弹出的控制台中可以找到该元素的盒子模型。

第二十二章浮动布局

使元素脱离正常文档流

浮动属性float；left、right属性值；清除浮动，clear：取值；left、right、both属性值

课后习题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #big-box
        {
            height: 620px;
            width: 820px;
            border: 1px solid silver;
        }
        #box-top
        {
            height: 100px;
            margin: 10px 10px;
            background-color: antiquewhite;
        }
        #box-center
        {
            height: 380px;
            margin: 10px 10px;
        }
        #box-center-left
        {
            width: 595px;
            height:380px;
            background-color: aquamarine;
            float: left;
        }
        #box-center-right
        {
            width: 195px;
            height: 380px;
            background-color: aquamarine;
            float: right;
            margin-left: 10px;
        }
        #box-bottom
        {
            height: 100px;
            margin: 0px 10px 10px 10px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="big-box">
        <div id="box-top"></div>
        <div id="box-center">
            <div id="box-center-left"></div>
            <div id="box-center-right"></div>
        </div>
        <div id="box-bottom"></div>
    </div>
</body>
</html>