<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>
CSS 总结01天
最新推荐文章于 2023-08-02 14:47:27 发布