【无标题】CSS介绍

CSS介绍 2

一、修饰文字的属性

注意：如果设置的文字在a标签内，那么修饰文字的属性必须设置给a标签

（1）、设置字体的颜色：color

取值：

1、英文单词（red、green、blue等）

2、“#”+六位十六进制数（0-9 a-f）

例如：

# ff 00 00 红色

特殊情况下，如上例：两两独立的十六进制数，如果他们两个是相同的数字，可以简写为一个，即#f00，它等同于#ff0000

3、rgb（0-255，0-255，0-255）

red green blue

0-255实际就是两两独立的十六进制数相乘的区间范围

4、rgba（0-255，0-255，0-255，0-1）

red green blue 透明度

前三个值与rgb中的一样，最后一个值是设置颜色透明程度，1不透明，0完全透明

5*、hsl（）

6*、hsla（）

注意：5、6仅做了解

（2）、设置文字大小：font（font是一个复合属性，可以单写成各个子属性，也可以在font中一并设置文字的样式）

1、font-size：默认字体大小为16px 一般情况浏览器设置字体最小为10px

取值：

1、指定像素（推荐）

font-size:30px

2、比例

2、font-weight：设置文字粗细

取值：

1、100-900（只能取整百）

2、英文（bold，bolder，lighter等）

3、font-style：设置字体是否为斜体

取值：

1、italic（斜体）

4、font-family：设置文字的字体

5、line-height：设置行高，设置文字所占一行的高度

设置文字上下居中 line-height 当行高的值等于标签的height值时，文字上下居中

6、text-align：设置文字水平对齐方式

取值：

1、left

2、center

3、right

7、letter-spacing：设置文字字间距离

8、text-indent：设置文字首行缩进

px与em区别：

px绝对单位

em相对单位，根据父级元素的字体大小进行设置，默认情况下1em=16px

因为上面说到font是一个复合属性，所以设置文字样式也有复合写法：font：

（已经设置了子属性写法的不建议再使用复合写法，不然子元素写法会全部失效）

（3）、设置文字超出样式：text-overflow

设置文字超出样式，text-overflow必须与overflow和white-space这两个属性一起使用才生效

div{ //设置超出样式 overflow:hidden; //设置文字是否换行 white-space:nowarp; //设置文字超出样式 text-overflow:ellipsis; //创建div } <div>今天已经周五了，明天又是周六，后天就到周末了。</div>

overflow:hidden（文字超出部分隐藏）

white-space:nowarp（强制所有文字在同一行显示）

text-overflow:ellipsis（设置文字超出样式以小圆点"..."的形式显示）

（4）、设置文本样式：text-decoration（复合属性，设置文字上的线条位置，颜色等效果）

1、text-decoration-color：设置线条的颜色

2、text-decoration-line：设置线条的位置

下划线：underline

上划线：overline

贯穿线：line-through

3、text-decoration-style：设置线条的种类

实线：solid

双实线：double

虚线：dashed

波浪线：wavy

（5）、设置文字阴影：text-shadow

水平偏移：正数向右，负数向左

垂直偏移：正数向下，负数向上

设置模糊程度

设置颜色

div{ //设置文字阴影 text-shadow:5px 5px 2px red } //创建div <div>你看我的阴影好不好看</div>

（6）、引入网络字体：@font-face

@font-face是一个单独属性，需要在style里定义

//引入网络字体 @font-face{ /* 定义引入的字体的名字 */ font-family:渔阳体 ; /* 设置字体路径 */ src: url(yingyingqingshuti.ttf); } //在div中引入网络字体 div{ font-family:渔阳体; } //创建div <div>你看我的字体好不好看</div>

注意：字体路径可以是从网上选择的字体网址，也可以将其下载保存在文件中进行路径的引用

二、设置背景的属性

（1）、设置背景1：background（复合属性）

1、background-color：设置背景颜色

与设置文字颜色方法一致

2、background-iamge：设置背景图片

background-iamge:url()

url里面可以是图片在线地址，也可以是保存后的本地路径（推荐）

3、background-repeat：设置背景图片的平铺方式

no-repeat 不平铺

repeat-x x轴平铺

repeat-y y轴平铺

4、background-position：设置背景图片的位置

background-position:x（横轴位置）y（纵轴位置）

5、background-size：设置图片大小

background-size:weigh（图片宽度）height（图片高度）

复合写法：

复合写法内，只要需要设置标签的大小，就必须设置标签的位置

background:url(2.webp) no-repeat 0 0/100%;

（2）、重复背景

设置多重背景

通过逗号隔开图片设置

最底层的图片设置在最后面

//设置div多重背景 div{ width:500px; height:500px; background:url(1.gif) no-repeat center 400px,url(1.webp); } //创建div <div></div>

（3）、雪碧图（CSS sprite、精灵技术）

1、什么是雪碧图？

雪碧图是一种网页图片应用处理方式，他允许你将一个页面设计到 所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求，客户端显示一张图片都会向服务器发送请求，所以图片请求越多，造成延迟的可能性就越大，当页面有许多字体图标时，推荐使用CSS Sprite 。

2、如何使用雪碧图

（1）需要一个设置好宽和高的容器

（2）通过background-image引入背景图片，注意：图片可以撑开容器，但背景图片不能撑开容器,所以一定要设置宽高

（3）通过background-position：x,y;（X和Y一般都取负值）把图片背景移动到自己需要的位置,当只取一个值的时候，第二个值默认居中

3、使用雪碧图的好处

减少请求服务器的次数，降低服务器压力

有利于搜索引擎的优化

可以减少命名烦恼

减少内存的消耗

（4）、设置背景2

1、background-origin：设置背景图片起始位置

padding-box：默认

border-box：从边框开始显示

content-box：从内容区域开始显示

2、background-clip：设置背景图片的裁剪方式

border-box：将边框以外的内容裁剪掉

padding-box：将内补白以外的区域裁剪掉

content-box：将内容以外的区域裁剪掉

-webkit-background-clip:text：按照标签内的文字进行裁剪

（5）、设置固定背景

background-attachment：设置固定背景

fixed将图片针对窗口进行固定（可用于聊天框背景图片等）

CSS介绍 3

一、浮动

浮动：float（将竖向排列的标签设置为横向排列）

right：右浮动

left：左浮动

使用方法：

方式一：给所有标签设置同一种浮动

left：从左往右排列

right：从右往左排列

方式二：分别设置左右浮动,主要用于页面为左右结构进行布局

必须同时设置上两种浮动，如果只设置一种浮动，即便成功左右浮动了，左右浮动的元素也不在同一行

//设置左右浮动 .left{ float:left; } .right{ float:right; } /*必须设置不同浮动*/ //创建div <div> <dic class="left">左边</div> <div class="right">右边</div> </div>

浮动塌陷：

产生的原因：浮动会影响元素脱离文档流

解决浮动塌陷的bug：

1.在被影响的标签前添加空白div,设置css属性clear:both或者在被影响的标签里设置

//设置浮动 .left{ width:50%; height:200px; background:pink; float:left; } .right{ width:50%; height:200px; background:deepskyblue; float:right; } .center{ width:100%; height:200px; background:orange; //在被影响的标签里添加clear:both /* clear:both; */ } .clear{ clear:both; } //创建div <div class="box"> <div class="left">左边</div> <div class="right">右边</div> <div class="clear"></div> <div class="center"></div> </div>

2.使用::after伪对象（给浮动元素的父级标签设置）推荐

//使用::after伪对象 .box::after{ content:''; width:0; height:0; display:block; clear:both; visibility: hidden; overflow: hidden; zoom:1; } //设置浮动 .left{ width:50%; height:200px; background:pink; float:left; } .right{ width:50%; height:200px; background:deepskyblue; float:right; } .center{ width:100%; height:200px; background:orange; } //创建div <div class="box"> <div class="left">左边</div> <div class="right">右边</div> </div> <div class="center"></div>

3.给被影响的元素添加overflow:hidden

//设置浮动 .left{ width:50%; height:200px; background:pink; float:left; } .right{ width:50%; height:200px; background:deepskyblue; float:right; } .center{ width:100%; height:200px; background:orange; //给被影响的元素添加overflow:hidden overflow:hidden; } //创建div <div class="box"> <div class="left">左边</div> <div class="right">右边</div> <div class="center"></div> </div>

二、补白

补白：margin（外补白）padding（内补白）

1、margin：外补白（设置标签之间的间隔）

取值方式：

一个参数：同时作用于四个方向

两个参数：第一个值代表上下，第二个值代表左右

设置盒子居中：margin:0 auto;设置左右居中

四个参数：上、右、下、左，顺时针赋值

三个参数：上、左右、下

单独设置某一个方向具有补白：

margin-top（值可以为负）

margin-left（值可以为负）

margin-right

margin-bottom

2、padding：内补白（置边框与内容的间隔，会影响标签本身的大小）

取值方式：

一个参数：同时作用于四个方向

两个参数：第一个值代表上下，第二个值代表左右（值不能为auto）

四个参数：上、右、下、左，顺时针赋值

三个参数：上、左右、下

单独某一个方向具有内补白：

padding-top

padding-left

padding-right

padding-bottom

区别：

1、padding会影响标签大小，margin不会影响标签大小

2、padding会显示背景，margin不会显示背景

补充：margin-top的bug

当两个元素关系为嵌套关系时，给子元素设置向上的外补白，父元素会跟随子元素移动

解决bug的方法：

1、给父级设置overflow:hidden;

.one{ width:300px; height:300px; background:red; overflow:hidden; } .two{ width:100px; height:100px; background:deepskyblue; margin-top:100px; /* float:left; */ position:absolute; } //设置div <div class="one"> <div class="two"></div> </div>

2、给自己设置float

.one{ width:300px; height:300px; background:red; } .two{ width:100px; height:100px; background:deepskyblue; margin-top:100px; float:left; } //设置div <div class="one"> <div class="two"></div> </div>

3、给自己设置position:absolute;

.one{ width:300px; height:300px; background:red; } .two{ width:100px; height:100px; background:deepskyblue; margin-top:100px; position:absolute; } //设置div <div class="one"> <div class="two"></div> </div>