WEB前端-3.1
目录
CSS部分
什么是CSS
CSS的书写方式
网页引入CSS的方式
css的颜色、大小、边线
文本和字体样式
CSS选择器
属性选择器
伪类选择器
伪元素选择器
文本样式
display属性
背景样式
精灵图、雪碧图
元素定位
绝对定位
相对定位
浮动定位
浮动
CSS部分
什么是CSS
CSS（Cascading Style Sheet）：级联样式表、层叠样式表，w3c提供，主要用来装饰、装扮网页的样式，使得HTML具有更高的友好度。
CSS目前主要存在三个版本：CSS1.0、CSS2.0、CSS3.0，大家以3为标准进行学习。
CSS的书写方式
css都是以键值对的形式存在。
选择器 {
键: 值;
}
div {
color: red;
width: 200px;
height: 200px;
}
网页引入CSS的方式
网页引入css存在三种方式：
-
标签样式 【style属性】
-
内联样式
-
外联样式
<!DOCTYPE html>
<html>
<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>css的初步使用</title>
<style>
/* .box {
color: green;
} */
</style>
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<!-- ement语法，快速生成代码 -->
<!--
div#box*2>a[href="#"]*8>{这个是友情链接$}
-->
<!-- 行内样式、标签样式 -->
<div style="color: red;">这是一个div标签</div>
<div class="box">这些都是div标签1</div>
<div class="box">这些都是div标签2</div>
<div class="box">这些都是div标签3</div>
<div class="box">这些都是div标签4</div>
<div class="box">这些都是div标签5</div>
<div class="box">这些都是div标签6</div>
<div class="box">这些都是div标签7</div>
<div class="box">这些都是div标签8</div>
<div class="box">这些都是div标签9</div>
<div class="box">这些都是div标签10</div>
</body>
</html>
common.css【存储路径，一般推荐使用/css/xxx.css】:
.box {
color: aquamarine;
}
css的颜色、大小、边线
<!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>
<style>
.box {
/* 颜色可以使用颜色单词 */
/* color: pink; */
/* 三原色：红绿蓝 */
/* color: #FF0000; */
/* color: #f389a1; */
/* color: #00F; */
/* color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
color: rgb(127, 127, 127); */
/* color: rgb(255, 0, 255);
color: rgb(0, 255, 255); */
/* color: rgba(255, 0, 0, 0.5);
color: rgba(255, 0, 0, .9); */
/**
注意：在css中，还存在很多种颜色的表示和调整方式，
遇到了就查询掌握一下
*/
/* color: hsl(hue, saturation, lightness); */
color: red;
/* border: 1px solid green; */
/* border-width: 5px;
border-style: dotted;
border-color: aquamarine; */
/* border-top: 1px solid green;
border-bottom: 1px solid red; */
border: 1px solid #ccc;
width: 300px;
height: 50px;
border-radius: 10px;
/* border-top-left-radius: 115px;
border-top-right-radius: 115px;
border-bottom-left-radius: 115px;
border-bottom-left-radius: 115px; */
/* 盒子阴影效果 */
/* box-shadow: 3px 3px 5px #999; */
/* box-shadow: 10px 10px 20px red; */
box-shadow: 10px 0px 10px #ccc,
-10px 0px 10px #ccc,
0px 10px 10px #ccc,
0px -10px 10px #ccc;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="box">这个是一个div</div>
</body>
</html>
文本和字体样式
/* 文字阴影 */ text-shadow: 3px 3px 5px rgb(235, 239, 5); /* 字体大小 */ font-family: '楷体'; font-size: 20px; /* */ /* font-weight: 100; */ /* font-weight: bold; */ /* font-style: italic; */ /* 文本相关的 */ /* text-align: right; */ /* text-decoration: line-through; text-decoration: underline; text-decoration: overline; */ text-align: center; line-height: 50px;
CSS选择器
CSS的选择器：通过特定的方式，显示CSS选择需要匹配中的html标签。
CSS选择器非常多：
-
基本选择器
-
标签选择器
-
id选择器
-
类选择器
-
子代选择器
-
后代选择器
-
逗号选择器
-
通配符选择器
-
复合选择器
-
属性选择器
伪类选择器
css1.0开始，伪类选择器只有四个，是为超链接标签设计的，为了修改超链接标签的样式存在的。但是后期发现，这种效果不错，被广泛的使用在所有的可见标签中，同时，CSS也陆续扩展了大量好用的伪类选择器。
-
:link
-
:active
-
:visited
-
:hover
一定注意：这四个伪类选择器存在顺序。
:link 超链接点击之前
:visited 链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时
伪元素选择器
CSS中存在两个伪元素选择器，和伪类选择器非常的像
-
::before
-
::after
文本样式
display属性
display是CSS中重要的属性，是可以隐藏或者显示标签、修改标签的默认属性。
背景样式
精灵图、雪碧图
是前端开发中的特色图片，这种图片必须是png结尾的图片，另外这种一张图片中，存在很多个图片或者图标。在开发时，可以通过背景样式加上位置来选择对应的功能。
诞生的原理：网站要将外部资源和页面分离、加快了页面的加载速度、同上可以缓存外部资源，加快页面打开的速度。
但是如果小图标特别的多，这种情况会导致服务器请求加大。使用这种精灵图减轻服务器的请求压力。
元素定位
CSS提供了很多元素的定位方式，默认定位（静态定位）。
-
默认定位（静态定位）
-
绝对定位
-
相对定位
-
浮动定位
绝对定位
把标签固定到一个固定的地方，就被称为绝对定位。
绝对定位，一旦需要使用，则必须找到对应的参照定，将参照的标签设置为相对定位，“父相子绝”。
相对定位
用来给后代元素作绝对定位参照所用
浮动定位
常用来做滚动时不发生滚动的效果，如页面两侧的广告栏等。
浮动
浮动可以让块元素横向排列。