css是什么 可以做什么 css的基本语法

最新推荐文章于 2024-07-24 11:16:38 发布
最新推荐文章于 2024-07-24 11:16:38 发布
阅读量382 收藏 1
点赞数 1
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51698494/article/details/109278601
版权

CSS

css是什么?

CSS是级联样式表(Cascading Style Sheets)

级联: 两个内容之间的关系

样式表: css修饰网页的语法集

优点:将页面的内容 (html)与 表现形式(css)分离 达到可重复利用.

css能做什么?

作用:为html控制外观.

css基本语法

css三种样式表

1 .行内样式表

行内样式表,是通过标签的style属性来设置元素的样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
 -->
  <p style="color: #0000FF;font-size: 40px;">床前明月光</p>

2 .内嵌样式表

内嵌式样式表是将代码写在HTML文档的head头部标签中，并且用style标签定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
			<style type="text/css">
				p{color: blue;font-size: 20px;
					}
			</style>
			
	</head>
	<body>
		<p >床前明月光</p>
			<p>疑是地上霜</p>
				<p>举头望明月</p>
					<p>低头思故乡</p>
	</body>
</html>

3 .外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

<link href="css/css11.css" rel="stylesheet" />

css选择器

选择器:将分离后的样式表 与 网页内容联系

选择器的优先级由低到高: 通配选择器<标签选择器<类选择器<id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 类选择器匹配指定的类名对应的标签 */
			.l1{ color: greenyellow;
			
				}
				.l2{color: #0000FF;
				}
				/*   选择器组合  提取公共属性 */
				.l1,.l2{
					font-size: 1.875rem;
				}
				/* id选择器 */
				#t1{
					color: red;
				}
				/* 通用选择器优先级最低
				   但高优先级的只能覆盖相同属性,不能覆盖特有的 */
				*{
					color: yellow;
					
				}
		</style>
	</head>
	<body>
		<p class="l1">春眠不觉晓</p>
			<p id="t1">处处闻啼鸟</p>
				<p>夜来风雨声</p>
					<p class="l1">花落知多少</p>
					<p  class="l2">床前明月光</p>
						<p class="l2">疑是地上霜</p>
							<p id="t1">举头望明月</p>
								<p>低头思故乡</p>
								
	</body>
</html>


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 后代选择器儿子孙子都算 */
			 .c1 b{color: #0000FF;
				}
				/* 儿子选择器 只包括儿子 */
			.c1>b{color: #7FFFD4;
				}
				/* 相邻选择器 */
			.c1+p{color: red;
				}
				/* 兄弟选择器 */
			.c2~p{color: yellow;}
		</style>
	</head>
	<body>
		<p class="c1">   
		
		   <b class="b1"> p的儿子</b>
		   <b>p的儿子</b>
		   <i>
			   <b>p的孙子2</b>
			   <b>p的孙子1</b>
		   </i>
		  
		</p>
		
		
		<p class="c2">   
			
			   <b> p的儿子</b>
			   <b> p的儿子</b>
			 
		</p>
			
		<p class="c2">
			
			   <b> p的儿子</b>
			   <b> p的儿子</b>
			 
		</p>	
	</body>
</html>

css文本

color：字体颜色
font-size：字体大小
font-family：字体
text-align：文本对齐
text-decoration:line-through：定义穿过文本下的一条线
text-decoration:underline：定义文本下的一条线
text-decoration:none：定义标准的文本
font-style: italic 斜体
font-weight:字体粗细
line-height:设置行高
letter-spacing:指定字符间距
text-indent:首行缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1{
				color: pink;/* 设置颜色 */
				font-size: 20px;/* 设置字的大小 */
				font-family: 仿宋;
				text-align: center;
				/* text-decoration: line-through;删除线 */
				text-decoration: underline;/* 下划线 */
				text-decoration: none;/* 去掉下划线 */
				 font-weight:bold ;/* 加粗 */
				 font-style:italic;/* 斜体 */
				 line-height: 30px;/* 设置行高 */
				 letter-spacing: 2px;/* 设置字符间距 */
				 word-spacing: 2px;/* 设置单词与单词之间距离 */
				 text-indent: 2em;/* 首行缩进 */	
			}
			
		</style>
	</head>
	<body>
		<p class="p1">
		要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。
		要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。
		要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。
		要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。
		hello word
		</p>
	</body>
</html>
css背景

background-color背景颜色
background-image背景图片
background-repeat背景重复
background-size背景尺寸
background- position 背景位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				
				width: 600px;
				height: 400px;
				/* 背景颜色 */
				background-color: #0000FF;
				/* 背景图片 */
				background-image: url(img/bg.jpg);) ;
				/* 背景重复 */
				background-repeat: no-repeat;
				/* 背景尺寸 */
				background-size: 300px;200px;
				/* 背景位置 */
				background-position: center;
				
			}
		</style>
	</head>
	<body>
		
		<p></p>
	</body>
</html>
css列表

list-style-image 将图象设置为列表项标志
list-style-position 设置列表中列表项标志的位置
list-style-type 设置列表项标志的类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.u1>li{
				/* 设置列表项标志类型为空 */
				list-style-type: none;
				/* 将这个图像设置为列表项标志 */
				list-style-image:url(img/img.jpg) ;
				/* 居中 */
				text-align: center;
				/* 设置列表中列表项的位置 */
				list-style-position:inside;
			}
			.u2{
				text-align: center;
				/* 简写 */
				list-style: url(img/img.jpg) inside none;
			}
		</style>
	</head>
	<body>
		<ul class="u1" >
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ul>
		<ul class="u2">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ul>
	</body>
</html>
css伪类

:link 表示没访问过的链接
:visited 表示访问过的链接
:hover 表示鼠标移入的状态
:active 表示的是被点击的状态
注意：:visited放在:hover之前
:active 必须被置于 :hover 之后
:focus向拥有键盘输入焦点的标签添加样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link{
				color:blue;
				}
			a:visited{
				color: yellow;
			}
			a:hover{
				color: #FFC0CB;
				font-size: 20px;
			}
			a:active{
				color: aqua;
				
			}
			p:hover{
				color: fuchsia;
				}
			.b1:hover{
				background-color: #ADFF2F;
				color: #0000FF;
				font-size: 10px;}
			.b1:active{
				color: #FFC0CB;
				background-color: fuchsia;
				font-size: 40px;
				}
				.t1:focus{
					background-color: pink;
				}
		</style>
	</head>
	<body>
		<a href="列表.html">列表</a>
		<a href="选择器.html">选择器</a>
		<p>这是一个段落</p>
		<input type="button" value="按钮" class="b1"/>
		<input type="text" class="t1" />
	</body>
</html>
贩卖日落dove
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么是CSS？它的能做些什么？
bjguan's BLOG
12-08 2168
什么是CSS？它的能做些什么？http://www.pcdog.com 未知 2004-7-5 CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜
CSS3能做什么？
熊诗言的博客
11-11 2113
CSS3能做什么？ CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。 CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。 CSS3都有哪些强大功能呢？各位小伙伴们先来一睹为快吧！ 选择器 以前我们通常用class、 ID 或
html css可以制作什么,CSS是什么？CSS能做什么？
weixin_39907289的博客
06-18 231
相信只要学习了 HTML 编程的人对 CSS 都不会陌生，CSS 可以对 HTML 进行修饰优化页面，让你的页面耳目一新瞬间高了一个档次，那么初学编程的你知道 CSS是什么吗？它能做什么呢？顾名思义CSS 的意思是层叠样式表(CascadingStyleSheets)CSS的样式定义为如何显示HTML 元素CSS样式通常都会存储在样式表中外部的样式表对工作效率有极大的提高外部样式表通常都存...
CSS3简明教程-1.3.CSS3能做些什么
lufaxinT
12-15 1387
CSS3能做些什么
你不知道 CSS 可以做的 4 件事
qq_34998786的博客
09-06 160
1、逐帧动画我们经常使用css3中的animation动画，比如这样：.fadeIn{ animation:fadeIn.5sease1sboth; } @keyframes...
css是什么_动力节点Java学院整理
09-24
CSS语法结构包括选择器、属性和值。例如： ```css selector { property: value; } ``` - **选择器**：指定要应用样式的HTML元素，如`p`代表所有段落。 - **属性**：要改变的元素特性，如`color`表示文本颜色。 - **...
CSS基本语法1
08-08
CSS 基本语法 1 CSS（Cascading Style Sheets）是网站页面样式的基础语言，用于控制网页的布局、颜色、字体、图片等外观样式。CSS 基本语法 1 介绍了 CSS 的基本概念和语法结构。 选择器 选择器是 CSS 的核心组成...
1 CSS基本语法
12-23
### CSS基本语法详解 #### 一、CSS定义规则 CSS（Cascading Style Sheets），即层叠样式表，是一种用于定义HTML文档外观的语言。通过CSS，我们可以精确地控制页面元素的布局、颜色、字体等样式，从而实现网页设计...
web实验2 CSS基本语法.zip
06-27
实验内容：1.CSS的引入和基本选择器应用;2.利用CSS对网页进行控制；3.利用DIV+CSS实现如图2-3、2-4网页效果的布局和设计，并在多种浏览器上测试。所需图片见附件。4.利用DIV+CSS实现如图2-5网页效果，并在多种浏览器...
第1章CSS是什么共23页.pdf.zip
11-25
通常，第一章会涵盖CSS的起源、用途、基本语法以及它在网页设计中的重要性。可能会讨论到盒模型、选择器、属性、值等核心概念。 【标签】：“第1章CSS是什么共23页.pd” 这个标签可能是部分错误，原本可能是“pd”...
css主要用于控制什么,CSS是用来做什么的?
weixin_36281932的博客
08-03 2250
CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS主要用来设计网页的样式，美化网页；它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。在主页制作时采用CSS技术，可以有效地对页面...
CSS基本内容。
weixin_46953330的博客
10-27 508
CSS的基本内容 1.什么是CSS？ CSS（层叠样式表）是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 2.CSS的作用是什么？ 用于在HTML元素上添加外观、改变字体以及字体大小、改变背景颜色、添加图片、边框、构建网页结构等等。 3.CSS的特点是什么？ <1>.丰富的样式定义 。 <2>.易于使用和修改 。 <3>.多页面使用 。 <4>.可层叠（一个元素可具有多个css样式） <
css学习：CSS内容概括
meng_xiaoxiao的博客
10-25 416
17、css函数：calc、attr、 var 、rgb、 rgba、 hsl 、hsla 、linear-gradient、 repeat-linear-gradient、radial-gradient repeat-radial-gradient。14、css选择器：id选择器、类选择器、属性选择器、标签选择器、通配符选择器、7、文本：行高、字间距、空白\换行处理、字体样式、字体装饰；18、transform:平移、缩放、旋转、倾斜；并列选择器、派送选择器、分组选择器、伪类选择器；
什么是CSS3，CSS3能做什么？
my_liyan的博客
11-23 3803
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能，目前主浏览器 Chorme、Safari、Firefox、Opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分。是浏览器的私有属性虽然目前较新版本的浏览器都...
HTML, CSS, JavaScript 都是做什么的？
ChasingdreamLY的博客
06-27 4061
HTML是一种超文本标记语言，主要用于创建网页，是构建网页的基础。主要用于定义网站和网页的结构，通过浏览器，渲染出最终的浏览效果。CSS层叠样式表。能够为 HTML 等文档添加样式，诸如字体、颜色、字间距等。处理后，文件可读性更强，结构更加灵活，如读者可以自行定义字体大小和颜色。另：“层叠”的概念很独特。JavaScript解释性脚本语言。面向对象，能够为 HTML 等文档添加动效、增加交互。可以...
css基本内容
weixin_48304611的博客
11-08 488
css css是什么 CSS是Cascading Style Sheets（级联样式表） 级联:关联 样式表:css修饰网页的语法集 优点:将页面内容与表现形式分离 可达到重复利用 css与html之间的关系 html是网页的内容 css控制外观 样式 样子 css做什么 为html控制外观 css基本语法 css三种样式表 行级样式表 行级样式表 直接将样式写在标签行内 style=“属性名1:属性值;…” <p style="color: aqua; font-size: 30px;">床
CSS 创建：从入门到精通
wjs2024的博客
07-24 512
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
网格布局 HTML CSS grid layout demo
wuyujin1997的博客
07-23 543
* grid 或 grid-template-areas 都可以 *//* 左右居中 *//* 上下居中 */
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
最新发布
qq_2511276124的博客
07-24 358
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
CSS工作原理与基本语法解析
"个人整理的CSS学习笔记，涵盖了CSS的工作原理、基本语法、颜色与背景、字体、文本、链接以及元素的分类与标识等内容，旨在帮助读者理解和掌握CSS" 在Web开发中，CSS（层叠样式表）是一种至关重要的技术，用于控制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值