码迷,mamicode.com
首页 > Web开发 > 详细

css基础知识+css选择符(元素选择符、关系选择符)

时间:2015-04-05 14:42:14      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:html   css   css选择符   

首先我先介绍在html网页中怎么使用导入css样式的方法

1、行内样式:<p style="color:red">行内样式使用css</p>

2、页内样式:在head标签里设置

<span style="font-size:18px;"><head>
<style>
p{
color:red
}
</style>
</head>
<body>
<p>页内使用css样式</p>
</body></span>
3、外部链接方式:首先你要先在外部准备好做好的css样式表
<span style="font-size:18px;"><head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<p>外部链接css样式表设置样式,要注意heaf="这里就是要导入css样式表的地址"</p>
</body></span>
接下来我就像大家介绍css层叠样式

元素选择符:类选择符、id选择符、类选择符、通配选择符

类型选择符:以元素的类标签进行选择

<span style="font-size:18px;"><style>
        h1{
        	color:blue;
        }
</style></span>
技术分享技术分享


id选择符:

<span style="font-size:18px;"><head>
<style>
#s{
color:hsl(0,0,50);
}
</style>
</head>
</span>
技术分享

技术分享

类选择符:

<span style="font-size:18px;"><head>
<style>
.title{
color:red;
}
</style>
</head></span>
技术分享技术分享

通配选择符:

<span style="font-size:18px;"><head>
<style>
*{
color:red;
}
</style>
</head></span>

技术分享技术分享

通配选择符选择的类型较为抽象,慎用!

接下来为大家哦介绍关系选择符:包含选择符、子选择符、相邻选择符、兄弟选择符

包含选择符:

<span style="font-size:18px;">ul li{
color:red;
}</span>
ul标签以下的所有li标签都被设置了样式

技术分享技术分享

子选择符:

<span style="font-size:18px;"><head>
<style>
ol>li{
color:red;
}
</style>
</head></span>
ol下面的子一级元素被选中

技术分享技术分享

相邻选择符:

<span style="font-size:18px;"><head>
<style>
li+li{
text-indent:2em;
color:red;
}
</style>
</head></span>
选中li标签后面紧挨着的兄弟级别li元素

技术分享技术分享

兄弟选择符:

<span style="font-size:18px;"><head>
<style>
li~li{
color:red;
text-indent:2em;
}
</style>
</head></span>
选择li标签后面所有的兄弟级别元素

技术分享技术分享

以上就是我要介绍的。

另外再补充几点:

首行缩进:text-indent:4em;

居中显示:teext-align:center;

关于优先级:

行内css>页内css>外部css

#id>.class

后面设置的样式若是重复了前面的,则前面设置的样式要被覆盖。

比如说:技术分享技术分享


具体的要覆盖抽象的

比如当用同时设置通配选择符合元素选择符,使用元素选择符的那部分将不被通配选择符那一部分覆盖。

css基础知识+css选择符(元素选择符、关系选择符)

标签:html   css   css选择符   

原文地址:http://blog.csdn.net/qq_24928451/article/details/44886671

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!