CSS

最新推荐文章于 2024-04-13 15:44:30 发布

wenshao007

最新推荐文章于 2024-04-13 15:44:30 发布

阅读量79

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/wenshao007/article/details/104462858

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css的样式很多，遇到需要用的时候去查找为好
css可以理解为html所有标签的化妆品，通过css可以给标签他们改变不同的外表

1.什么是css，有什么作用
CSS（Cascading Style Sheet）:层叠样式表语言
CSS得作用：
修饰HTML页面，设置HTML页面中得某些元素得样式，让HTML页面更好看。
CSS好比是HTML得化妆品一样。
HTML还是主题，CSS依赖HTML。CSS得存在就是修饰HTML，所以新建得文件还是xx.html文件

2.CSS我们要去掌握到什么程度?
常见得CSS样式要求会写
别人写得CSS样式要能够看懂

3.在HTML页面中嵌套CSS的三种方式;
第一种方式：在标签内部使用Style属性来设置元素的CSS样式，这种方式称为内联定义方式。就是使得标签更加多元化，通过css来改变HTML的样子
语法格式：

	<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html_css1</title>
	</head>
	<body>
		<div style="width: 300px;height: 230px;background: brown;border-color: black;border-style: solid;"></div>
		<br><br>
		<!--另外一种写法,border后面几个属性是一样的可以直接写-样式值->
		<div style="width: 300px;height: 200px;background: beige;border: 1px solid black;"></div>
		
	</body>
</html>

第二种方式:在head标签中使用style块，这种方式被称为样式块方式。
	语法格式：

<head>
	<style type = "text/css">
	选择器{
		样式名:样式值;
		样式名:样式值;
		...
	}
	选择器{
		样式名:样式值;
		样式名:样式值;
		...
	}
	
	<style>
</head>

示例代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html_css2，第二种方式：样式块</title>
		<style>
		/*css语句块注释方法，同时style之间的代码块为css代码*/
		/*id选择器*/
		/*语法格式
			#id{
				样式名:样式值;
				样式名:样式值;
				样式名:样式值;
			}-->*/
			
			#name{
				color: red;
				font-size: 12px;
			}
			
			/*标签选择器*/
			/*语法格式
				标签名字{
					样式名:样式值;
					样式名:样式值;
					样式名:样式值;
				}
				标签选择器作用的范围比id选择器广，只要是该标签都要被作用
			*/
		   div{
			   background: #FF0000;
			   border: 1px;
			   width: 100px;
			   height: 100px;
		   }
		   
		   /*类选择器*/
		   /*自己确定一个类，起个类名一类的都可以被作用
			语法格式：
				.类名{
					样式名:样式值;
					样式名:样式值;
					样式名:样式值;
				}	
		   */
		  .myclass{
			  border: solid red;
			  color: #FF0000;
		  }
			
		</style>
	</head>
	<body>
		<!--需求：下面字体大小为12px，字体颜色为红色-->
		<span id="name">用户名不能为空</span>
		
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		
		<br><br>
		<input type="text" class="myclass">
		<br>
		<select class="myclass">
			<option>专科</option>
			<option>ben科</option>
		</select>
	</body>
</html>

第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件种，在需要的网页上直接引入css文件，样式就引入了）
语法格式

<link type = "text/css" rel = "stylesheet" href = "css文件的路径" />

这种方式易维护，维护成本较低，改了外部的CSS文件所有的引用他的html文件也都一起改了，非常的方便
示例代码

css代码：
#name{
	/*去除掉下划线*/
	text-decoration: none;	
}

/*cursor:鼠标样式，pointer是小手，hand也是，但是hand有浏览器有浏览器兼容问题。建议使用Pointer*/
#text{/*使得文字有下划线，并且虚浮为手形状*/
	text-decoration: underline;
	cursor: pointer;
}


html代码，在html文件里直接引入css文件即可：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中使用css样式的第三种方式：引入外部独立的css文件</title>
		
		<!--引入css-->
		<link rel="stylesheet" type="text/css" href="css/1.css"/>
	</head>
	<body>
		<a href="http://www.baid.com" id= "name">百度<a/>
		<span id="text">点我点我！</span>
	</body>
</html>

wenshao007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

1.什么是css，有什么作用CSS（Cascading Style Sheet）:层叠样式表语言CSS得作用：修饰HTML页面，设置HTML页面中得某些元素得样式，让HTML页面更好看。CSS好比是HTML得化妆品一样。HTML还是主题，CSS依赖HTML。CSS得存在就是修饰HTML，所以新建得文件还是xx.html文件2.CSS我们要去掌握到什么程度?常见得CSS样式要求会写别...
复制链接

扫一扫

专栏目录