如果说HTML给一个网页赋予了骨架，那么CSS便可以赋予其灵魂。
此篇分为两部分
- css的语法
- css的引用
一、CSS的语法
1.1基本用法
- 对HTML中的某一种标签进行描述
div{
margin: 0;
padding: 0;
}
/*所有的<div>都会被加上该样式，但值得一提的是，若在本次声明后
再次对某一指定<div>进行了声明，则会覆盖or追加新的效果*/
- 对HTML中，包含指定class的标签进行描述
.text_a{
font-size: 12px;
color: red;
}
- 对HTML中，某一指定（包含ID 的）标签进行描述
#password{
font-size: 12px;
}
1.2 加入HTML层级关系
- 用HTML层级关系，告别起名的忧伤
.head{
width: 50px;
height: 50px;
}
.head>ul{
width: inhert;
}
.head>ul>li{
font-size: 12px;
}
- 将HTML中的层级关系，展现在css中
.a{
width: 50px;
height: 50px;
}
.a .b{
width: inhert;
}
.a .b .c{
font-size: 12px;
}
1.3 :nth-child(n)选择器
当HTML结构为
<div class='a'>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
时，可以使用选择器分别对<p>标签进行不同的声明
.a{
text-aline: center;
}
.a p:nth-child(1){
font-size: 12px;
}
.a p:nth-child(2){
font-size: 14px;
}
.a p:nth-child(3){
font-size: 16px;
}
:nth-child()选择器也可以套用(an+b)公式,详情参考此处
1.4 :after 选择器
- 对指定class进行追加描述
.clearFix::after{
content: '追加文字内容';
clear: both;
display: block;
}
/*当content的值赋为空时，它就是一个很好用的闭包浮动样式（清除浮动）*/
【1.3与1.4均为css伪类，还有很多伪类属性，更多属性值参考此处】
二、在HTML中引入CSS
2.1 在<head>标签中添加<style>标签
<head>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
float: left;
}
.
.
.
</style>
</head>
2.2 引用外联样式表
<head>
<link rel="stylesheet" type="text/css" href="css文件路径" />
</head>
2.3 在标签内直接添加样式
<div class='head' style='width:100px;height:100px;'>
<p style='font-size:12px;'>我叫小明</p>
</div>
/*使用此方法添加的样式，优先级高于2.1与2.2
在2.1或2.2的属性值后面加入!important，则可提升优先级至最高，且超过2.3的优先级，例如：*/
.nav{
float: left !important;
}
网友评论