CSS样式表详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49344258/article/details/108802792

一、CSS 的概述

CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一。

二、CSS解决了什么问题

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

三、css的基础语言以及页面的引用

CSS 的基本语法

Css 的定义方法是: 选择器 { 属性: 值 ; 属性: 值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

div{ width:100px; height:100px; color:red }

css页面的引入方法

1.行内样式/内联样式：通过标签的 style 属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red "> </div>

2．内嵌样式：通过 style 标签在网页上创建嵌入的样式。

<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>

3．外联样式：通过 link 标签，链接到外部样式表到页面中。

<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>

四、css文本及字体、链接、背景

1.css文本及字体设计

常用的应用文本的css样式：

Ø color 设置文字的颜色，如： color:red;

Ø font-size 设置文字的大小，如：font-size:12px;

Ø font-family 设置文字的字体，如：font-family:'微软雅黑';

Ø font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜

Ø font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

Ø font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px '微软雅黑';

Ø line-height 设置文字的行高，如：line-height:24px;

Ø text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

Ø text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

Ø text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .continer{
                width: 300px;
                height: 300px;
                /*设置边框*/
                border: 1px solid red;
                /*设置文本*/
                /*font: normal 20px/30px "仿宋";*/
                font-family: "仿宋";
                font-size: 20px;
                /*设置字体是否加粗*/
                font-weight: normal;
                /*设置行高(每一行的高度都为50px)*/
                /*line-height: 50px;*/
                /*如果只有一行内容,则可设置垂直居中 显示 且高度和元素高度一致*/
                /*line-height: 300px;*/
                /*设置元素水平居中显示*/
                /*text-align: center;*/
                /*设置文本颜色*/
                color: orange;
                /*设置文本缩进*/
                /*text-indent: 50px;*/
            }
            a{
                /*设置文本的上下划线是否显示  以下设置不显示*/
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            学的不仅是技术更是<a href="#">梦想</a>,在牛逼的梦想也抵不住你傻逼似的坚持.
        </div>
    </body>
</html>

2.背景设计

属性解释： background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

Ø background-color 设置背景颜色

Ø background-image 设置背景图片地址

Ø background-repeat 设置背景图片如何重复平铺

Ø background-position 设置背景图片的位置

Ø background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

实例代码 ：

下面这些例子使用下面这张图片做为背景图：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例代码_02</title>
        <style type="text/css">
            .continer{
                width: 1000px;
                height: 600px;
                border: 2px solid black;
                /*1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。*/
                /*background: url(../img/logo1.png);*/
                /*2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。*/
                /*background:cyan url(../img/logo1.png) repeat-x;*/
                /*3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。*/
                /*background:cyan url(../img/logo1.png) repeat-y;*/
                /*4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。*/
                /*background:cyan url(../img/logo1.png) no-repeat;*/
                /*5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。*/
                /*background:cyan url(../img/logo1.png) no-repeat left center;*/
                /*6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。*/
                background:cyan url(../img/logo1.png) no-repeat right center;
            }
        </style>
    </head>
    <body>
        <div class="continer"></div>
    </body>
</html>

五、块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

1．**块元素**

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、

dt、dd 等等都是块元素，它在布局中的行为：

支持全部的样式

如果没有设置宽度，默认的宽度为父级宽度 100% 盒子占据一行、即使设置了宽度同样也是父级宽度100%。

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

**1．****块元素**

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、

dt、dd 等等都是块元素，它在布局中的行为：

支持全部的样式

如果没有设置宽度，默认的宽度为父级宽度 100% 盒子占据一行、即使设置了宽度同样也是父级宽度100%。

2．**内联元素**

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、

i 等等都是内联元素，它们在布局中的行为：

Ø 支持部分样式（不支持宽、高、margin上下、padding 上下）

Ø 宽高由内容决定

Ø 盒子并在一行

Ø 代码换行，盒子之间会产生间距

Ø 子元素是内联元素，父元素可以用text-align 属性设置子元素水平对齐方式，用line-height 属性值设置垂直对齐方式

解决内联元素间隙的方法

1、去掉内联元素之间的换行

2、将内联元素的父级设置 font-size 为 0，内联元素自身再设置 font-size

实例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例代码_12</title>
        <style type="text/css">
            a{
                background: pink;
                width: 200px;
                height: 200px;
                border: 2px solid red;
            }
            span{
                /*元素span设置宽高失效,因为是内联元素*/
                width: 300px;
                height: 300px;
                background: orange;
            }
        </style>
    </head>
    <body
style="font-size: 0px;">
        <!--内联元素并在文档流的一行显示,不会独占一行. 并且设置宽高不起作用-->
        <!--重点: 内联元素 之间的缝隙问题?
        解决方案:
        (1)取消内联元素的之间的换行:  如下显示-->
        <!--<a href="http://www.yltedu.com">英莱特科技</a><span>span标签也是内联元素,设置宽高失效</span>-->
        <!--(2)给其父元素添加font-size:0px  就可解决 缝隙问题  但是要给其单独设置字体样式-->
        <a href="http://www.yltedu.com"
style="font: normal 20px 仿宋;">英莱特科技</a>
        <span style="font: normal 20px 仿宋;">span标签也是内联元素,设置宽高失效</span>
    </body>
</html>

3．**内联块元素**

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img 和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用 display 属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

Ø 支持全部样式

Ø 如果没有设置宽高，宽高由内容决定

Ø 盒子并在一行

Ø 代码换行，盒子会产生间距

子元素是内联块元素，父元素可以用 text-align 属性设置子元素水平对齐方式，用 line-height 属性值设置子元素垂直对齐方式

这三种元素，可以通过 display 属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

display 属性

display 属性是用来设置元素的类型及隐藏的，常用的属性有：

1、none 元素隐藏且不占位置

2、block 元素以块元素显示

3、inline 元素以内联元素显示

4、inline-block 元素以内联块元素显示

实例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例代码_13</title>
        <style type="text/css">
            /*实现将内联元素a转换为块元素以及行内块元素*/
            a{
                width: 180px;
                height: 30px;
                background: orangered;
                color: black;
                text-decoration: none;
                /*(1)使用display:block转换为块元素*/
                /*display: block;*/
                /*(2)使用display:inline-block转换为行内块元素*/
                /*display: inline-block;*/
            }
            /*ul和li都是块元素: 所以占据一行显示*/
            ul li{
                list-style: none;
                border: 1px solid cornflowerblue;
                width: 100px;
                height: 30px;
                /*使用display:inline-block转换为内联块元素*/
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <!--内联元素a-->
        <a href="http://www.yltedu.com">点击进入英莱特官方网站(1)</a>
        <a href="http://www.yltedu.com">点击进入英莱特官方网站(2)</a>
        <!--块元素h1~h6/ p  / ul和li等-->
        <ul>
            <li><a href="#">网站导航</a></li>
            <li><a href="#">课程分类</a></li>
            <li><a href="#">实战项目</a></li>
            <li><a href="#">名师讲堂</a></li>
            <li><a href="#">师资团队</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </body>
</html>

实例图片的切换：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.aa1{
				width: 600px;
				height: 500px;
				border:1px solid greenyellow;
			}
			img{
				width: 600px;
				height: 500px;
			}	
			.a2{/*设置图片宽高与div层一致，且隐藏超出div层的图片*/
				width: 600px;
				height: 500px;
				position: relative;
				overflow: hidden;	
			}
			ul{
				list-style: none;	
			}
			li{/*设置li元素取消前面的圆点样式，并且横向排列，并设置横向间距*/
				list-style-type: none;
				display: inline;
				margin: 0 50px;
			}
			a{/*取消A标签下划线*/
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="aa1">
		<ul class="a1">
			<li><a href="#i1">1</a></li>
			<li><a href="#i2">2</a></li>
			<li><a href="#i3">3</a></li>
			<li><a href="#i4">4</a></li>
		</ul>
		
		<div class="a2">
			<img src="D:\我的图片\lovewallpaper\20741-106.jpg" id="i1">
			<img src="D:\我的图片\lovewallpaper\37317-106.jpg" id="i2">
			<img src="D:\我的图片\lovewallpaper\283629-106.jpg" id="i3">
			<img src="D:\我的图片\lovewallpaper\332333-106.jpg" id="i4">
		</div>
		</div>
	</body>
</html>