运维开发网

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

运维开发网 https://www.qedev.com 2021-07-10 09:57 出处:网络 作者: 程序dunk
目录什么是css在HTML页面中嵌套使用CSS的两种方式三种方式代码展示链入外部样式表文件以下是常用的样式总结什么是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 hmJUSvtml>
    <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">mJUSv;</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;
    }
    #ba编程客栈iduSpan{
    	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; }

    总结

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

    0

    精彩评论

    暂无评论...
    验证码 换一张
    取 消