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

CSS 总结01天

2015-11-30 17:38 633 查看 
<span style="font-size:24px;">简单的css知识点总结:
1.引用方式
1).直接在标签中使用
<body style = "background-color:red">
</body>

2).直接在html中使用
<style type = "text/css">
body{
background-color:red;
}
</style>

<body>
</body>

3).使用外部的css代码来使用
<link rel = "stylesheet" href = "styles.css" type = "text/css"/>

styles.css中的代码
body{
background-color:red;
}

4).使用外部的css代码来使用2
<style type = "text/css">
@import url(styles.css);
</style>

2.css的使用语法
1).标签的整合
h1{
color:red;
font-size:35px;
}

h1{
font_size:15px;
background-color:white;
}

结果等同于:(效率没有下面的高)
h1{
color:red;
font-size:15px;
background-color:white;
}

2).选择器共用同一个属性
p,h1{
background-color:red;
}

3).通配选择器
*{
color:red;
}

3.类选择器
1).class类选择器(html内部)
<style type = "text/css">
textcolor{
color:red;
}
</style>

<h1 class = "textcolor">这里是h1标签</h1>
<p class = "textcolor"> 这里是p标签</p>

2).class类选择器(外部调用)
<link rel = "stylesheet" href = "styles.css" type = "text/css"/>
styles.css 代码
textcolor{
color:red;
}

3).不同标签,同一个类名称的使用
p.textcolor{
color:blue;
}
h1.textcolor{
color:black;
}

使用同上
<p>这里是普通的P标签</p>
<p class = "textcolor"> 这里是有特殊标记的p标签</p>
<h1>这里是普通的h1标签</h1>
<h1 class = "textcolor"> 这里是有特殊标记的p标签</h1>

4).多种选择
p.import{
background-color:red;
}
p.warning{
font-size:35px;

}

p.import.warning{
font-size:10px;
}

使用状态
<p class = "import">这里是普通的P标签</p>
<p class = "warning">这里是普通的P标签</p>
<p class = "import warning">这里是普通的P标签</p>

4.id选择器
1).普通使用
<style type = "text/css">
#textcolor{
color:red;
}
</style>

<p id = "textcolor"> 这里是测试id选择器的p标签</p>

2).修饰特定的标签
<style type = "text/css">
#textcolor h1{
color:red;
}
</style>

<h1 id = "textcolor"> 这里是特定属性的标签h1</h1>

5.需要注意的地方
1).需要注意的是,尽量保证id和class选择器的名称一致,可能在html中会区分大小写.

2).在HTML中一个标签只能有一个id，但是可以有多个class。

3).一个id在一个HTML页面中必须是唯一的，一个class可以被多个标签元素拥有。

4).id和class 之间的区别
<1>id选择器只能应用于具体的一个标签(注意不是一种),类选择器却可以应用到多个标签(复用)
<2>优先级不同：id选择器大于类选择器。

5).什么时候用id选择器or类选择器
一般情况下，页面唯一不会复用的可以使用id选择器，比如页头和页脚等。如果需要复用的样式，那么一般使用类选择器，比如表格，列表等。
一般类选择器使用更多。

6.简单选择器
1).
<style type = "text/css">
[title]{
color:red;
}
</style>

<h1 title = "hello world"> hello</h1>

2).对某个标签的属性使用
<style type = "text/css">
a[href]{
color:red;
}
</style>

<a href = "http://www.baidu.com/">baidu</a>

3).多个属性值放到一块儿使用
<style type = "text/css">
a[href][title]{
color:red;
}
</style>

<a title = "hello" href = "http://www.baidu.com/">baidu</a>

4).特定值
<style type = "text/css">
[title = hello]{
color:red;
}
</style>

<h1 title = "hello"> 这里是对应的标签</h1>
<h1 title = "world"> 这里是不对应的标签</h1>

7).匹配某个字段
<style type = "text/css">
[title ~= hello]{
color:red;
}
</style>

<h1 title = "hello world"> 这里是对应的标签</h1>
<h1 title = "world hello"> 这里是对应的标签</h1>
<h1 title = "lo"> 这里是不对应的标签</h1>
<h1 title = "wld"> 这里是不对应的标签</h1>

8).匹配某个字段
<style type = "text/css">
[title |= lo]{
color:red;
}
</style>

<h1 title = "hello world"> 这里是对应的标签</h1>
<h1 title = "world hello"> 这里是对应的标签</h1>
<h1 title = "lo"> 这里是对应的标签</h1>
<h1 title = "wld"> 这里是不对应的标签</h1>

</span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航