CSS全称 “层叠样式表”,主要用于在浏览器中的内容的显示样式,如:大小、颜色、字体加粗等。
使用CSS可以通过定义某一个样式,使不同网页位置上的文字有着统一的样式。
一、CSS由选择符和声明组成,而声明由属性和值组成。
选择符:又叫选择器,指明网页要应用样式的对象。
声明:在 { } 内的就是声明。属性:值 。如果有多个声明,则用 ;连接。
二、注释代码
CSS用 /* 注释 */ 来进行注释。(html是用<!- -注释- ->)
三、CSS代码插入的形式有三种 :内联式、嵌入式、外部式
1、内联式CSS样式
内联式就是把CSS代码直接写入Html标签中。(要写在开始标签中)
内联式的CSS代码要写在style=" "双引号中,如果有多条CSS样式,可以使用分号 ; 隔开。
2、嵌入式CSS样式
把CSS代码写入 < style type=“text/css”> < /style> 之间。
3、外部式(外联式)
将CSS代码单独写入到一个外部文件中,这个CSS文件以 " .css"为拓展名。在< head>标签之间(不是style)使用< link>标签将CSS样式文件加入到Html文件中。
1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel=“stylesheet” type=“text/css” 是固定写法不可修改。
3、< link>标签位置一般写在< head>标签之内。
三种写法的优先级:内联式 > 嵌入式 > 外联式 。
其中,嵌入式 > 外联式的前提是,嵌入式CSS样式所写的位置要在外联式的后面。
四、选择器
1、标签选择器
如:p、h1、h2、span、head等
2、类选择器
使用方法:
第一步:需要设样式的内容对应的标签要添加class属性。
第二步:设置类选择器的样式
3、id选择器
设置id=“id名称”
为id选择器设置样式
类选择器和id选择器区别:
类选择器使用点 . ,而id选择器使用 # 。同一个类选择器能多次使用,而同一个id选择器在文档中只能使用一次。
可以使用类选择器列表方法为一个元素设置多个样式。而id选择器不可以。
4、子选择器
大于符号> ,用于选择指定标签元素的第一代子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello HTML</title>
<style>
#test>li{
border:1px solid aquamarine;
}
</style>>
</head>
<body>
<label>子代选择器</label>>
<div name="div1">
<ol id="test">
<li>第一代
<ul>
<li>第二代</li>>
<li>第二代</li>>
</ul>>
</li>>
<li>第一代
<ul>
<li>第二代</li>>
<li>第二代</li>>
</ul>>
</li>>
</ol>>
</div>>
</body>
</html>
5、包含(后代)选择器
使用空格 ,来选择指定标签元素的 所有子后代元素。
将上述代码中的:
#test>li{ border:1px solid aquamarine; }
改成:
#test li{ border:1px solid aquamarine; }
6、通用选择器
使用一个通配符(*)来指定使用html中的所有标签元素。
如:下面代码会使 使用html标签中文本字体变成红色。
7、伪类选择符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello HTML</title>
<style>
a:hover{
font-size:30px;
color:yellow;
}
</style>>
</head>
<body>
<label>伪类选择符</label>>
<div name="div1">
<p>这是一段很长的关于<a href="http://www.biadu.com">波多野结衣</a>>的话。</p>>
</div>>
</body>
</html>
运行结果:当鼠标放在波多野结衣上时,字体会变化。
8、分组选择符
使用符号 ,来进行连接多个标签元素。
.first,#second{
color:blue;
font-size=20px;
}
如:
相当于:
五、继承、特殊性、层叠、重要性
1、继承:
CSS中的 某一些样式 具有继承性,继承是一种规则,意思是,该样式不仅应用到某一个标签元素,还将会应用到该标签的子后代元素上。比如:颜色。但是 有一些样式不具有继承性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello HTML</title>
<style>
p{
color:red; /*color具有继承性*/
border:1px solid greenyellow; /*border不具有继承性*/
}
</style>>
</head>
<body>
<div name="div1">
<p>这是一段很长很长的话,是关于<span>鲁迅</span>先生的。</p>>
</div>>
</body>
</html>
结果如下:color样式不仅应用到了< p>标签上,还应用到他的子后代< span>标签上。而border样式只应用到了< p>标签上。
2、特殊性:
如果对同一设置不同的CSS样式代码,浏览器则会按照权值的大小来选择应用哪一种样式,权值高的就用应用。
3、层叠:
在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
由层叠的性质可知:CSS样式的优先级,内联式>嵌入式>外联式
4、重要性:
有时某些样式需要被设置成最高权值,这是可以使用 !important。
六、文字排版
1、字体
body{
font-family:"Microsoft Yahei"; /*设字体为微软雅黑*/
}
注意:使用 “Microsoft Yahei” 或 “微软雅黑” 都可以显示,但是使用字母会更兼容。
2、颜色
p{
color:red; //设字体为红色
}
3、字号
span{
font-size:20px; //设字号为20px
}
4、粗体
h{
font-weight:bold; //加粗
}
5、斜体
label{
font-style:italic; //设置斜体
}
6、下划线
< label style="text-decoration:underline"> Hello Man < /label>
7、删除线
< p>原价:
< span style="text-decoration:line-through"> 300元 < /span>
 
现价:299元
< /p>
七、段落排版
1、缩进
p{
text-indent:2em; /*段落首行缩进2个字符*/
}
2、行间距
p{
line-height: 1.5em ; /*调整段落行间距为1.5em*/
}
3、文字间距、单词间距、字母间距
p{
letter-spacing:50px; /*设置文字之间的间距 或 字母之间的 间距*/
}
h1{
word-spacing:50px; /*设置单词之间的间距*/
}
注意:要区分 文字之间、字母之间、单词之间的间距。
4、对齐
为 块状元素 中的文本、图片设置为居中、居左 或 居右。
div{
text-align:center;/*居中*/
}
p{
text-align:left; /*居左*/
}
p{
text-align:right; /*居右*/
}
八、盒模型
块状元素、内联元素、块状内联元素
1、什么是盒模型?
盒模型就是盒状的边框,里面内容为文本、图片或其他标签元素。盒模型有 内填充 padding(内容到盒边框的距离)、外边距 margin(盒模型之间的距离)、边框 border(盒模型边框)。padding、margin、border 都有四个方向(left、right、top、botom)。像< div>、< ul> 、< table>等块状元素都具有盒模型的特征。
2、边框 border
可以设置边框的 粗细(border-width)、样式(border-style)、颜色(border-color) 三个属性。
边框样式(border-style)有 dashed(虚线)、dotted(点线)、solid(实线)。
3、填充
上、右、下、左(顺时针)。
九、布局模型
流动模型(Flow)、浮动布局(Float)、层模型(Layer)。
网页默认是流动布局。
1、流动模型
特点:块状元素会自上而下的按顺序垂直延伸分布。内联元素从左至右水平方向分布。
2、浮动模型
添加 float:left 设置为左浮。