当前位置： 首页 > news >正文

网页制作11-html,css,javascript初认识のCCS样式列表（上）

news 来源：原创 2025/5/3 17:21:18

  Advantage.

  1. 更加精确的控制网页的内容、形式。
  2. 样式更加丰富。
  3. 定义样式灵活。

一、css的基本语法

 Css的语法结构由三部分组成：

1、选择符 Selector：

指这种样式编码所要针对的对象，可以是一个xhtml标签，例如body hl；也可以是定义了特定id或class的标签，例如#lay选择符表示选择<div id=lay>,即一个被指定了类为id的对象.浏览器将对css选择服务进行严格的解析,每一组样式均会被浏览器应用到对应的对象上

选择符{ 样式属性:取值;样式属性:取值；样式属性：取值；……}

2、样式属性 Property ：

是css样式控制的核心，对于每一个xhtml中的标签， Css都提供了丰富的样式属性，例如颜色大小定位浮动方式等。

3、值 Value ：

是属性的值，一种是范围值，另一种是数值。

二、添加css的方式

1、链接外部样式表

<link rel="stylesheet" type="text/css" href="文件地址"

2、内部样式表:<style> </style>

<style type="text/css">
    <body{
        margin-right: 0px;
        margin-right: 0;
        margin-top: 0;
        bottom: 0;
        }
        .style1{
            color: aqua;
            font-size: 14px;
        }
    </style>

3、导入外部样式表

导入外部样式，表示在内部样式表的<style>中导入一个外部样式表。导入时用@import。导入外部样式表的输入方式更有优势，实质上它是相当于存在于内部样式表中。

<style type="text/css">
    @import slstyle.css
    </style>

4、内嵌样式

  • 内嵌样式是混合在html标记里使用的。可以很简单的对某个元素单独定义样式，
  • 它主要是在body那实现。直接在标记里添加参数，
  • 而style参数的内容就是css的属性和值。
  • 在style参数后面的引号里的内容，相当于在样式表大括号里的内容。

<table style="color: red;margin-left: 22px"></table>

（这种方法比较简单，无法发挥样式表的优势，因此不推荐使用。）

三、字体属性 

1、语法表：

字体属性CSS语法HTML语法说明

字体

 Font -family  font face 设置字体,如果该属性定义了多种字体浏览器会由前向后选择，如果不支持字体一，则采用字体二，以此类推
字号 Font- size font size用来设置字体大小,分为相对字体尺寸和绝对字体尺寸
字体风格 Font- style <em>用来设置斜体,三种取值为normal、oblique、italic
加粗字体 Font -weight <b>用来设置粗细： Normal /bold,/ bolder/  Lighter/ Number 
小写字母转大写 Font- variant / normal 和inherit表示不变,small-caps将小写转为大写而且字体比较小
字体复合属性font/

复合属性可以取值字体族科，字体大小，字体风格，加粗字体等，各值之间用空格相连。

/* 有着严格的顺序 font：font-style font-weight font-size/line-height font-family: */(改变顺序无效）

2、示例效果：

 3、示例代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
	.h{
		font-family:'幼圆';
	    font-size:  Small;
		font-style: normal;
		
	}
	.h1{
		font-family:'幼圆';
	    font-size: Medium;
		font-style:oblique;
		font-variant:inherit;
	}
	.h2{
		font-family:'幼圆';
	    font-size: Large  ;
		font-style:italic;
		font-variant: small-caps;
	}
	.h3{
		font-family:'幼圆A';
	    font-size: larger ;
		font-weight: normal;
		font-variant:normal;
		
	}
	.h4{
		font-family:'幼圆';
	    font-size: 15px  ;
		font-weight: bold;
	}
	.h5{
		font-family:'幼圆';
	    font-size:  smaller ;
		font-weight:bolder;
	}
	.h6{
		font-family:'幼圆';
	    font-size: x-SMALL ;
		font-weight:lighter;
	}
	.h7{
		font-family:'幼圆';
	    font-size: xx-small;
	    font-weight:200;
	}
	.h8{
		font-family:'幼圆';
	    font-size:x-large;
		font-weight:400;
	}
	.h9{
		font-family:'幼圆';
	    font-size:xx-large;
		font-weight:600;
	}
	.h10{font: italic 700 25px "隶书";}
	</style>
	<body>
		<h1 align="center">《忆江南》</h1>
		<p align="center"><em>白居易</em></p>
<span class="h"> 江南好， Small/</span>
<span class="h1"> 风景旧曾谙。 Medium/</span>
<span class="h2"> 日出江花红胜火,Large/</span>
<p class="h3"> 春来江水绿如蓝。larger/</p>
<p class="h4"> 能不忆江南？15/</p>
<p class="h5"> 江南忆，smaller/</p>
<p class="h6">最忆是杭州。XS/</p>
<p class="h7"> 山寺月中寻桂子，XXS/</p>
<p class="h8"> 郡亭枕上看潮头。XL /</p>
<p class="h9">何日更重游！XXL/</p>
<p class="h10">后面省略/</p>
		
</body>
</html>

四、颜色和背景属性

1、语法表

序号四、颜色和背景属性 Grammer lebel Description 
1颜色属性 Color 颜色值是一个关键字或一个16进制的rgb值，16进制通过表达0~255的数值最多设置1,677万种颜色
2背景颜色 Background -color 文字背景颜色
3背景图像 Background- image 文字背景图案
4背景重复 Background  -Repeat  设置图像是否平铺，repeat-x水平方向平铺，repeat-y垂直方向平铺
5背景附件 Background -attachment 可以设置背景图像是随对象滚动还是固定不动
6背景位置 Background -position 用于设置背景图像的位置，这个属性只能应用于会计元素和替换元素，替换元素包括img,input,textarea,select,object
7背景复合属性 Background background :{ background-color background-image background-repeat background-attachment background-position;}

2、 示例效果

3、示例代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
	.h{
		font-family:'幼圆';
	    font-size:  Small;
		font-style: normal;
		color:#FF0004;
		background-color: #ff99ff;
		
	}
	.h1{
		font-family:'幼圆';
	    font-size: Medium;
		font-style:oblique;
		font-variant:inherit;
		background-image: url("金色.png")
	}
	.h2{
		font-family:'幼圆';
	    font-size: Large  ;
		font-style:italic;
		font-variant: small-caps;
	}
	.h3{
		font-family:'幼圆A';
	    font-size: larger ;
		font-weight: normal;
		font-variant:normal;
		
	}
	.h4{
		font-family:'幼圆';
	    font-size: 15px  ;
		font-weight: bold;
	}
	.h5{
		font-family:'幼圆';
	    font-size:  smaller ;
		font-weight:bolder;
	}
	.h6{
		font-family:'幼圆';
	    font-size: x-SMALL ;
		font-weight:lighter;
	}
	.h7{
		font-family:'幼圆';
	    font-size: xx-small;
	    font-weight:200;
	}
	.h8{
		font-family:'幼圆';
	    font-size:x-large;
		font-weight:400;
	}
	.h9{
		font-family:'幼圆';
	    font-size:xx-large;
		font-weight:600;
	}
	.h10{font: italic 700 25px "隶书";}
	.h11{ background-image:url("比卡丘.jpg");
		background-repeat: repeat-x;
	 background-attachment:scroll;
	background-position: top center;}
	
	.h12{ background-image:url("CAT.JPG");
	 background-attachment:fixed;}
	.h13{background: yellow url("金色.png") no-repeat scroll left top;}
	</style>
	<body class="h11">
		<h1 align="center">《忆江南》</h1>
		<p align="center"><em>白居易</em></p>
<span class="h"> 江南好， Small/</span>
<span class="h1"> 风景旧曾谙。 Medium/</span>
<span class="h2"> 日出江花红胜火,Large/</span>
<p class="h3"> 春来江水绿如蓝。larger/</p>
<p class="h4"> 能不忆江南？15/</p>
<div class="h13">
	<p class="h5"> 江南忆，smaller/</p>
    <p class="h6">最忆是杭州。XS/</p>
    <p class="h7"> 山寺月中寻桂子，XXS/</p>
    <p class="h8"> 郡亭枕上看潮头。XL /</p>
	<p class="h9">何日更重游！XXL/</p>
		</div>     
<p class="h10">后面省略/</p>
<p class="h12">
Refuse to be unhappy, be cheerful instead.	
拒绝心情不快，时刻神采飞扬。<br>

Refuse to let your troubles multiply, just take them one by one.	别让问题堆积如山，一个一个着手解决。<br>
	
Organize your time, keep your life simple and exactly the way you want it.	做时间的主人，以自己喜欢的方式简单地生活。<br>
	
Refuse to complain about things, learn to improve your surroundings and create your world the way you believe it should be.	不要抱怨，学习如何改善环境，创造你的理想世界。<br>
	
Refuse to dwell on the mistakes or disappointments that are sometimes a part of life, instead learn how you can make things better.	不要沉湎于错误和失望中难以自拔，有时它们是生活不可或缺的组成部分，学会从中吸取教训，下次做得更好。<br>
	
Be optimistic.	保持乐观。<br>
	
Be energetic and positive about the things you do, and always hope for the best.	保持旺盛精力和积极心态，追求完美<br>
	
Believe in yourself at all times and in all aspects of your life.	相信自己，时时刻刻，事事处处。<br>
	
Before you know it, those wonderful dreams you have believed in all your life will come true, and your life will be the happy and successful life that it was meant to be.	等你明白这一切，生命中的美好愿望都将实现。生活将如你所愿，快乐幸福并且成功。<br>
	（from 可可英语，美丽英文诵读第18期:Motto for a Positive Outlook(积极人生座右铭)</p>
		
</body>
</html>

五、段落属性

1、语法表

五、段落属性
1单词间隔 Word spacing 使用单词间隔可以控制单词之间的间隔距离
2字符间隔 Letter spacing 使用字符间隔可以控制字符之间的间隔距离
3文字修饰 Text decoration 

underline下划线, Over line上划线, Line- through

对文字添加删除线, Blink文字闪烁效果

4垂直对齐方式 Vertical align  BASELINE:浏览器默认的垂直对齐方式;
 Sub:文字的下标
 Super:文字的上标
 Top:垂直靠上对齐
 Test Top:使元素和上级元素的字体向上对齐;
 Middle:垂直居中对齐;
text-bottom:使元素和上级元素的字体向下对齐
5文本转换 Text transform 文本转换属性用来转换英文字母的大小写:
none:表示用原始值
 Capitalize:表示使每个单词的第1个字母大写
 Upper case:表示使每个单词的所有字母大写
 Lower case:表示使每个单词的所有字母消息
6水平对齐方式 Text align 设置文本的水平对齐方式:
 Left:左对齐
 Right:又对齐
  center:居中对齐
 Justify:两端对齐
7文本缩进 Test indent文本缩进值必须是一个长度值或一个百分比
8文本行高 line- height 控制段落中行与行之间的距离
9处理空白 White space white space有三个值：
normal:默认；
pre:会导致源代码中的空格和换行符被保留
nowrap强制在同一行内显示所有文本直到文本结束或者遇到<br>
10文本反排

unicode-bidi,

Direction 

这两个属性经常一起使用,用来设置对象的阅读顺序

 2、示例代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
   .h12::before
	{position:absolute;
	content: "";
		inset:0;
	    width: 100%;
        height: 100%;
	background-color: white;
		z-index: -1;
		opacity: 0.5;
		
	}
	
	.h12{position:relative;
		background-image: url("CAT.JPG");
		isolation: isolate;
		display: grid;
	}
	.h13{background: yellow url("金色.png") no-repeat scroll left top;}
	.T1{letter-spacing: 5px;
	font-family:'隶书'}
	.T2{text-decoration: underline overline line-through blink;
	}
	.T3{word-spacing:5px;
	font-family:'隶书'}
	.T4{vertical-align: super;
	font-size: smaller;}
	
	.zh{text-transform: none;}
	.zh1{text-transform:capitalize;}
	.zh2{text-transform:uppercase;}
	.zh3{text-transform:lowercase;}
	.a{
		font-family: "幼圆";
		font-size: 11pt;
		text-align:right;}
		.p1{text-indent: 25px;}
		.p2{line-height:40px; }
		
		.p3{width: 350px;
			line-height: 30px;
			border: 1px solid #444;
			padding: 10px;
			font-family: "幼圆";
			white-space: normal;
		
		}
		
		.p4{width: 350px;
			line-height: 30px;
			border: 1px solid #444;
			padding: 10px;
			font-family: "幼圆";
			white-space:pre;}
		
		.p5{width: 350px;
			line-height: 30px;
			border: 1px solid #444;
			padding: 10px;
			font-family: "幼圆";
			white-space:nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;}
		.k{font-family: '(한)예서체';
		direction: rtl;
		unicode-bidi:bidi-override;}
		
	</style>

</head>

<body class="p1">
	<div class="h12">
	<span class="T1">Refuse to be unhappy, be cheerful instead.	
拒绝心情不快，时刻神采飞扬。</span><br/>
<span class="T3">	Refuse to be unhappy, be cheerful instead.	
	拒绝心情不快，时刻神采飞扬。</span><br/>

<span class="T2">Refuse to let your troubles multiply, just take them one by one.	别让问题堆积如山，一个一个着手解决。<br/></span>
	
<p>Organize your time, keep your life simple and exactly the way you want it.	做时间的主人，以自己喜欢的方式简单地生活。</p>
	
Refuse to complain about things, learn to improve your surroundings and create your world the way you believe it should be.	不要抱怨，学习如何改善环境，创造你的理想世界。<br/>
	
<span class="p2">Refuse to dwell on the mistakes or disappointments that are sometimes a part of life, instead learn how you can make things better.<br>	不要沉湎于错误和失望中难以自拔，有时它们是生活不可或缺的组成部分，学会从中吸取教训，下次做得更好。<br/></span>
	
<span class="p3">Be optimistic......(      )......保持乐观。保持乐观。保持乐观。保持乐观。<br/></span>
<span class="p4">Be optimistic......(      )......保持乐观。保持乐观。保持乐观。保持乐观。<br/></span>
<span class="p5">Be optimistic......(      )......保持乐观。保持乐观。保持乐观。保持乐观。<br/></span>
Be energetic and positive about the things you do, and always hope for the best.	保持旺盛精力和积极心态，追求完美
	
<span class="k">Be energetic and positive about the things you do, and always hope for the best.	保持旺盛精力和积极心态，追求完美<br/></span>
	
Believe in yourself at all times and in all aspects of your life.	相信自己，时时刻刻，事事处处。<br/>
	
Before you know it, those wonderful dreams you have believed in all your life will come true, and your life will be the happy and successful life that it was meant to be.	等你明白这一切，生命中的美好愿望都将实现。生活将如你所愿，快乐幸福并且成功。<br/>
	<span class="a">（from 可可英语，美丽英文诵读第18期:Motto for a Positive Outlook(积极人生座右铭)</span>
		</div>
		
		5<span class="T4">2</span>+2<span class="T4">2</span>=29
	<p class="zh">how are you</p>
	<p class="zh1">how are you</p>
	<p class="zh2">how are you</p>
	<p class="zh3">how are you</p>
	
</body>
</html>

 3、示例效果

相关文章：

  • 【Azure 架构师学习笔记】- Azure Databricks (14) -- 搭建Medallion Architecture part 2
  • Vue 3 中 unref 的作用与 Vue Router currentRoute 的知识
  • Spring Boot整合RabbitMQ
  • 蓝桥杯 - 每日打卡(类斐波那契循环数)
  • 17028djwcb
  • 探秘基带算法：从原理到5G时代的通信变革【六】CRC 校验
  • Spark（6）vm与centos虚拟机
  • DeepSeek API使用及私有化部署
  • 【向量数据库Weaviate】与ChromaDB的差异、优劣
  • week 2 - Branching - Arrays
  • JVM内存管理
  • 线程池的工作流程
  • VMware如何配置IP网络
  • java数据结构_Map和Set（一文理解哈希表）_9.3
  • 探索Elasticsearch：文档的CRUD
  • DeepSeek-OpenSourceWeek-第六天-Inference System Overview
  • Langchain解锁LLM大语言模型的结构化输出能力（多种实现方案）
  • Qt基础入门-详解
  • Linux配置虚拟机
  • AMD RDNA3 GPU架构解析
  • 下达专项资金、党政主官田间调研……全国多地力保夏粮稳收
  • 美参议院通过新任美国驻华大使任命，外交部回应
  • 体坛联播｜欧冠半决赛阿森纳主场不敌巴黎，北京男篮险胜山西
  • 西夏文残碑等文物来沪，见证一段神秘灿烂的历史
  • 逛了6个小时的上海车展。有些不太成熟的感受。与你分享。
  • 外交部亚洲司司长刘劲松向菲方严肃交涉