css样式表基本知识

最新推荐文章于 2023-04-14 10:31:35 发布

Destiny,635

最新推荐文章于 2023-04-14 10:31:35 发布

阅读量73

点赞数

文章标签： css safari css3 前端 html

本文链接：https://blog.csdn.net/weixin_56319791/article/details/122333177

版权

引入css可以将我们的页面渲染的更好看

样式表的引入方式
行内样式
内接样式
外接样式（link/@import url=""）

 <!DOCTYPE html>
 <html>
 <header>
	<meta charset="utf-8" />
	<title>css引入方式</title>
	<!--内接样式-->
	<style type="text/css">
		div{
			width:100px;
			height:100px;
			border:1px solid #000000;
			<!--border语法： border: 字体大小 边框样式 颜色;-->
		}
	</style>
	<!--外接样式-->
	<link rel="text/css" href="层叠样式表的路径/*.css"/>
	<!--内接样式和外接样式的优先级遵循就近原则-->
</header>
 <body>
 	<!--行内样式，优先级最高-->
	<div style="width='100px';height='100px';">
		<p></p>
	</div>
</body>
 </html>

基本选择器
标签选择器

<!DOCTYPE html>
 <html>
 <header>
	<meta charset="utf-8" />
	<title>css引入方式</title>
	<!--内接样式-->
	<style type="text/css">
		<!--下面的格式就是标签选择器,语法就是 标签名{样式}-->
		div{
			width:100px;
			height:100px;
		}
	</style>
	<!--外接样式-->
	<link rel="text/css" href="层叠样式表的路径/*.css"/>
	<!--内接样式和外接样式的优先级遵循就近原则-->
</header>
 <body>
 	<!--行内样式，优先级最高-->
	<div style="width='100px';height='100px';">
		<p></p>
	</div>
</body>
 </html>

类选择器

<!DOCTYPE html>
 <html>
 <header>
	<meta charset="utf-8" />
	<title>css引入方式</title>
	<!--内接样式-->
	<style type="text/css">
		<!--下面的格式就是标签选择器,语法就是 标签名{样式} ‘共性’ 就是会选择所有的这个标签，并设置其样式-->
		div{
			width:100px;
			height:100px;
		}
		<!--类选择器 语法：.类名{样式} '共性' 会选择所有类名一样的标签，并设置其样式，注意多个不同的标签，可以设置相同的类名，并且同一个标签可以设置多个类名-->
	</style>
	<!--外接样式-->
	<link rel="text/css" href="层叠样式表的路径/*.css"/>
	<!--内接样式和外接样式的优先级遵循就近原则-->
</header>
 <body>
 	<!--行内样式，优先级最高-->
	<div style="width='100px';height='100px';">
		<p></p>
	</div>
	<div class="container">
		<span>页面内容</span>
	</div>
</body>
 </html>

id 选择器

<!DOCTYPE html>
 <html>
 <header>
	<meta charset="utf-8" />
	<title>css引入方式</title>
	<!--内接样式-->
	<style type="text/css">
		<!--下面的格式就是标签选择器,语法就是 标签名{样式}-->
		div{
			width:100px;
			height:100px;
		}
		<!--id选择器 语法：#id名{样式} '个性' 一个id只能唯一标识一个标签，所以id选择器只能给一个单独的标签设置样式-->
		#content{
			width:100px;
			height:100px;
			background-color:#000000;
		}
	</style>
	<!--外接样式-->
	<link rel="text/css" href="层叠样式表的路径/*.css"/>
	<!--内接样式和外接样式的优先级遵循就近原则-->
</header>
 <body>
 	<!--行内样式，优先级最高-->
	<div style="width='100px';height='100px';">
		<div id="content">页面内容</div>
	</div>
</body>
 </html>

通配符选择器

<!DOCTYPE html>
 <html>
 <header>
	<meta charset="utf-8" />
	<title>css引入方式</title>
	<!--内接样式-->
	<style type="text/css">
		<!--下面的格式就是标签选择器,语法就是 标签名{样式}-->
		div{
			width:100px;
			height:100px;
		}
		<!--通配符选择器 语法: *{样式} ‘共性’ 选择所有的标签，设置其样	式，一般用于重置样式，如去除页面默认的内边距和外边距,一般不常用-->
		*{
			padding:0;
			margin:0;
		}
	</style>
	<!--外接样式-->
	<link rel="text/css" href="层叠样式表的路径/*.css"/>
	<!--内接样式和外接样式的优先级遵循就近原则-->
</header>
 <body>
 	<!--行内样式，优先级最高-->
	<div style="width='100px';height='100px';">
		<p></p>
	</div>
</body>
 </html>

重置样式
重置浏览器标签的样式表,因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
一般在创建项目之前会先创建一个reset.css文件，引入这个css文件，去除默认的样式

	html,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	font-weight:normal;
	vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
ol,ul,li {
	list-style:none;
}
blockquote,q {
	quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
th,td {
	vertical-align:middle;
}
/* custom */
a {
	outline:none;
	color:#16418a;
	text-decoration:none;
	-webkit-backface-visibility:hidden;
}
a:focus {
	outline:none;
}
input:focus,select:focus,textarea:focus {
	outline:-webkit-focus-ring-color auto 0;
}

去除超链接a标签的下划线

	a{
		text-decoration:none/underline/overline;
		<!--underline:表示有下划线
			overline:表示有上划线
			none:表示没有线
		-->
	}

自定义一个超链接a标签

		span{
			color:blue;
			text-decoration:underline;
			cursor:pointer;	
		}

去除列表 ul ol 前面默认样式

ul,ol{
	list-style:none;
}

Destiny,635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式表基本知识

引入css可以将我们的页面渲染的更好看样式表的引入方式行内样式内接样式外接样式（link/@import url=""） <!DOCTYPE html> <html> <header> <meta charset="utf-8" /> <title>css引入方式</title>  <style type="text/css"> div{ width:1
复制链接

扫一扫