带你了解CSS基础知识,样式

目录

• 什么是CSS
• 在HTML页面中嵌套使用CSS的两种方式
• 三种方式代码展示
• 链入外部样式表文件
• 以下是常用的样式
• 总结

什么是CSS

CSS(CasCADing Style Sheet):层叠样式表语言。

CSS的作用是：

修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。

在HTML页面中嵌套使用CSS的两种方式

第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。语法格式：

标签 style=“样式名:样式值; 样式名:样式值; 样式名:样式值; …”> /标签>

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

这种方式易维护，维护成本较低。		xxx.css文件			1.html中引入了			2.html中引入了			3.html中引入了			4.html中引入了

三种方式代码展示

内联定义方式

!doctyPE html>
    html>
    	head>
    		tITle>
    HTML中引入CSS样式的第一种方式：内联定义方式/title>
    	head>
    	body>
    		!--			width	宽度样式			heght	高度样式			background-color	背景颜色样式			display		布局样式（none表示隐藏，block表示显示）		-->
    		div style="width: 300px;
    height: 300px;
    background-color: #CCFFFF;
     display: block;
    		border-color: red;
    border-width: 3px;
    border-style: solid">
    /div>
    		!--样式还可以这样写			border: width style color		-->
    		div style="width: 300px;
    height: 300px;
    background-color: #CCFFFF;
     display: block;
    		border:  thick double yellow;
      ">
    /div>
    	/body>
    /html>
    

样式块方式

!doctype html>
    html>
    	head>
    		title>
    HTML中引入样式的第二种方式：样式块方式/title>
    		style type="text/css">
			/*				这是CSS的注释			*/			/*				id选择器				#id{
					样式名: 样式值；					样式名: 样式值；					样式名: 样式值；					........				}
			*/			#usernameErrorMsg{
    				font-Size: 12px;
    				color: red;
			}
			/*				标签选择器				标签名{
    					样式名: 样式值;
    					样式名: 样式值;
    					样式名: 样式值;
				}
			*/			div{
    				background-color: black;
    				border: 1px solid red;
    				width: 100px;
    				height: 100px;
			}
			/*				类选择器				.类名{
    					样式名: 样式值;
    					样式名: 样式值;
    					样式名: 样式值;
				}
			*/			.myclass{
    				border: 2px double blue;
    				width: 400px;
				height: 30px			}
    		/style>
    	/head>
    	body>
    		!--			设置样式字体大小12px,颜色为红色		-->
    		!--span id="usernameErrorMsg" style="font-size: 12px;
    color: red">
    对不起，用户名不能为空！/span>
    -->
    		span id="usernameErrorMsg"">
    对不起，用户名不能为空！/span>
    		div>
    /div>
    		div>
    /div>
    		div>
    /div>
    		!--class相同的可以认为是同一类标签。-->
    		br>
    br>
    br>
    br>
    		input type="text" class="myclass"/>
    		br>
    br>
    br>
    br>
    br>
    		select class="myclass">
    			option>
    专科/option>
    			option>
    本科/option>
    			option>
    硕士/option>
    		/select>
    	/body>
    /html>
    

链入外部样式表文件

css文件

a{
    	text-decoration: none;
}
#baiduSpan{
    	text-decoration: underline;
    	cursor: wait;
}
    

!DOCTYPE html>
    html>
    	head>
    		meta charset="utf-8">
    		title>
    HTML中引入CSS样式的第三种方式：链入外部样式表文件/title>
    		!--引入css-->
    		link type="text/css" rel="stylesheet" href="css/1.css"/>
    	/head>
    	body>
    		a href="http://www.baidu.COM">
    百度/a>
    		span id="baiduSpan">
    点击我链接百度/span>
    	/body>
    /html>
    

以下是常用的样式

边框

（1）

div{
     border : 1px solid red;
 }
    

 （2）

div{
     border-width : 1px;
     border-style : solid;
     border-color : red;
 }
    

隐藏

div{
     display : none;
 }
    

字体

div{
     font-size : 12px;
     color : red;
 }
    

文本装饰

a{
     text-decoration : none;
 }
    

a{
     text-decoration : underline;
 }
    

列表

ul{
     list-style-type : none;
 }
    

设置鼠标悬停效果

:hover

定位

div{
     position : absolute;
     left : 100px;
     top : 100px;
 }
    

鼠标小手

div{
     cursor : pointer;
 }
    

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望你能够多多关注的更多内容！

• jQuery中的CSS样式属性css()及width()系列大全
• CSS自定义滚动条样式案例详解
• 详解Vue中CSS样式穿透问题
• BootStrap CSS全局样式和表格样式源码解析
• css分页样式代码
• CSS的三大样式你了解多少

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！