JavaEE——CSS

最新推荐文章于 2022-11-03 21:22:30 发布

zh_Tnis

最新推荐文章于 2022-11-03 21:22:30 发布

阅读量625

点赞数

分类专栏： JavaEE

本文链接：https://blog.csdn.net/zh_tnis/article/details/102668185

版权

JavaEE 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.什么是CSS？

1、css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

2、CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

3、CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。简单的说，html是对网页的基本构架实现，那么css就是对网页进行装修。

2.如何使用CSS。

有三种方法可以在站点网页上使用样式表。

1、外联样式—link标签：将网页链接到外部样式表。

2、内联样式：应用内嵌样式到各个网页样式。

3、标签样式：在网页上创建嵌入的样式表。

3.CSS的选择器。

1、基本选择器。

----id选择器—— #idName

通过id名字的选择，在head标签中对body标签的布局进行修改。

构架展示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css的选择器-id选择器</title>
        <!--
        *   * 全部选择
        *   #id 选择id名称的标签
        -->
        <style type="text/css">
            
            * {
                border: 1px dotted red;
            }
            
            /* id选择器 */
            #box {
                width: 200px;
                height: 200px;
                background: palevioletred;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

网页显示：

----class选择器— .className

通过class名字的选择，在head标签中对body标签的布局进行修改。

构架展示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css的选择器-class选择器</title>
        <!--
        *   * 全部选择
        *   #id 选择id名称的标签
        *   .class 选择class名称的标签
        -->
        <style type="text/css">
            
            * {
                border: 1px dotted red;
            }
            
            /* id选择器 */
            #box {
                width: 200px;
                height: 200px;
                background: palevioletred;
                border-radius: 10%;
            }
            .box1 {
                background: #F05612;  /* rgb */
                border-radius: 10%;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <div class="box1"></div>
    </body>
</html>

网页显示：

----标签选择器— tagName

通过标签名字的选择，在head标签中对body标签的布局进行修改。还有的就是当类名和id名一样时，使用#idName，.className可以一块使用，优先级比单个idName或者className定义较低。

构架展示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css的选择器-tagName选择器</title>
        <!--
        *   * 全部选择
        *   #id 选择id名称的标签
        *   .class 选择class名称的标签
        *   Name 选择标签名字
        *   dotted：虚线
        -->
        <style type="text/css">
            
            * {
                border: 1px dotted red;
            }
            
            /* id选择器 */
            #box {
                width: 100px;
                height: 100px;
                background: palevioletred;
                border-radius: 10%;
            }
            .box，#box {
                width: 200px;
                height: 200px;
                background: yellow;
                border-radius: 10%;
            }
            p {
                color: rgb(255, 0, 0);
                background: rgba(0, 255, 0, .9);
            }
            
        </style>
    </head>
    <body>
        <div id="box"></div>
        <div class="box box1"></div>
        <p>这个是一个段落</p>
    </body>
</html>

网页显示：

2、包含选择器。

----子代选择器— FName>ZName

通过>符号的选择，在对父标签的下一个直接子标签进行修改。

构架展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul.news {
				border: 1px solid red;
			}
			
			/* 子代选择器*/
			.news > li {
				border: 1px solid palevioletred;
			}
			
		</style>
	</head>
	<body>
		<div class="msg">
			<ul class="news">
				<li>这个是一个列表1</li>
				<li>这个是一个列表2</li>
				<li>这个是一个列表3</li>
				<li>这个是一个列表4</li>
				<li>这个是一个列表5</li>
			</ul>
		</div>
		<div class="news">
			<ul>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
			</ul>
		</div>
	</body>
</html>

网页显示：

----后代选择器— FName ZSName

通过空格符号的选择，在对父标签的后代存在的子标签进行修改。

构架展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul.news {
				border: 1px solid red;
			}
			
			/* 子代选择器*/
			/*.news > li {
				border: 1px solid palevioletred;
			}*/
			
			 /*后代选择器 */
			.news li {
				border: 1px solid rgb(255, 0, 0);;
			}
			
		</style>
	</head>
	<body>
		<div class="msg">
			<ul class="news">
				<li>这个是一个列表1</li>
				<li>这个是一个列表2</li>
				<li>这个是一个列表3</li>
				<li>这个是一个列表4</li>
				<li>这个是一个列表5</li>
			</ul>
		</div>
		<div class="news">
			<ul>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
			</ul>
		</div>
	</body>
</html>

网页显示：

3、属性选择器。

形式1：标签[属性] ----------->存在某个属性的标签
形式2：标签[属性="值"] ----------->存在某个属性等于值的标签
形式3：标签[属性^="值的前缀"] ----------->存在某个属性等于值的前缀的标签
形式4：标签[属性&="值的后缀"] ----------->存在某个属性等于值的后缀的标签
形式5：标签[属性*="包含值的元素"] ----------->存在某个属性等于包含值的元素的标签

构架展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 存在某个属性的标签*/
			div[title] {
				border: 1px solid red;
			}
			
			/* 属性=值 */
			input[type="text"] {
				background: blue;
			}
			
			/*前缀*/
			input[type^="te"] {
				background: red;
			}
			
			
			/*后缀*/
			input[type$="word"] {
				background: yellow;
			}
			
			
			/* 包含 */
			[title*="div"] {
				background: palevioletred;
			}		

		</style>
	</head>
	<body>
		<div title="这个是div">这个是一个div</div>
		<div>这个是一个div</div>
		
		<input type="text" name="uname" id="uname" value="" title="this is good day"/>
		<br />
		<input type="password" name="uname" id="uname" value="" />
		<br />
		<input type="radio" name="uname" id="uname" value="" />
	</body>
</html>

网页显示：

4、伪类选择器。

: link 伪类向未访问的链接添加特殊的样式。
: hover 选择器用于选择鼠标指针浮动在上面的元素。
: active 选择器用于选择活动链接。
: visited 选择器用于选取已被访问的链接。
: focus 选择器用于选取获得焦点的元素。
:: placeholder 选择器用于对设置显示的字体定义颜色。

构架展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link {
				color: #999;
				text-decoration: none;  /*去除下划线*/
			}
			a:hover {
				color: red;
				/*text-decoration: underline;*/
			}
			a:active {
				color: yellow;
			}
			a:visited {
				color: #0000FF;
			}
			
			input:focus {
				background: pink;
				height: 40px;
				width: 200px;
			}
			input::placeholder {
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<input type="text" name="" id="" value="" placeholder="请输入你的内容"/>
	</body>
</html>

网页显示：