1200字范文 > HTML之CSS层叠样式表

HTML之CSS层叠样式表

时间：2022-03-26 02:13:02

相关推荐

HTML之CSS层叠样式表

一、CSS层叠样式表概述

CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

多个样式可以层层覆盖叠加，如果不同的css样式对同一个html标签进行修饰，样式有冲突的,应用优先级高的，不冲突的样式规则共同作用。

1.CSS作用

修饰美化html网页。外部样式表可以提高代码复用性从而提高工作效率。html内容与样式表现分离，便于后期维护。

2.CSS特点

丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间

3. CSS语法规则

CSS 规则由两个主要的部分构成：

（1）选择器

（2）一条或多条声明

选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成

语法案例

选择器｛属性：值;属性:值….. ｝*{color:red;font-size:14px;}div{color:red;font-size:14px;}#div1{color:red;font-size:14px;}

注意事项

如果值为若干单词，则要给值加引号；font-family: “黑体”,“华文彩云”,“微软雅黑”,“arial”;
多个声明之间使用分号;分开
css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感
css注释/…/

二、HTML中三种引入CSS形式

1. 行内样式表（行内引入方式）

【body】下，在当前的标签【div】内使用了【style】属性，在style属性之后的内容都是CSS样式表CSS样式表中也是键值对形式，键值对的分隔符是一个【:】，而且每一个属性之后都有【;】结尾

<div style="color: red;font-family: '隶书';font-size: 30px;">我爱中国</div>

2. 内联样式表

在【head】标签内，使用【style】标签，在style标签内都是CSS样式表style标签有一个type属性， text/css 可视化文本的css样式表在css文件中的注释方式 /**/ 可以作为单行注释，也可以作为多行

p {color: green;font-size: 32px;font-family: "仿宋";}#p1{color: darkred;}<p id="p1">日照香炉生紫烟</p>

3.外联样式表

在【head】标签内使用【link】标签，连接外部的CSS样式表（外部需要构建.css文件）link标签属性 -rel: 连接文件的类型type: text/css 可视化文本的css文件href: CSS文件所处的路径，可以是本地路径，也可以是网络路径

table {border: 1px green solid;}td,th {border: 1px red solid;}<link href="style.css" rel="stylesheet" type="text/css"/><style type="text/css">@import url(main.css);@import url(sheet1.css) all;@import url(print.css) print;h1{color:blue;}</style>

优势

可以满足多个页面的统一化处理，归纳总结思想可以提供用户访问网站的速度，外联样式表可以保存在本地，下一次打开网站不需要申请下载CSS样式表可以提供公司服务器带宽使用效率，降低带宽需求，可以满足更多的用户

优先级：内联样式>内部样式>外部样式

三、CSS选择器

1.基本选择器

除了前面提到的通过【标签】和【id】选择，还可以通过Class选择，因为id不能一样，所以只能操作一个标签，而标签选择操作范围又太大，这里便引入了class。

<style type="text/css">.s1{color: purple;font-size: 100px}.s2{color: pink;font-size: 100px}.s3{color: yellow;font-size: 100px}</style><div class="s1">hello,everyone!</div><div class="s2">hello,everyone!</div><div class="s3">hello,everyone!</div>

以上基本选择器的优先级从高到低:id >class >标签

2. 属性选择器

<style type="text/css">input[type='text'] {background-color: #FAEBD7;}a[href] {background-color: #8A2BE2;}</style><body><form name="login" action="#" method="get"><font size="3">用户名：<font> <input type="text" name="username" value="zhangsan" /> </br>密码： <input type="password" name="password" value="123456" /> </br><input type="submit" value="登录"></input></form><a href="">百度</a><a href="">京东</a></body>

3. 伪元素选择器

主要针对a标签使用，一般用于鼠标放到超链接标签上面的结果反映：

a:link 初始状态a:hover 鼠标经过状态a:active 激活状态a:visited 访问后状态

这里以颜色状态示例：

a:link {color: red;}a:hover {color: green;}a:active {color: yellow;}a:visited {color: blue;}

在实际应用中，都是将鼠标放到对应标签，会有下划线显示，表示hover状态，所以，实际使用情况是：（1）设置a （2）a:hover

a{color: black;font-size: 20px;text-decoration: none;/*默认下划线清除*/}a:hover{text-decoration: underline;/*在hover状态下显示下划线*/}

4. 层级选择器

4.1 列表

ul li:first-child{color: red;}ul li:last-child {color:green;}<ul><li>苹果</li><li>香蕉</li><li>榴莲</li></ul>

4.2 后代选择器

div p{…} 表示div中的p标签，所有的p,后代div span{…} 表示div中的span标签，包括所有的span，后代

4.3 子代选择器

div>span{…} 表示 div中有一个span， span是子代（只包含直接的后代）

4.4 相邻兄弟

/*相邻兄弟,从div位置开始，向后的相邻p标签*/div + p {font-size: 50px;}

4.5 通用兄弟

/*从div开始位置向下，所有的p标签*/div ~ p {color: aqua;}

4.6 其他选择器

/*全局选择器，对所有标签操作，包括body标签*/* {font-size: 35px;margin: 0;padding: 0;}/*群组选择器*/h1,h2 {background-color: red;}

四、CSS属性

1.文字属性

font-size:设置字体大小font-family:设置文字的字体,常见的值为 :黑体，宋体，楷体等font-style:规定斜体字,常见的值：

normal - 文本正常显示

italic - 文本斜体显示字体斜体

oblique - 文本倾斜显示变形斜体font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。

100 对应最细的字体变形，900 对应最粗的字体变形。

数字 400 等价于 normal，而 700 等价于 bold。简写：

/*style weight size family swsf*/font: italic bold 30px "幼圆","黑体";

2.文本属性

color:设置文本颜色text-indent:缩进元素中文本的首行,取值类型如下：

text-indent:5em;表示此段落第一行缩进5个字符的宽度

text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十text-decoration:

none:会关闭原本应用到一个元素上的所有装饰

underline: 添加下划线

overline:在文本的顶端画一个上划线

line-through:在文本中间画一个贯穿线，删除线

blink:让文本闪烁(无效果)text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)word-spacing: 字符之间的间隔letter-spacing: 单词或者字母之间的间隔line-height:设置行高 line-height:25px;与父容器高度一样，则是垂直居中

3. 背景属性

background-color：设置背景颜色，默认透明background-image:url(“图片路径”):设置背景图片background-repeat:

repeat-y:只在垂直方向都平铺

repeat-x:只在水平方向都平铺

repeat:在水平垂直方向都平铺

no-repeat:任何方向都不平铺background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center简写：

background: red center no-repeat url(img/003.jpg);

4. 列表属性

list-style-type:decimal;改变列表的标志类型list-style-image: url(“images/dog.gif”);用图像表示标志list-style-position: inside;确定标志出现在列表项内容之外还是内容内部简写：

list-style: decimal url(img/001.png) inside;

去掉样式

list-style:none;

list-style-type:none;

5. 尺寸显示轮廓属性

width:设置元素的宽度height:设置元素的高度显示属性(display)

display: none 不显示

block:块级显示，有高度和宽度，块标签一行只能一个，不能并排，span可以通过该属性转为block

inline:行级显示，宽高没效果，但是一行可以多个，div可以通过该属性转为行级

inline-block:行级块，既能并排，又能调整高宽

#div1{width: 300px;height: 200px;background-color: #FAEBD7;border: 0px solid darkolivegreen;/*加厚外框，内边框300*200不变*/display: inline-block;/*bolck是块元素，有高度和宽度，块标签一行只能一个，不能并排*/}#div2{width: 300px;height: 200px;background-color: #556B2F;display: block;display: inline-block;/*inline-block即是块又是行，可以并排显示*/}

轮廓（outline）

绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

常用属性：

outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);设置轮廓的样式

outline-color:red;设置轮廓的颜色

outline-width:10px设置轮廓的宽度

6. 浮动属性

浮动(float)的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在标准文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三个标签块并排显示

<style type="text/css">#box1 {width: 100px;height: 100px;background-color: #808080;float: left;//定位属性float}#box2 {width: 100px;height: 100px;background-color: #006400;float: left;}#box3 {width: 100px;height: 100px;background-color: #DEB887;float: left;}#box4 {width: 100px;height: 100px;background-color: #5F9EA0;clear: both;/*前三个块并排，最后一个块另起一行开始，不受影响*/}</style>

7.定位属性

postion: static | relative| absolute| fixed

静态定位（默认定位方式）static，这里不做叙说。

7.1 相对定位(relative)

相对于原来的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

<style type="text/css">#div1{width:200px;height: 200px;background-color: #556B2F;position: relative;/*相对定位，相对原来的位置*/left:10px;/*会发生碰撞*/top:10px;z-index: -1;/*被挡住，控制层叠位置*/}#div2{width:200px;height: 200px;background-color: #5F9EA0;position: absolute;/*以浏览器的窗口为依据定位*/left:0px;top:0px;}</style>

7.2 绝对定位(absolute)

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是视窗本身。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于视窗本身。

7.3 固定定位(fixed)

元素框的表现类似于将 position 设置为 absolute，不过其位置相对于视窗本身。

示例如下(网站左下角和右下角广告)：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#left {width: 200px;height: 200px;background-color: red;position: fixed;left: 0;bottom: 0;}#right {width: 200px;height: 200px;background-color: green;position: fixed;right: 0;bottom: 0;}#middle{width: 200px;height: 200px;background-color: blue;position: fixed;left: 0;bottom: 50%;}</style></head><body><div id="left"></div><div id="right"></div><div id="middle"></div></body></html>

五、盒子模型

盒子模型是由内到外进行的设置，元素内容为初始化尺寸（不变），通过设置内边距、边框等尺寸，使得整个元素尺寸发生变化

5.1 内边距属性

padding-top: 50px;
padding-left: 10px；
padding-bottom: 20px;
padding-right: 100px;
padding: 50px 100px 150px 200px;
一个数据: 上右下左都是一个数值
两个数据: 第一个数据，对应上下，第二个数值对应左右
三个数据: 第一个数据对应上，第二个数据对应左右，第三个数据对应下
四个数据: 顺时针结构，上右下左

5.2 外边距属性

同padding，与界面边界或者其他元素之间的平面距离。

如果两个元素是纵向关系，外边距会产生一个合并关系，就是margin-top，和 margin-bottom合并，这里合并会采取较大的一方，作为两个元素之间的边距。

margin-top 塌陷

div2在div1的里面（div1是div2的父标签），在表现效果上，div2会覆盖div1；当div1和div2分别外边距100的时候，首先是按照div1在四个方向移动100，然后div2相对于div1再在四个方向移动100，但是由于margin-top塌陷问题，导致顶部没有变化。

解决办法

div1添加border属性父容器使用【overflow:hidden】，子标签【margin-top相对父容器顶部距离设置】，从而保证子标签在父容器垂直方向居中父容器使用【弹性盒子】

<html><head><meta charset="utf-8"><title>div的水平居中</title><style type="text/css">/*使div顶住浏览器的边框*/body{padding: 0;margin: 0;}#div1{/*上下为0，左右自动*/margin: 0 auto;width: 500px;height: 100px;background-color: #5F9EA0;overflow: hidden;/*溢出，当内容超出了盒子大小的时候进行处理，然后子块可以用margin-top调整*/ /*否则，外框顶部也会移动*/} #div1-1{margin:0 auto;margin-top: 25px;width: 200px;height: 50px;background-color: #D2691E;/*里面块垂直居中*/}#div2{/*上下为0，左右自动*/margin: 10px auto;width: 500px;height: 100px;background-color: #008000;/*使用弹性盒子*/display:flex;/*弹性盒子行对齐*/align-items: center;/*弹性盒子两端对齐*/justify-content: center;}#div2-1{width: 200px;height: 50px;background-color: #5F9EA0;}</style></head><body><div id="div1"><div id="div1-1"></div></div><div id="div2"><div id="div2-1"></div></div></body></html>