您的位置：首页 > Web前端 > CSS

CSS选择器及CSS样式表

2016-06-08 10:44 501 查看

前言

牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式，这些选择器之间肯定有它的优先级，包括CSS样式也一样，也是有它的优先级，本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级。

内容

CSS语法

由两个主要的部分构成：选择器，以及一条或者多条声明。

CSS选择器部分

DEMO

标记选择器

Html部分

<!--标记选择器-->
<h1>Hello World</h1>

CSS部分

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

id选择器

Html部分

<!--id选择器-->
<div id="iddemo">Zhoulitong</div>

CSS部分

#iddemo{
color:red;
font-size:12px;
}

类别选择器

Html部分

<!--类别选择器-->
<div class="iddemo">Zhoulitong</div>

CSS部分

.iddemo{
color:red;
font-size:12px;
}

最常用的选择器就上面的三种，它们的效率优先级：id选择器（#id）>类选择器（.class）>标记选择器（div，h1，p），其实还有其他选择器比如：相邻选择器，子选择期，后代选择器，通配符选择器，属性选择器，伪类选择器，这些不是特别常用的，在这里不做解释。

CSS样式表部分

外部样式表（链接式）：当样式需要被应用到多个页面时候，外部样式将是理想的选择。使用该样式表可以通过更改一个文件来改变整个站点外观。

<head>
<title>@ViewBag.Title</title>
@*链接样式*@
<link href="../../CSS/Master.css" rel="stylesheet" />

</head>

内部样式表（内嵌式）：单个文件需要时用到内部样式表。一般在通过<style></style>标签定义内部样式表。

<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式（行内样式）：特殊的样式需要应用到个别元素时，可以采用内联样式，使内联样式的方法是在相关标签中使用样式属性。采用style=””形式。

@*行内样式*@
<div style="margin-top :30px;margin-right :20px; float:right ;width :600px;text-align :center ;">
检索类型：<select id="SelectText" style ="padding-left:4px;padding-right :4px; ">
<option>书籍类别</option>
<option>书籍作者</option>
<option>书籍名称</option>
</select>
   
检索内容：<input id="SearchText" type="text" />
<input id="Button1" type="button" value=" 检索 " onclick="SearchClick()" />
</div>

各种方式的优先级：内联样式>外部样式表>内部样式表

感谢您的宝贵时间···

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航