认识css
1.css的三种引入方式(推荐使用外联式,把结构与样式分离)
内嵌式css:<div style="width: 200px; height: 200px; background-color: red;"></div>
在标签中添加style属性,里面可以写相关的样式。
内联式css:在html表格中添加style标签,利用选择器在标签中设置css样式。
外联式:通过link标签引入一个外部css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="mycss.css">
<style>
.div1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
<body>
<div style="width: 200px; height: 200px; background-color: red;"></div>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
2.css选择器
1、标签选择器(如:body,div,p,ul,li)。ele{}
2、.类选择器 有相同类名的标签都会应用此样式。(如:class=“head”,class=“head_logo”) 。.head{}
3、ID选择器(如:id=“name”,id=“name_txt”)。#{}
4、全局选择器(如:*号)。*{}
5、.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)。.classname1 .classname2{}
6、.继承选择器(如:div p,注意两选择器用空格键分开)。dip p {}
7、伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)。a:hover{}
8、字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)
2.利用css设置文本和字体样式
内容较多,参考菜鸟教程:
CSS Text(文本) | 菜鸟教程 (runoob.com)
CSS Fonts(字体) | 菜鸟教程 (runoob.com)
或者MND手册: