css学习笔记:
一:css书写使用;
1.行内式:
直接书写在标签中的一个style属性中,属性值是包含所有的css样式属性。
例如:<div style="width:300px;height:300px;background-color: red;font-size: 30px;">我是div标签</div>
2.嵌入式(内嵌式):
书写在head标签里一个style标签里。
例如:
<style type="text/css">
div{
width: 100px;
height: 200px;
background-color: blue;
font-size:50px;
}
</style>
3.外链式:通过link标签引入外部的css文件。
Css文件,拓展名.css。Css文件的样式可直接书写,不用style样式包裹。
例如:书写header样式;
1.在css文件中写header样式:
`<style type="text/css">
div{
width: 100px;
height: 200px;
background-color: blue;
font-size:50px;
}
</style>`
2>.在head标签里书写link标签
<link rel="stylesheet" type="text/css" href="" />
①Rel:css文件和html的关系,属性值“stylesheet”样式表。
②Type:类型。属性值“text/css”表示css文件为纯文本。(type类型可省略不写)
③Href:路径。外部引入css文件的路径。
4.css一些杂项。
1.Css中键值对的书写语法:
K:v
k: key:属性名 v:属性值
例如:width:200px;height:200px;
2.css中每一条样式属性以分号结尾。
3.css中每条属性独占一行,逐条书写。(便于我们初学者读自己代码)
4.css中对空格,缩进,换行不敏感。
例如:
1,div{
width: 100px;
height: 200px;
background-color: blue;
font-size:50px;
}
2,div{
width: 100px;height: 200px;background-color: blue;font-size:50px;
}
二,css选择器
1>标签选择器
1.书写:
<div>我是一个div标签</div>
<style>
div{
width: 200px;
height:200px;
}
</style>
2.标签选择器可以选中页面所有的同种标签,不管标签嵌套的多深,都可以选中。
3.用途:
①用于清楚或者重置默认样式。
div{
margin: 0;
padding: 0;
}
②清除ul列表小圆点。
ul{
list-style: none;
}
③3.清除超级链接蓝色,下划线。
a{
color: black;
text-decoration: none;
}
2id选择器
①Id选择器:通过标签的id属性进行选择。
②Id属性值命名规则:严格区分大小写。(check!=CHECK)必须以字母开头,可以有数字和下划线,短横。
③#id属性值 id属性名和#之间无空格。
④一个网页中只能出现一个id名(id属性名唯一)
⑤同一个标签既可以被标签选择器选中,也可以被id选择器选中,设置不同的样式属性,渲染在页面上。(css的层叠性)。
例如:
<p id="tom">我是一个p标签</p>
#tom{
width: 200px;
height: 200px;
font-size: 50px;
font-family: "微软雅黑";
}
3类选择器
①类选择器是通过标签的class属性进行选择。
写法:类名(点和类名之间没有空格)类名命名规范和id属性的命名规范相同。
例如:
<p class="jack">我是一个p标签</p>
.jack{
width: 100px;
height: 100px;
background-color: red;
}
②使用注意点:
类选择器的特殊应用:原子类,(公共类)。我们可以将一个类名只保存一个属性,某个元素想添加该类名,便于书写。
例如:
.fs20{
font-size: 20px;
}
给上述jack添加字号为20px:<p class="jack fs20" >我是一个p标签</p>
【可以将原子类fs20添加给任何一个p标签,原子类可自己定义。实际运用要书写相同样式,可以直接书写相同类名。】
(一个标签可以有多个类名,类名之间用空格隔开。)
4.通配符
通配符会选中页面上所有的标签,甚至包括body.
用于:快速清除默认样式;
例如:
*{
padding:0;
margin:0;
}