• 【JavaWeb】第二章 CSS

    文章目录

    1、CSS

    CSS全称Cascading Style Sheets，层叠样式表。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

    2、语法规则

    在这里插入图片描述

    • 选择器：
      浏览器根据“选择器”来决定受影响的HMTL元素（标签）
    • 属性：
      要改变的样式名，并且每个属性都有一个值，属性和值用冒号分开，且由花括号包围，这样就是一个完整的样式声明（declaration），如：
    p{color:blue}

    • 1
    • 多个声明：
      多个声明之间用分号分开，最后一条声明可以不加分号，一般每行只描述一个属性。如：
    p{
	color:red;
	font-size:30px;
}

    • 1
    • 2
    • 3
    • 4
    CSS注释：
/*这是一条CSS注释*/

    • 1
    • 2

    3、CSS与HTML的结合方式

    3.1 第一种结合

    在标签的style属性上设置"key:value value;"修改标签样式

    <!--分别定义两个div和span标签,样式为边框1像素，实线，红色-->

<div style="border:1px solid red">div标签1</div>
<div style="border:1px solid red">div标签2</div>
<span style="borde:1px solid red">span标签1</span>
<span style="borde:1px solid red">span标签2</span>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行效果：
    在这里插入图片描述
    缺点：

    • 如果标签多了，或者需要设置的样式多了，代码量非常庞大
    • 可读性很差
    • CSS代码没什么复用性可言

    3.2 第二种结合

    在head标签中，使用style标签来定义各种自己需要的CSS样式，格式为：

    xxx{
	key: value value;
}

    • 1
    • 2
    • 3

    还是3.1中的题目要求，现在使用第二种结合来完成;

    

	
	CSS
 	


	
    div标签1
    
	
    div标签2
    
	span标签1
	span标签2



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    缺点：

    • 只能在同一个页面内复用代码，不能在多个页面中复用CSS代码
    • 维护起来不方便，实际的项目中有成千上万的页面，要到每个页面上去修改，工作量太大

    3.3 第三种结合

    把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用。link标签专门用来引入CSS样式代码

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

    • 1

    使用第三种结合方式，我们先新建一个css文件1.css

    div{
	border:1px solid red;
}

span{
	border:1px solid red;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    <head>
	<link rel="stylesheet" type="text/css" href="1.css" />
</head>

    • 1
    • 2
    • 3

    4、CSS选择器–标签名选择器

    标签名选择器可以决定哪些标签被动的选择使用这个样式。标签名选择器的格式是：

    标签名{
	属性：值；
}

    • 1
    • 2
    • 3

    举例：

    <!--需求：修改所有的div标签中字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线-->
<!--span标签的字体颜色为黄色，字体大小20像素，边框为5像素蓝色虚线-->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS-2</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>
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    运行效果：
    在这里插入图片描述

    5、CSS选择器–id选择器

    id选择器可以让我们通过id属性选择性的去使用这个样式，id选择器的格式是：

    #id 属性值{
	属性：值；
}

    • 1
    • 2
    • 3

    举例： 分别定义两个div标签

    （1）第一个div标签定义id为id001，然后根据id属性定义CSS样式修改字体颜色为蓝色，字体大小30像素，边框为1像素黄色实线

    （2）第二个div标签定义id为id002，然后根据id属性定义CSS样式修改字体颜色为红色，字体大小20像素，边框为5像素蓝色点线

    <!--id选择器的定义-->

<style type="text/css">
	#id001{
		color: blue;
		font-size: 30px;
		border: 1px yellow solid;
	}
	#id002{
		color: red;
		font-size: 30px;
		border: 5px blue dotted;
	}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    <!--id选择器的使用,需要的标签加id属性-->
<!--有种定义方法，再调用方法的味儿-->

<body>
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>
<\body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行效果：
    在这里插入图片描述

    6、CSS选择器–class选择器

    class选择器，即class类型选择器，可以通过class属性有效的选择性地去使用这个样式。class选择器的语法格式是：

    .class 属性值{
	属性：值；
}

    • 1
    • 2
    • 3

    举例：

    （1）修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30像素，边框为1像素黄色实线

    （2）修改class属性值为class01的div标签字体，颜色为灰色，字体大小26像素，边框为1像素红色实线

    <!--class选择器的定义-->

<style type="text/css">
	.class01{
		color: blue;
		font-size: 30px;
		border: 1px yellow solid;
	}
	.class02{
		color: grey;
		font-size: 26px;
		border: 1px red solid;
	}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    <!--id选择器的使用,需要的标签加id属性-->

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行效果：
    在这里插入图片描述

    7、CSS选择器–组合选择器

    组合选择器可以让多个选择器共用同一个CSS样式代码，组合选择器的格式是：

    选择器1，选择器2，选择器n{
	属性：值；
}

    • 1
    • 2
    • 3

    举例：

    .class03,#id03{
	color: blue;
	font-size: 30px;
	border: 1px yellow solid;
}

    • 1
    • 2
    • 3
    • 4
    • 5

    如此，类选择器class03和id选择器id03就共用了这几行样式代码，至于使用的时候，仍然和之前一样，在相应的标签中加属性class="xx"或者id="xx"即可

    8、CSS常用样式

    • 字体大小
      font-size: 20px

    • 字体颜色
      color: red;颜色可以写颜色名如black、blue、green，也可以写rgb值和十六进制表示值，如rgb(255,0,0)，#00FDE

    • 背景颜色
      background-color: red；属性值写法和上面的颜色一样

    • 宽度
      width: 19px;宽度可以写像素值如19px，也可以写百分比如20%

    • 高度
      height: 20px;高度可以写像素值如19px，也可以写百分比如20%

    • 边框
      border: 1px solid red; 即红色1像素实现边框

    • DIV居中
      margin-left: auto;
      margin-right: auto;

    • 文本居中
      text-align: center;

    • 超链接去下划线
      text-decoration: none;

    • 表格细线

    table{
	/*设置边框*/
	border: 1px solid red;
	/*将边框合并*/
	border-collapse: collapse;
}
td,th{
	/*设置边框*/
	border: 1px solid red;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述
    加上border-collapse以后，上面的边框合并成一条。

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

    • 1
    • 2
    • 3

    小练习：

    DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小练习title>
	<style>
		body {
			background-color:#d0e4fe;
		}
		h1 {
			color:orange;
			text-align:center;
		}
		p {
			font-family:"Times New Roman";
			font-size:20px;
		}
		#id9527{
			text-decoration: none;
		}	
	style>
head>

<body>

	<h1>CSS 实例!h1>
	<p>这是一个段落。p>
	<a href="www.baidu.com" id="id9527">百度a>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    【===================================================】

    🍁CSS属性参考手册
    🍁CSS颜色参考手册
    🍁CSS选择器参考手册

  • 相关阅读:
    [源码解析] NVIDIA HugeCTR，GPU版本参数服务器---(3)
    【网络协议】聊聊网络分层
    环境数据监测在环保物联网有什么价值？
    Gateway-02-gateway路由规则和过滤器
    基于C51实现数码管的显示
    PCIe（二）——TLP包构成
    九月 Web3 游戏报告：数量增长，巨头入场，用户获取和留存仍存挑战
    Redis 内存满了怎么办？这样置才正确！
    import关键字的使用
    excel高级绘图技巧100讲（二十二）-如何对不规则数据进行分列
  • 原文地址：https://blog.csdn.net/llg___/article/details/127668330