java学习笔记 - web基础二（css）

执笔2022-11-302024-06-10

介绍

CSS 是「层叠样式表单」
是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

语法

css语法规则

选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）
属性 (property) ：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并

由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开，一般每行只描述一个属性

css和html结合使用方式

在标签属性上设置

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

1	<div style="border: 1px solid red;">div 标签 1</div>

在head标签中使用style标签定义

<!--格式 -->
xxx {
Key : value value;
}

<!--案例 -->
<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 >标签1</div>
    <span >标签1</span>
</body>

link标签引入css文件（推荐使用）

css文件：

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

html文件：

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

css选择器

标签名选择器

可以决定哪些标签被动的使用这个样式

格式

1
2
3

标签名{
	属性：值;
}

<body>		
	<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>	
	<!-- 
	需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
	并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>

id选择器

可以通过id属性值选择性的去使用这个样式

格式

1
2
3

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

<body>
	<style type="text/css">
		#id001{
			color: blue;
			font-size: 30px;
			border: 1px yellow solid ;
		}
		#id002{
			color: red;
			font-size: 20px;
			border: 5px dotted blue;
		}
	</style>	
	<!-- 
	需求1：分别定义两个 div 标签，
	第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
	字体大小30个像素。边框为1像素黄色实线。
	
	第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。
	边框为5像素蓝色点线。
	 -->	
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>	
</body>

class选择器（类选择器）

通过 class 属性有效的选择性地去使用这个样式
class的命名不能为纯数字

格式

1
2
3

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

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

组合选择器

器可以让多个选择器共用同一个 css 样式代码

格式

1
2
3

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

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

常用样式

字体颜色

颜色可以写颜色名如：black, blue, red, green
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

1	color: red;

宽度

宽度可以写像素值：19px
也可以写百分比值：20%

1	width: 19px;

高度

高度可以写像素值：19px
也可以写百分比值：20%

1	hright:19px;

背景颜色

1	background-color:#ffffff

字体样式

1 2	color: #FFFFFF; /字体颜色/ font_size: 20px; /字体大小/

边框

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

DIV居中（相对于页面）

1 2	margin-left: auto; /自动/ margin-right: auto; /自动/

文本居中

1	text-align: center;

超链接去下划线

1	text-decoration: none;

表格细线

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

列表去除修饰

1
2
3

ul {
	list-style: none;
}