`

浅谈CSS样式定义

阅读更多
定义CSS样式
定义语法为:selector {property: value}
--selector选择符
--property属性	value值
例子:
p{
	text-algin:center
	color:black
}

优先级顺序(高到低)为:ID选择符->类选择符->标签选择符

1.样式选择符(即HTML标签如body table p h1..)
好处:避免重复定义
h1,h2,h3{color:blue}/*h1~h3标签文本均为蓝色*/
p,table{font-size:21pt}/*段落和表格中的文本的大小均为21号字*/

2.类选择符
可以为相同元素分类定义不同的样式,需要在类的名称前加一个'.'号
简便定义方法(可以不指定具体标签 即可以被用于所有标签上)
.center{
	text-align:center
}
引用实例:
<h1 class="center">标题是居中排列的</h1>
<p class="center>段落也为居中排列的</p>

3.ID选择符
为某个样式指定一个唯一ID,然后通过ID来引用样式
<style type="text/css">
	#center {text-align:center}
</style>
引用实例:
<body>
	<p id="center">文字居中</p>
</body>

*选择符的嵌套
例子:
<style type="text/css">
		#main li{color:blue}
</style>
引用实例:
<body>
	<div id="main">
		<ul>
			<li>有钱</li>
			<li>就是任性</li>
		</ul>
		<p>程序员也调皮了喔</p>
/*只有<li>标签中的受影响<p>标签的不受影响喔*/
	</div>
</body>

*样式表的层叠即继承
规则:外部元素的样式会被钙元素所包含的其他元素继承
实例:
<html>
	<head>
		<style type="text/css">
			div{
				font-size:36px;
				color:blue;
			}
			p{
				color:red;
			}
		  </style>
	</head>
  <body>
	<div id="main">
		<ul>
			<li>testDivMain</li>	
		</ul>
			<p>testP</p>
	  </div>
  </body>
</html>
/*结果:继承 P和Div的字体大小一致 Div文字蓝色36px 就近原则优先级 p元素显示红色36px*/

 

分享到:
评论

相关推荐

    浅谈CSS中的百分比

    主要介绍了浅谈CSS中的百分比,在定义CSS样式的时候经常会用的 “%”这个长度单位,但是这个百分比到底是相对于谁的百分比呢

    浅谈css和@import区别及用法

    css和@import都是调用外部样式表的方法。 一、用法 (1)link: &lt;link rel="stylesheet" type="text/css" href="css文件路径"/&gt; (2)@import: ...&lt;style type="text/css"&...(2)link引用CSS样式,是和页面加载

    浅谈CSS伪类与伪元素

    伪类选择器:CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接,与:visited互斥。 :hover 伪类将应用于有鼠标指针悬停于其上的元素。 :active 伪类将应用于被激活的元素,如被点击的链接、...

    浅谈js中同名函数和同名变量的执行问题

    经测试未写成闭包形式的在同一个文件中或者不同的 js...另外,定义的变量与css样式也是以后面的为准。 但是对于函数,经测试这样写却会执行前面的函数直接量即弹出1,暂时不知道是为什么。 [removed] var t = functio

    浅谈HTML中src和href之间的区别

    href 属性说明本地Web资源和定义的资源建立了链接。 如: &lt;link href=style.css rel=stylesheet/&gt; 浏览器知道这个资源是一个样式表,解析到这个元素时不会停止,但是渲染页面可能会停止,因为浏览器需要样式...

    ASP.NET3.5从入门到精通

    12.4.2 创建CSS 层叠样式表 12.4.3 创建框架集 12.5 小结 第 13 章 ASP.NET 内置对象,应用程序配置和缓存 13.1 ASP.NET 内置对象 13.1.1 Request 传递请求对象 13.1.2 Response 请求响应对象 13.1.3 Application ...

    ASP.NET 3.5 开发大全11-15

    12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...

    ASP.NET 3.5 开发大全

    12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...

    ASP.NET 3.5 开发大全1-5

    12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...

    ASP.NET 3.5 开发大全word课件

    12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...

    ASPNET35开发大全第一章

    12.4.2 创建CSS层叠样式表 12.4.3 创建框架集 12.5 小结 第13章 ASP.NET内置对象,应用程序配置和缓存 13.1 ASP.NET内置对象 13.1.1 Request传递请求对象 13.1.2 Response请求响应对象 13.1.3 Application状态对象 ...

    asp.net知识库

    利用自定义属性,定义枚举值的详细文本 Web标准和ASP.NET - 第一部分 XHTML介绍 在ASP.NET页面中推荐使用覆写(Override)而不是事件处理(Event Handler) 常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试...

Global site tag (gtag.js) - Google Analytics