您的位置: 首页  >  IT文章  >  CSS（层叠样式表）

CSS（层叠样式表）

分类: IT文章 • 2023-12-05 13:20:37

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

一般链接式 写在前面

后面样式会覆盖前面样式，内层样式会覆盖外层样式

优先级排序：导入式在后面的情况

行内样式>链接式>内嵌式>导入式（在后面的链接式）

导入式在前面的情况

行内样式>内嵌式>导入式>链接式（在前面的链接式）

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

HTML中的CSS

行内样式

CSS（层叠样式表）

内嵌式

CSS（层叠样式表）

链接式（方便管理，用的最多）

创建一个外部的CSS文件 里面写样式内容

HTML内

CSS（层叠样式表）

导入样式 （导入CSS样式）

CSS（层叠样式表）

导入式和链接式的区别

链接式不会在链接CSS样式语句是提前加载CSS样式，而是当运行到body标签中时才去加载CSS文件

用到时才取

导入式是在导入样式语句的时候就将CSS文件中的样式之间加载进来

不管用不用到都直接取

   

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

复合选择器

交集选择器 （方便，避免重复，继承其他样式）

希望同时使用两种一定义好的选择器样式来修饰时使用 交集选择器

CSS（层叠样式表）

并集选择器

希望对很多意见用一些样式修饰的 来添加新的样式时使用 并集选择器

CSS（层叠样式表）

后代选择器

CSS（层叠样式表）

子选择器

CSS（层叠样式表）

CSS样式的继承特性

CSS的继承有些是可以继承的有些是不可以继承的

 

CSS（层叠样式表）

样式层叠有优先级的

   

CSS（层叠样式表）

 

CSS（层叠样式表）

 

CSS（层叠样式表）

边框

border-width 边框粗细

border-color 边框颜色

border-style 边框样式

简单写法

CSS（层叠样式表）

内边距

设置内边距

padding： 40px; 默认统一设置

CSS（层叠样式表）

分别设置 内边距

CSS（层叠样式表）

简单写法

CSS（层叠样式表）

外边距

设置外边距 默认统一设置

CSS（层叠样式表）

CSS（层叠样式表）

分别设置 外边距

CSS（层叠样式表）

简单写法

CSS（层叠样式表）

网页布局和盒模型

CSS（层叠样式表）

像水流一样一层一层的解析，一层一层的渲染

CSS（层叠样式表）

块级元素 div

块级元素独占一行，依次垂直向下排序

CSS（层叠样式表）

行内元素 span

行内元素 在同一行依次横向向右排序

CSS（层叠样式表）

盒子在标准流中的定位 盒子与盒子之间的距离

行内元素之间的水平 margin

行内元素之间的margin计算

CSS（层叠样式表）

   

CSS（层叠样式表）

块级元素之间的竖直 magin

块级元素之间的margin计算

CSS（层叠样式表）

之间有重叠时，大的会覆盖小的，以大的为准

CSS（层叠样式表）

嵌套盒子之间的 margin

嵌套盒子之间的margin计算

CSS（层叠样式表）

   

CSS（层叠样式表）

margin 属性可以设置为负值

CSS（层叠样式表）

负值会之间向反方向移动

CSS（层叠样式表）

盒子浮动 float

CSS（层叠样式表）

 

使用 clear 清除浮动的影响

CSS（层叠样式表）

 

CSS（层叠样式表）

盒子定位 position

CSS（层叠样式表）

相对定位

CSS（层叠样式表）

绝对定位

CSS（层叠样式表）

 

固定定位

CSS（层叠样式表）

   

z-index 空间位置

CSS（层叠样式表）

空间层叠中 上层下层的显示 覆盖不覆盖的位置

CSS（层叠样式表）

设置z-index值越小越显示到下层

盒子 display 属性

CSS（层叠样式表）

将块元素变成内元素

CSS（层叠样式表）

将内元素变成块元素

CSS（层叠样式表）

   

8.用CSS设置文字的效果

设置文字字体

CSS（层叠样式表）

设置字体斜体

CSS（层叠样式表）

设置文字加粗效果

CSS（层叠样式表）

设置字体不加粗

CSS（层叠样式表）

英文字母大小写转换

CSS（层叠样式表）

设置文字大小

CSS（层叠样式表）

设置文字装饰效果

CSS（层叠样式表）

段落首行缩进

CSS（层叠样式表）

设置字体的间距

CSS（层叠样式表）

设置字体行高

CSS（层叠样式表）

设置段落之间的距离

CSS（层叠样式表）

设置文本的水平位置

CSS（层叠样式表）

段落的对齐

CSS（层叠样式表）

设置文字的颜色和背景颜色

CSS（层叠样式表）

设置段落的垂直对齐方式（让段落在一定的纵向区域对齐）

//别人写的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
 .greenBorder {border: 1px solid green;} /* just borders to see it */
 </style>
</head>

<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>

9.用CSS设置图像的效果

设置图片的边框

实线的边框

CSS（层叠样式表）

虚线的边框

CSS（层叠样式表）

点划线边框

CSS（层叠样式表）

没有边框

CSS（层叠样式表）

给边框的不同部分设置边框样式

CSS（层叠样式表）

设置图片大小和缩放

大小

CSS（层叠样式表）

缩放（包容图片的容器的百分之多少）

CSS（层叠样式表）

   

CSS（层叠样式表）

图文混排

CSS（层叠样式表）

设置图片与文字的对齐方式

基准线对齐 （默认对齐方式）

CSS（层叠样式表）

   

CSS（层叠样式表）

顶部对齐

CSS（层叠样式表）

居中对齐

CSS（层叠样式表）

底部对齐

CSS（层叠样式表）

其他对齐

CSS（层叠样式表）

   

CSS（层叠样式表）

   

CSS（层叠样式表）

下标

CSS（层叠样式表）

上标

自定义对齐

CSS（层叠样式表）

相对于基准线的距离 20px 向上的距离 -20px 向下的距离

10.用CSS设置网页的背景颜色和背景图像

设置网页的背景颜色

CSS（层叠样式表）

设置网页的背景图像

CSS（层叠样式表）

默认图片在网页平铺

设置网页的背景图像平铺

CSS（层叠样式表）

在h1标签内平铺图片

CSS（层叠样式表）

在h1标签内左右平铺图片

CSS（层叠样式表）

平铺并设置平铺高度

CSS（层叠样式表）

设置图片不平铺，默认在左上角显示

设置网页的背景图片位置固

设置显示位置 图片上方和左边与网页边框的距离

CSS（层叠样式表）

在右下角显示

backaground-position 使用还有很多

设置网页的背景图片位置固定在窗口位置不变

CSS（层叠样式表）

图片固定位置不变

   

11.用CSS设置表格样式

设置表格的边框

CSS（层叠样式表）

 

CSS（层叠样式表）

 

设置表格的宽度

CSS（层叠样式表）

   

CSS（层叠样式表）

   

设置表格隔行换色

设置整个表格的样式背景色，再设置偶数行的背景色

设置表格列样式

使用链接选择器

CSS（层叠样式表）

   

CSS（层叠样式表）

设置鼠标经过是行变色效果

CSS（层叠样式表）

   

12.用CSS设置超链接样式

使用CSS伪类别来设置超链接样式

CSS（层叠样式表）

未被访问的状态

CSS（层叠样式表）

用户已访问的状态

CSS（层叠样式表）

鼠标指针位于链接的上方的状态

CSS（层叠样式表）

链接被点击时刻的状态

   

创建按钮式超链接

用颜色的差异来 设置成 按钮样式的超链接

CSS（层叠样式表）

   

CSS（层叠样式表）

   

13.用CSS设置列表的样式

设置列表的符号

列表是有默认的符号的

CSS（层叠样式表）

CSS（层叠样式表）

CSS（层叠样式表）

 

设置列表图片符号

CSS（层叠样式表）

   

创建简单导航菜单

一些CSS样式

#navigation {

120px;

font-family:Arial;

font-size:14px;

text-align:right

}

#navigation ul {

list-style-type:none;                                /* 不显示项目符号 */

margin:0px;

padding:0px;

}

#navigation li {

border-bottom:1px solid #9F9FED;        /* 添加下划线 */

}

#navigation li a{

display:block;

height:1em;

padding:5px 5px 5px 0.5em;

text-decoration:none;

}

#navigation li a:link, #navigation li a:visited{

background-color:#1136c1;

color:#FFFFFF;

}

#navigation li a:hover{                                        /* 鼠标经过时 */

background-color:#002099;                        /* 改变背景色 */

color:#ffff00;                                                /* 改变文字颜色 */

}

14.CSS固定宽度布局

经典布局 小的布局用html 大的布局用CSS+DIV

CSS（层叠样式表）

   

绝对定位法

CSS（层叠样式表）

 

CSS（层叠样式表）

绝度定位 每个块都都要设置高度 不然会混乱

   

浮动法 一般用浮动法 用法灵活

浮动直接设置块元素左浮动右浮动，不一定要设置高度

CSS（层叠样式表）

15.CSS 变宽度布局

变宽布局 随着浏览器的放大缩小 网页的元素也随着 放大缩小

方法：先前的设置位置和大小都是 固定的值 要转换成 百分比设置

直接将 ?px 改成 ？%

   

相关推荐