CSS（Cascading Style Sheet，层叠样式表）——第四篇（CSS高级篇）

最新推荐文章于 2022-01-03 21:39:38 发布

Galaksen

最新推荐文章于 2022-01-03 21:39:38 发布

阅读量608

点赞数

分类专栏：学习笔记文章标签： CSS

本文链接：https://blog.csdn.net/qq_41857060/article/details/89352034

版权

学习笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

1.CSS水平对齐

1、关于文本对齐

参见text-align属性

2、使用 margin 属性来水平对齐

可通过将左和右外边距设置为 "auto"，来对齐块元素（margin:atuo）
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距
如果宽度是 100%，则对齐没有效果

3、使用 position 属性进行左和右对齐

使用绝对定位:position:absolute
left:0px;//距左边（相对[具体参见绝对定位]）0px，显示为左对齐
right:0px;//显示为右对齐

4、使用 float 属性来进行左和右对齐

float:left;//左对齐
float:rigth;//右对齐

关于3、4两点的跨浏览器兼容性问题：

当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。body { margin:0; padding:0; }

2.CSS尺寸

CSS 尺寸属性允许控制元素的高度和宽度。同样，允许增加行间距。

3.CSS分类

CSS分类属性允许规定如何显示以及在哪显示元素。

1、clear:

2、cursor:http://www.w3school.com.cn/cssref/pr_class_cursor.asp

常用：

3、dispaly:http://www.w3school.com.cn/cssref/pr_class_display.asp

常用：

4、float:见第三篇

5、position:见第三篇

6、visibility:http://www.w3school.com.cn/cssref/pr_class_visibility.asp

*使用display:none和visibility:hidden的区别:

display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

4.CSS导航栏

导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素

在这里补充一句：ul的宽度，高度都默认时，是以下效果：（高度取决于li，而块元素的宽度默认占用全部可用宽度）

下面举例说明两种导航栏，这是HTML部分：

4.1 垂直导航栏

只需要定义 <a> 元素的样式

4.2 水平导航栏

有两种创建水平导航栏的方法：使用行内或浮动列表项。

如果希望链接拥有相同的尺寸，就必须使用浮动方法。

4.2.1 使用行内列表项

将 <li> 元素规定为行内元素

4.2.2 使用浮动列表项

在上面的例子中，链接的宽度是不同的。

为了让所有链接拥有相等的宽度，浮动 <li> 元素并规定 <a> 元素的宽度

5.CSS图片库

HTML部分：

<div class="img">
    <a target="_blank" href="images/pic1.jpg">
        <img src="images/pic1.jpg" alt="pic1">
    </a>
    <hr/>
    <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
    <a target="_blank" href="images/pic2.jpg">
        <img src="images/pic2.jpg" alt="pic2">
    </a>
    <hr/>
    <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
    <a target="_blank" href="images/pic3.jpg">
        <img src="images/pic3.jpg" alt="pic3">
    </a>
    <hr/>
    <div class="desc">在此处添加对图像的描述</div>
</div>

CSS部分：

body{
    margin: 0;
    padding: 0;
}
div.img
{
    margin:3px;
    border:1px solid #bebebe;/*最外面的边框*/
    height:auto;/*浏览器计算的实际高度*/
    width:auto;/*浏览器计算的实际宽度*/
    float:left;
    text-align:center;
}
div.img img
{
    display:inline;/*设置为行内元素，同行显示*/
    margin:3px;
    border:3px solid #bebebe;/*图片边框*/
    width: 400px;
    height: 300px;
}
div.img a:hover img
{
    border:3px solid #333333;/*鼠标悬浮在图片上时的边框样式*/
}
div.desc
{
    text-align:center;
    font-weight:normal;
    width:400px;
    font-size:12px;
    margin:10px 5px 10px 5px;
    background-color: cornflowerblue;/*仅为观察效果*/
}
hr{
    border:1px solid red;
}

效果如下：（点击图片后显示图片原图）

6.CSS图像透明度

1、创建透明图像

2、图像透明度- Hover效果

上图透明度为40%的图片在鼠标悬浮在上面时，变为完全不透明

3、透明框中的文本

7.CSS2媒介类型

允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等

7.1 @media规则

可在相同的样式表中，使用不同的样式规则来针对不同的媒介

@media screen/*显示器*/
{
   p{font-family:verdana,sans-serif; font-size:14px;}
}
@media print/*打印机*/
{
   p{font-family:times,serif; font-size:10px;}
}
@media screen,print
{
   p{font-weight:bold;}
}
上述样式：
告知浏览器在显示器上显示14像素的Verdana字体；但是假如页面需要被打印，将使用10个像素的Times字体。不论显示器还是纸媒介，font-weight都被设置为粗体