CSS详解

最新推荐文章于 2022-10-17 15:41:24 发布

MardenSSS

最新推荐文章于 2022-10-17 15:41:24 发布

阅读量569

点赞数

分类专栏： JavaWeb 文章标签： CSS

本文链接：https://blog.csdn.net/m0_37671741/article/details/100555908

版权

JavaWeb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

CSS概述

CSS：Cascading Style Sheet，意思是层叠样式表，其依赖于HTML。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

通常使用DIV+CSS进行网页布局。

CSS优势

HTML的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

CSS结构

语法格式：

选择器{
    属性名: 属性值;
    属性名: 属性值;
}

我们写css的地方是style标签，就是“样式”的意思，写在head里面。后面的部分我们将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面。

结构示意图如下：

CSS与HTML结合的三种方式

行内样式表：在某个特定的标签里采用style属性。范围只针对此标签。
内嵌样式表：在页面的head里采用<style>标签。范围针对此页面。
外部样式表：采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

1.行内样式表

采用style属性，范围只针对此标签使用，该方法比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改

<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>

2.内嵌样式表

在head标签中加入style标签，对多个标签进行统一修改，范围针对此页面。该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

<style type="text/css">
    p{
        font-weight: bold;
        font-style: italic;
        color: red;
    }

</style>



 <body>
    <p>洗白白</p>
    <p style="color:blue">你懂得</p>
 </body>

3.外部样式表

采用link标签l引入外部声明的CSS文件，此声明相当于调用，解决了不同网页间样式重复使用的问题，一次声明，随处使用

<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

CSS的四种基本选择器

CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用

1.标签选择器

作用：会将当前网页内的所有该标签增加相同的样式

结构：

标签名{
    样式名1：样式值1；
    样式名2：样式值2；
    ......
}

示例：

p{
    font-size:14px;
}

上述示例意思是所有的<p>标签里的内容都将显示14号字体。

2.ID选择器

作用：给某个指定的标签添加指定的样式

注意：任何的HTML标签都可以有id属性，HTML页面，不能出现相同的id，哪怕他们不是一个类型。

结构：

#标签的id属性值{
    样式名1：样式值1；
    样式名2：样式值2；
    ......
}

示例：

<style>
	#aa{
	color: red;
	}
</style>

<h1 id="aa">我是中国人</h1>

上述示例意思是id为“aa”的标签，字体颜色设置为红色。

3.类选择器

作用：给不同的标签添加相同的样式

注意：和id非常相似，任何的标签都可以携带id属性和class属性。类选择器可以被多种标签使用。同一个标签可以使用多个类选择器。用空格隔开。

示例：同一个标签使用两个类选择器

<h3 class="teshu  zhongyao">我是一个h3啊</h3>

结构：

.类选择器{
    样式名1：样式值1；
    样式名2：样式值2；
    ......
}

示例：

<style>
	.aa{
	color: red;
	}
</style>

<h1 class="aa">我是中国人</h1>

上述示例意思是class为“aa”的标签，字体颜色设置为红色。

注意：class属性尽量交给CSS使用，id属性尽量交给JS使用。

4.通用选择器

作用：选择所有HTML标签，并添加相同的样式

结构：

*{
    样式名1：样式值1；
    样式名2：样式值2；
    ......
}

示例：

<style>
	*{
	color: red;
	}
</style>

<h1 >我是中国人</h1>

上述示例意思是针对所有标签，字体颜色设置为红色。

CSS的高级选择器

高级选择器：

子标签选择器：用空格隔开
组合选择器：用逗号隔开
属性选择器：标签名[属性名=属性值]

1.后代选择器

后代选择器，描述的是一种祖先结构。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

结构：

选择器，子标签选择器，下一层子标签选择器...{
    样式名1：样式值1；
    样式名2：样式值2；
    ......
}

示例：

<style>
	div p{
	color: red;
	}
</style>

<div >
	<h1>哈哈哈</h1>
	<p>嘿嘿嘿</p>
</div>

上述示例意思是针对div标签下的子标签p，将该路径下的字体颜色设置为红色。

2.组合选择器

作用：解决不同的选择器之间重复样式的问题，三种基本选择器都可以放进来，需要用逗号隔开

结构：

选择器1，选择器2，选择器3...{
    样式名1：样式值1；
    样式名2：样式值2；
    ......
}

示例：

<style>
	h1,p{
	color: red;
	}
</style>

<h1>哈哈哈</h1>
<p>啊啊啊</p>

上述示例意思是将h1标签选择器和p标签选择器的字体颜色设置为红色。

3.属性选择器

作用：选择某标签指定具备某属性并且属性值为某属性值的标签

标签名[属性名=属性值]{
    样式名1：样式值1；
    样式名2：样式值2；
    ......
}

示例：

<style>
	input[type=text]{
	background-color: red;
	}
</style>

<input type="text" />
<input type="password" />

上述示例意思是将input标签下，属性type为text的标签背景颜色设置为红色。

CSS的伪类（伪类选择器）

伪类用于设置同一个元素在不同状态下的样式。伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。

伪类用冒号来表示。

常用伪类：

：link-----------------向未被访问的超链接添加样式
：visited-------------向已被访问的超链接添加样式
：active--------------当鼠标点击标签，但是不松手时，向该元素添加样式
：hover--------------当鼠标悬停至元素上方时，向该元素添加样式
：focus--------------当元素获取焦点时，向该元素添加样式（比如某个输入框获得焦点）

使用伪类选择器效果图如下：

伪类选择器：根据元素的状态选择元素

1.：link

示例：本示例对超链接的不同状态，显示不同的效果。未被访问过的超链接显示为红色，已被访问过的链接显示为绿色。

<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<style>
			a:link{
				color: red;
			}
			a:visited{
				color:green
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" >百度一下</a><br />
		<a href="http://www.taobao.com" >淘宝</a><br />
		<a href="http://www.jd.com" >京东</a><br />
		<a href="http://www.cnm.com" >cnm</a><br />
	</body>
</html>

2.：visited

示例：本示例对超链接的不同状态，显示不同的效果。未被访问过的超链接显示为红色，已被访问过的链接显示为绿色。

<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<style>
			a:link{
				color: red;
			}
			a:visited{
				color:green
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" >百度一下</a><br />
		<a href="http://www.taobao.com" >淘宝</a><br />
		<a href="http://www.jd.com" >京东</a><br />
		<a href="http://www.cnm.com" >cnm</a><br />
	</body>
</html>

3.：active

示例：本示例对按钮的不同状态显示不同的效果，当鼠标为点击时，按钮背景色显示为绿色，当鼠标点击且不松手时，显示为棕色。

<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<style>
		input[type=button]{
			background-color: greenyellow;
		}
		input[type=button]:active{
			background-color: brown;
		}
		</style>
	</head>
	<body>
	 <input type="button" value="hello"/>
	</body>
</html>

4.：hover

示例：本示例对超链接的不同状态显示不同的效果，当鼠标未悬停时，超链接显示为默认黑色，当鼠标悬停时，超链接显示为红色。

<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<style>
			a:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="www.baidu.com" >百度一下</a><br />
		<a href="www.taobao.com" >淘宝</a><br />
		<a href="www.jd.com" >京东</a><br />
	</body>
</html>

5.：focus

示例：本示例对文本框的不同状态显示不同的效果，当未激活文本框时，文本框背景显示为绿色，当文本框被激活时，背景显示为紫色。

<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<style>
			input[type]{
				background-color: greenyellow;
			}
			input[type]:focus{
				background-color: blueviolet;
			}
		</style>
	</head>
	<body>
		<input type="text" />
	</body>
</html>

CSS盒子模型

概述

盒子模型，英文即box model。无论是div，span，还是a都是盒子。可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒子模型。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

结构

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

两种盒子模型：标准盒子模型和IE盒子模型

IE模型和标准模型唯一的区别是内容计算方式的不同

标准盒子模型width=content，高度计算相同。

IE盒子模型width=content+padding

注意：我们目前所学习的知识中，以标准盒子模型为准。使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。

CSS定位属性

文档流：简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline），不独占一行。只要不是float和绝对定位方式布局的，都在文档流里面。

postion属性：

position 属性自 CSS2 起就有了，该属性规定元素的定位类型。所有主流浏览器都支持 position 属性。

CSS的定位属性有三种，分别是相对定位、绝对定位、固定定位。

 position: relative;  <!-- 相对定位 --> 
  
 position: absolute;  <!-- 绝对定位 -->
  
 position: fixed;     <!-- 固定定位 -->

相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。

语法：

 position: relative;   //相对定位：相对于自己原来的位置
 left: 50px;    //横坐标：正值表示向右移动，负值表示向做移动
 top: 50px;     //纵坐标：正值表示向下移动，负值表示向上移动

相对定位的定位值

left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移

PS：负数表示相反的方向。

示例：

<style>
       .div2{
         position: relative;
         left: 200px;
         top: 100px;
       }
</style>

<div class="div2">狭路相逢</div>

上述示例的意思是将div2标签相对于原来的位置，向右移动50px，向下移动50px。示意图如下：

绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。

绝对定位的元素使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父元素进行绝对定位。如果不存在这样的父元素，则相对于 body 元素，即相对于浏览器窗口。

绝对定位与相对定位的一大不同之处就是，当我们把一个元素设置成绝对定位，那么这个元素将会脱离文档流，其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。

绝对定位的参考点（重要）

（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角：

（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角：

首屏：可见屏幕上的窗口大小为首屏。

“首屏”示意图如下所示：永远针对可见屏幕的窗口大小。

以盒子为参考点

一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。如下：（子绝父相）

以下几点需要注意。

（1）要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：

        <div class="box1">        相对定位
            <div class="box2">    没有定位
                <p></p>           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
            </div>
        </div>

再比如：

        <div class="box1">        相对定位
            <div class="box2">    相对定位
                <p></p>           绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
            </div>
        </div>

（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。

工程应用：

“子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：

父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。

（3）绝对定位的儿子，无视参考的那个盒子的padding：

下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么，
p将无视父亲的padding，在border内侧为参考点，进行定位：

固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

用途1：网页右下角的“返回到顶部”

比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。

<style type="text/css">
    .backtop{
         position: fixed;
         bottom: 100px;
         right: 30px;
         width: 60px;
         height: 60px;
         background-color: gray;
         text-align: center;
         line-height:30px;
         color:white;
         text-decoration: none;   /*去掉超链接的下划线*/
       }
 </style>

用途2：顶部导航条

我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。

需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。

    <style type="text/css">
        .backtop{
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 60px;
            height: 60px;
            background-color: gray;
            text-align: center;
            line-height:30px;
            color:white;
            text-decoration: none;   /*去掉超链接的下划线*/
        }
    </style>
用途2：顶部导航条

我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。

需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。

顶部导航条的实现如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
body{
            /*为什么要写这个？*/
            /*不希望我们的页面被nav挡住*/
            padding-top: 60px;
            /*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
            _padding-top:0;
        }
        .nav{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: #333;
            z-index: 99999999;
        }
        .inner_c{
            width: 1000px;
            height: 60px;
            margin: 0 auto;

        }
        .inner_c ul{
            list-style: none;
        }
        .inner_c ul li{
            float: left;
            width: 100px;
            height: 60px;
            text-align: center;
            line-height: 60px;
        }
        .inner_c ul li a{
            display: block;
            width: 100px;
            height: 60px;
            color:white;
            text-decoration: none;
        }
        .inner_c ul li a:hover{
            background-color: gold;
        }
        p{
            font-size: 30px;
        }
        .btn{
            display: block;
            width: 120px;
            height: 30px;
            background-color: orange;
            position: relative;
            top: 2px;
            left: 1px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="inner_c">
            <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>
                <li><a href="#">网页栏目</a></li>
                <li><a href="#">网页栏目</a></li>
                <li><a href="#">网页栏目</a></li>
                <li><a href="#">网页栏目</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS的z-index属性

z-index属性：表示谁压着谁。数值大的压盖住数值小的。

有如下特性：

（1）属性值大的位于上层，属性值小的位于下层。

（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。

（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。

（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。

使用CSS的流程

1.声明CSS代码域

2.使用选择器选择要添加样式的标签（一般使用通用选择器来给整个页面添加基础样式，使用类选择器给不同的标签添加基础样式，使用标签选择器给某类标签添加基础样式，使用id，属性选择器，style属性声明方式给某个标签添加个性化样式）

3.书写样式单

边框设置 border:solid 1px;

字体设置 font-size:10px; font-family:"黑体"; font-weight:bold;

字体颜色设置 color:red;

背景颜色设置 background-color:red;

背景图片设置 backgrouond-img:url(图片的相对路径); background-repeate:no-repate; background-size:cover;

高和宽设置 width:10; height:10;

浮动设置 float:left|right;

行高设置 line-height:10;

参考链接：

https://www.cnblogs.com/qianguyihao/p/4853995.html

https://www.cnblogs.com/qianguyihao/p/4855106.html

https://www.cnblogs.com/qianguyihao/p/7253929.html

https://www.cnblogs.com/qianguyihao/p/7256371.html

https://www.cnblogs.com/qianguyihao/p/7297736.html

https://www.cnblogs.com/qianguyihao/p/8277895.html

https://www.cnblogs.com/qianguyihao/p/8280814.html

https://www.cnblogs.com/qianguyihao/p/8296748.html

https://www.cnblogs.com/qianguyihao/p/8426799.html

https://www.cnblogs.com/qianguyihao/p/8430898.html

https://www.cnblogs.com/qianguyihao/p/8435182.html

https://www.cnblogs.com/qianguyihao/p/8476602.html

https://www.cnblogs.com/qianguyihao/p/8512617.html

MardenSSS

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS详解

CSS概述CSS：Cascading Style Sheet，意思是层叠样式表，其依赖于HTML。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。通常使用DIV+CSS进行网页布局。CSS优势HTML的缺陷：不能够适应多种设备要求浏览器必须智能化足够庞大数据和显示没有分开功能不够强大...
复制链接

扫一扫