JavaWeb学习总结之CSS

最新推荐文章于 2024-07-18 17:34:14 发布

weixin_44077225

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量218

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_44077225/article/details/106085605

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.CSS技术介绍：
CSS是「层蠱样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
2.CSS的语法规则：
在这里插入图片描述 选择器: 浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)。
属性(property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明(declaration) ，例如: p {color: blue}
多个声明: 如果要定义不止-一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)
3.Css和HTML的结合方式
3.1第一种在标签的style属性上设置"key:value value;",修改标签样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。-->
    <div style="border: 1px solid red;">div标签1</div>
    <div style="border: 1px solid red;">div标签2</div>
    <span style="border: 1px solid red;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>
</html>

问题:这种方式的缺点?
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css代码没什么复用性可方言。
3.2：第二种：
在head标签中，使用style标签来定义各种自己需要的css 样式。
格式如下:
xxx {
Key : value value;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        /* 需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

问题:这种方式的缺点。
1.只能在同一页面内复用代码，不能在多个页面中复用css代码。
2.维护起来不方便，实际的项目中会有成千，上万的页面,要到每个页面中去修改。工作量太大了。
3.3第三种:
把css样式写成-一个单独的css文件,再通过link 标签引入即可复用。
使用html的标签导入css样
式文件。
CSS代码

div{
     border: 1px solid yellow;
 }
span{
    border: 1px solid red;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1.css"/>

</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

4、CSS选择器
4.1、标签名选择器
标签名选择器的格式是:
标签名{
属性:值;
}
标签名选择器，可以决定哪些标签被动的使用这个样式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
			border: 1px solid yellow;
			color: blue;
			font-size: 30px;
		}
		span{
			border: 5px dashed  blue;
			color: yellow;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<!-- 
	需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
	并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>
</html>

4.2 id 选择器
id选择器的格式是: .
#id属性值{
属性:值;
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。，

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style type="text/css">

		#id001{
			color: blue;
			font-size: 30px;
			border: 1px yellow solid;
		}

		#id002{
			color: red;
			font-size: 20px;
			border: 5px blue dotted ;
		}

	</style>
</head>
<body>		
	<!--
	需求1：分别定义两个 div 标签，
	第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
	字体大小30个像素。边框为1像素黄色实线。
	
	第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。
	边框为5像素蓝色点线。
	 -->
	
	<div id="id002">div标签1</div>
	<div id="id001">div标签2</div>
</body>
</html>

4.3、class 选择器(类选择器)
class类型选择器的格式是:
.class属性值{
属性:值;
}
class
;类型选择露,可以通过class属性有效的选择性地去使用这个样式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>class类型选择器</title>
	<style type="text/css">
		.class01{
			color: blue;
			font-size: 30px;
			border: 1px solid yellow;
		}

		.class02{
			color: grey;
			font-size: 26px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<!--
		需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
	 -->

	<div class="class02">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class02">span标签class01</span>
	<span>span标签2</span>
</body>
</html>

4.4、组合选择器
组合选择器的格式是:
选择器1,选择器2,选择器n{
属性:值;
}
组合选择器可以让多个选择器共用同一个css样式代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class类型选择器</title>
    <style type="text/css">
        .class01 , #id01{
            color: blue;
            font-size: 20px;
            border:  yellow 1px solid;
        }
    </style>
</head>
<body>
	<!-- 
	需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
	字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
	 -->
   <div id="id01">div标签class01</div> <br />
   <span>span 标签</span>  <br />
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />
</body>
</html>

5、常用样式:
1、颜色
color: red;
颜色可以写颜色名如: black, blue, red, green等
颜色也可以写rgb值和十六进制表示值:如rgb(255,0,0)，#00F6DE，如果写十六进制值必
须加#

2、宽度
width:19px;
宽度可以写像素值: 19px;
也可以写百分比值: 20%;

3、高度
height:20px;
高度可以写像素值: 19px;
也可以写百分比值: 20%;

4、背景颜色
background-color:#0F2D4C

4、字体样式:
color: #FO00O; 字体颜色红色
font-size: 20px; 字体大小

5、红色1像素实线边框
border: 1px solid red;

7、DIV居中
margin-left: auto;
margin-right: auto;

8、文本居中:
text-align: center;

9、超连接去下划线
text-decoration: none;

10、表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/
}
td,th {
border: 1px solid black; /设置边框/

11、列表去除修饰
ul{
list-style: none;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>06-css常用样式.html</title>
    <style type="text/css">

        div{
            color: red;
            border: 1px yellow solid;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 30px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        table{
            border: 1px red solid;
            border-collapse: collapse;
        }

        td{
            border: 1px red solid;
        }

        a{
            text-decoration: none;

        }

        ul{
            list-style: none;
        }

    </style>
</head>
<body>
    <ul>
        <li>11111111111</li>
        <li>11111111111</li>
        <li>11111111111</li>
        <li>11111111111</li>
        <li>11111111111</li>
    </ul>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
    <a href="http://www.baidu.com">百度</a>
    <div>我是div标签</div>
</body>
</html>

weixin_44077225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习总结之CSS

1.CSS技术介绍：CSS是「层蠱样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。2.CSS的语法规则：选择器: 浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)。属性(property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明(declaration) ，例如: p {color: blue}多个声明: 如果要定义不止-一个声明，则需要用分号将每个声明分开。虽然最后一条声明
复制链接

扫一扫