[HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页
期待你的快乐与健康与幸福安康。
最后时刻，请记得给我点赞支持哦！
关注喵星人喵星人，请常来关注哦！
喵喵，请放心吧！
期待你的持续关注与互动！
你的点赞就是对我最大的鼓励！
持续关注，请随时查看有趣更新哦！
喵星人请放心，请继续关注我哦！
目录
前言
CSS颜色与背景
颜色color属性
背景background属性
1. 背景颜色background-color
2. 背景图像background-image
3. 背景图像平铺方式background-repeat
4. 固定/滚动背景图像background-attachment
5. 定位背景图像background-position
6. 背景简写background
CSS列表样式
1. 样式类型list-style-type
CSS盒模型
CSS盒模型结构
边界属性设置
填充属性设置
课后练习
总结
前言
哕唧我啊,整日想着偷袭计划,准备回来跟你们汇报呢～
从明天起,本人将全职负责每日更新的工作！
今天也是一份特别的心意哦～
CSS****颜色与背景
颜色color属性
color属性用于设置元素字体的色彩特性。该属性的定义较为简单易懂，但支持的颜色形式多样，在于可选择的颜色类型包括颜色名称、RGB函数以及十六进制数值三种形式。
其中：
· 颜色名称部分包含CSS预定义的17种标准颜色。
· RGB函数部分支持两种表示方式：rgb(RRR, GGG, BBB)或rgb(r%, g%, b%)。
· 十六进制数值表示法则采用#RRGGBB或#RGB的形式。
背景background属性
用于设置指定元素的背景色、背景图案等。
1.background-color**：关键字****| RGB值|****transparent**
2.background-image**:url(*.jpg) | none**
3.background-attachment**: scroll | fixed**
4.background-repeat : repeat | repeat-x | repeat-y |no-repeat
5.background-position :百分比 | 长度 | 关键字
利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用 空格分 隔。
关键字在水平方向的主要有left、center、right，
关键字在垂直方向的主要有top、center、bottom。
1.背景颜色background-color
CSS 中的 background-color 属性用于为所有 HTML 元素指定背景颜色。
> p{background-color:gray} /*将段落元素的背景颜色设置为灰色*/
>
>
> 代码解释若需更改整个页面的色系，则对
元素应用background-color属性。> body{background-color:cyan} /*将整个网页的背景颜色设置为青色*/
>
>
> 代码解释2.背景图像background-image
CSS 中的 background-image 属性用于为元素设置背景图像。
如果引用本地其他文件夹中的图片，给出对应的文件夹路径即可。
> p{background-image:url(image/flower.jpg)}
>
>
> 代码解释如果需要对背景图像设置进行更改，则需对
部分应用background-image属性。> body{ background-image:url(image/flower.jpg)}
>
> 代码解释3.背景图像平铺方式background-repeat
CSS中的background-image属性用于设置背景图像的平铺方式。如果不设置该属性，则默认背景图像会在水平和垂直方向上同时被重复平铺。该属性有四种不同的取值.
4. 固定/滚动背景图像background-attachment
CSS中的 background-attachment属性用于设置背景图像是固定在屏幕上还是随着页面滚动。该属性有两种取值。
**5.**定位背景图像 background-position
默认情况下，背景图像会放置在元素的左上角。CSS中的background-position属性用于设置背景图像的位置，可以根据属性值的组合将图像放置到指定位置上。该属性允许使用两个属性值组合的形式对背景图像进行定位。
> background-position: 水平方向值 垂直方向值
>
>
> 代码解释水平方向和垂直方向的属性值都支持关键词、绝对数值或百分比形式的表示方式。
(1) 关键词定位
在 background-position 属性值中支持使用的关键词共有 5 种。
background-position属性默认使背景图片位于元素的左下方位置。如果仅提供一个参数，则另一方向默认采用center值补全。
(2) 长度值定位
以元素内边距区域的左上角点为基准点，在此基础上计算背景图像的位置。
例如 background-position: 100px 50px 表示背景图像的左上角距离元素的左上角向右移动100像素并向下移动50像素。
(3) 百分比定位
百分比数值定位方式相对复杂，在指定基准点的基础上按照百分比比例计算位置。
例如 background-position: 66% 33% 表示水平方向处于2/3的位置、垂直方向处于1/3的位置。
如果仅提供一个参数，则垂直方向位置默认为50%。
这种方法类似于关键词定位法简写时使用center补全省略的关键字。
6. 背景简写background
> 1. p{
>
> 2. background-color:silver;
>
> 3. background-image:url(image/football.png);
>
> 4. background-repeat:no-repeat;
>
> 5. }
>
>
>
>
> 代码解释> p{ background: silver url(image/football.png) no-repeat }
>
>
> 代码解释两段代码效果一样！
CSS****列表样式
1. 样式设置list-style-type CSS 中的 list-style-type 属性可用于定义列表项的起始符号或形状。
- 样式图片通过list-style-image属性进行设置。
样式图片通过CSS中的**{property}语法进行定义。
这些样式图片能够以动态的方式呈现给浏览器。
这些标志图像是从本地存储或网络资源中获取。
这些图像是以图形文件的形式存在。
这些图形文件可以在本地设备上显示。
这些图形文件可以在远程服务器上获取。
这些图形文件可以在不同设备上自适应地呈现。
当{property}被指定为none或无效路径时，
此时必须指定对应的{related_property}来完成展示效果。
此时必须指定对应的{related_property}来完成展示效果。
此时必须指定对应的{related_property}来完成展示效果。
3. 样式位置 list-style-position
CSS中的list-style-position属性用于定义列表标志的位置，有3种属性值。
4. 样式简化
CSS中的list-style属性具有总结其他三种字体属性的功能，并可将相关属性值集中排列在同一行。在为同一个列表元素声明多项列表属性时, 可利用list-style属性进行简化书写。
> [list-style-type] [list-style-position] [list-style-image]
>
>
> 代码解释属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。
> 1. ul{
>
> 2. list-style-type: circle;
>
> 3. list-style-position: outside
>
> 4. }
>
>
>
>
> 代码解释> ul{ list-style: circle outside}
>
>
> 代码解释两段代码效果是一样的！
CSS****盒模型
CSS 盒模型是一种用于布局网页元素的机制。
W3C建议将网页中的所有元素包含在一个盒（box）中。
设计师可通过创建定义来控制该盒的属性。
这些对象包括段落、列表项、标题、图片以及层级结构。
盒子模型主要定义了四个区域：边界（margin）、边框（border）、填充（padding）和内容（content）。
margin 与其他属性如 background-color 、 background-image 、 padding 、 content 和 border 的层次关系及其相互影响是关键。
边界属性设置
边界属性是 margin ，也称为外边距，表示盒子边框与页面边界或其他盒子之间的距离，属性值为长度值、百分数或 auto ，属性效果是围绕元素边框的“空白” 。
外边距还可以通过单边属性进行设置，不会影响其他外边距，且这些单边属性可以设置一个或多个，具有 4 个单边外边距属性：
margin-top ： 20px; margin-right ： 20px;
margin-bottom ： 20px; margin-left ： 20px;
margin:10px; / 4* 个边均为 *10px /
margin:10px 20px ; /* 上下 | 左右* /
margin:10px 20px 30px; /* 上 | 右左 | 下* /
margin:10px 20px 30px 40px; /* 上 | 右 | 下 | 左* /
border-width : thin 、 medium 、 thick 、 length ； 复合属性，分 border- top -width 、 border- right -width 、 border- bottom -width 、 border- left -width 四个子属性。
border-style : none|dotted|dashed | solid|double|groove [ 凹型线 ］ |ridge ［ 凸型线 ］ inset ［ 嵌入线 ］ |outset ［ 嵌出线 ］ ;
--复合属性，分top、right、bottom、left四个子属性。
border-color : 颜色关键字 | RGB 值 ;
border : 边框粗细 边框样式 边框颜色 ;
border:2px solid #ff33ee;
填充属性设置
元素内边界主要是指边框和内部元素之间的 空白距离 ，利用 padding 属性设置元素内的边界时，也包括 5 个属性，同样也有四种设置方法。
基本语法：
**padding:长度|**百分比
padding-top**、padding-right、****padding-bottom:**同上
padding:20px 30px 40px 60px;//**
padding:20px 30px 40px; /上|右|下|左/
padding:20px 30px; /上|左右|下/
padding:20px; /上右下左均相同/
课后练习
录入如下代码，注意观察行级元素和块级元素的区别。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素与行级元素高宽度的区别</title>
<style>
.special{
border:1px solid #036;
width:200px;
height:50px;
background:#ccc;
margin:5px;
/*display:block;*/
}
</style>
</head>
<body>
<div class="special">这是div元素</div>
<span class="special">这是span元素</span>
</body>
</html>
代码解释
- 网页标题：文档流定位
- 网页主体内容为：
为网页设置相应的内部样式表效果；
清除全局样式表中的默认值设置；
将nav导航栏居中对齐并展示宽度限定在300px范围内；
设置a标签的基本尺寸：宽度80px、高度30px；
底部边框设置为1px灰色虚线；
字体大小设为14px，并使文字居中对齐；
行高设为30px；确保无下划线显示。
超链接样式特征：纯白色文字底色、灰色背景区域；所有边框均为1px实线；右侧橙色边框。
如若希望达到预期显示效果，请问还需在a标签的哪些属性上进行设置？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文档流定位</title>
<style>
*{margin:0;
padding:0;
}
#nav{
margin:0 auto;
width:300px;
text-align:center;
}
a{
width:80px;
height:30px;
border-bottom:1px solid #666;
font-size:14px;
text-align:center;
line-height:30px;
height:30px;
width:80px;
text-decoration:none;
display:inline-block;
}
a:hover{
color:#fff;
background-color:#999;
border:1px solid;
border-top-color:#FF8000;
border-right-color:#FF8000;
border-left-color:#FF8000;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>
代码解释总结
介绍了 CSS 的颜色、背景、列表 等样式属性。 这些属性有的具有子属性，从不同方面描述外观样式，因而比较灵活，可以使用单个子属性定义某一方面的样式，也可以使用复合属性定义整体的样式，在使用时应注意属性与属性之间的顺序及制约关系。
重点介绍了 CSS 盒模型，它是 CSS 的精华，同时也是学习的难点。把页面元素 作为 “盒子”， 则 元素 有 边界 (margin) 、边框 (border) 、填充 (padding) 、元素内容 (content) 这些重要概念。盒子具有 4 条边，所以这些属性都各有 4 个单边子属性，在使用时可以直接对某一条边应用单边子属性设置其样式，也可以按照一定顺序依次设置各边的样式，设置方式比较灵活。
期待你在生活中拥有快乐的心情，并祝愿你身体健康、幸福美满。
希望你能获得健康的体魄和美好的人生。
喵呜～真的很重要呢！如果你觉得有趣或者有收获的话，请记得支持一下哦！
