HTML-学习笔记02

HTML

13、样式器+标签选择器

内部样式表

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内部样式表 -->
		<style>
			/* 标签选择器 */
			h1 {
				width: 960px;
				height: 40px;
				margin: 0 auto;
			}
			/* 类选择器 */	
			.a {
				background-color: red;
			}
			.b {
				background-color: orange;
			}
			.c {
				background-color: yellow;
			}
			.d {
				background-color: green;
			}
			.e {
				background-color: cyan;
			}
			.f {
				background-color: blue;
			}
			.g {
				background-color: purple;
			}
			/* 文本类*/
			.h {
				color: blue;
				text-align: center;
				width: 100px;
				height: 38px;
				overflow: hidden;
			}
			.big{
				font-size: 32px;
			}
			.normal{
				font-size: 24px;
			}
			.small{
				font-size: 12px;
			}
			/* ID 选择器，不同的ID使用相同属性，逗号隔开*/
			/* ID 选择器只给唯一的ID值使用*/
			#header,#footer{
				width: 800px;
				height: 120px;
				border: 1px solid red;
				margin: 10px auto;
			}
			/*通配符选择器*/
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id='header'>勇往直前</div>
		<h1 class="a"></h1>
		<h1 class="b"></h1>
		<h1 class="c"></h1>
		<h1 class="d"></h1>
		<h1 class="e"></h1>
		<h1 class="f"></h1>
		<h1 class="g"></h1>
		<p class="c h big">相信自己</p>
		<!-- 就近选择最后的 -->
		<p class="d f big">相信自己</p>
		<div id='footer'>回归本真</div>
	</body>
</html>

外部样式表

将所有样式写入style.css文件，

			/* 标签选择器 */
			h1 {
				width: 960px;
				height: 40px;
				margin: 0 auto;
			}
			/* 类选择器 */	
			.a {
				background-color: red;
			}
			.b {
				background-color: orange;
			}
			.c {
				background-color: yellow;
			}
			.d {
				background-color: green;
			}
			.e {
				background-color: cyan;
			}
			.f {
				background-color: blue;
			}
			.g {
				background-color: purple;
			}
			/* 文本类*/
			.h {
				color: blue;
				text-align: center;
				width: 100px;
				height: 38px;
				overflow: hidden;
			}
			.big{
				font-size: 32px;
			}
			.normal{
				font-size: 24px;
			}
			.small{
				font-size: 12px;
			}
			/* ID 选择器，不同的ID使用相同属性，逗号隔开*/
			/* ID 选择器只给唯一的ID值使用*/
			#header,#footer{
				width: 800px;
				height: 120px;
				border: 1px solid red;
				margin: 10px auto;
			}
			/*通配符选择器*/
			* {
				margin: 0;
				padding: 0;
			}

然后在html文件中引用，可以多个地方引用。

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<h1 class="a big">Hello, World</h1>
	</body>

网页先加载内容，再加载样式表

页面加载一次样式，页面将其缓存，可以重复使用，降低流量消耗

页面风格统一

一般情况，网站首页会使用内部样式表，其他页面可共享一个或多个外部样式表，减少对传输带宽的使用。

内嵌样式表

	<body>
		<!-- 内嵌样式表 / 行内样式表 -->
		<h1 class="a big" style="background-color: green; font-family: 'Courier';text-align: center;">Hello, World</h1>
		<h1 class="a big" style="background-color: rgba(255, 25, 50, 0.5); font-family: 'Courier';text-align: center;">welcome back</h1>
        <h1 class="a big" style="background-color: #ffff00; font-family: 'Courier';text-align: center;">You are the one</h1>
	</body>

样式覆盖规则

不冲突的样式会叠加，冲突的样式遵循一下三原则：

就近原则：同一类型的选择就近

具体原则： ID > class > label

重要原则：!important 比具体更强

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#h1{color: blue;}
			.h1{ color: green !important;}
			h1{color: red;}
		</style>
	</head>
	<body>
		<h1 class="h1" id="h1">Awesome</h1>
	</body>

14、文本和字体属性

参考：https://www.runoob.com/cssref/pr-font-font.html

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.ms{
				width: 320px;
				height: 100px;
				border: 5px dotted gray;
				line-height: 100px;
				text-align: center;
				margin: 10px auto;
				text-decoration: underline;
				text-shadow: 2px 2px gray;
				font-family: Arial;
				font-size: 300%;
			}
			.h3{
				text-transform: uppercase;
				font: italic bolder 2cm/60px Ariel;
			}
		</style>
	</head>
	<body>
		<h1 class="ms">Test beautiful</h1>
		<h1 class="h3">测试字体</h1>
	</body>

15、边框和轮廓

		<style>
			/* 属性选择器：标签带上属性 */
			/* form input后代选择器，在input前加form，表示只有表单下的标签才使用该属性 */
			/* form>input:儿子选择器 */
			form input[type="text"],form input[type="password"]{
				border: none;
				outline: none;
				border-bottom: 2px dotted darkgray;
			}
			/* form+input相邻兄弟选择器，form~input兄弟选择器 */
			form+input[type="text"]{
				outline: none;
				border: 1px solid lightgray;
			}
			<!-- focus 表示焦点,鼠标选中时使用该样式-->
			form+input[type="text"]:focus{
				outline: none;
				border: 1px solid #00FFFF;
			}
		</style>

16、定位属性

<style>
			.adv{
				width: 200px;
				height: 200px;
				color: red;
				background-color: blue;
				position: fixed;
				right: 50px;
				top: 20px;
			}
            /* position定位：static 静态定位，正常的文档流 */
            /* position定位：fixed 固定定位，相对于浏览器窗口，内容悬浮在固定位置 */
            /* position定位：relative 相对定位，相对于原来正常的位置，移动对应的距离 */
            /* position定位：abusolute 绝对定位，相比于父级元素，移动对应的距离 */
			.p2{
				position: fixed;
				left: 50px;
				top:20px;
			}
</style>

17、表格边框

		<style>
			table{
				border-collapse: collapse;
			}
			td,th{
				border: 1px solid black;
			}
		</style>

posted @ 2022-12-06 11:55 逆流的鱼2016 阅读(13) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

逆流的鱼2016

Hope is a good thing!