css是英文cascading style sheets的缩写,称为层叠样式表,用于对页面进行美化。存在方式有三种:
元素内联、页面嵌入和外部引入。比较三种方式的优缺点。
语法:style='key1:value;key2:value2;'
在标签中使用style='xx:xxx;'
在页面中嵌入:1f9ab55d55ddd0862161573b29712484 531ac245ce3e4fe3d50054a55f265927块
引入外部css文件
必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员必须知道是如何实现的。
分别看下上面三种方式怎么使用:
1、在标签中使用1f9ab55d55ddd0862161573b29712484 531ac245ce3e4fe3d50054a55f265927块
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/css"; charset="utf-8">
<title>页面一</title>
<link rel="stylesheet" href="commom.css" />
</head>
<body>
<div style="background-color:red;">123</div>
</body>
</html>
2、在页面中嵌入 <style type='text/css'> </style>块
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/css"; charset="utf-8">
<title>页面一</title>
<link rel="stylesheet" href="commom.css" />
<style>
.logo{
background-color:red;
}
</style>
</head>
<body>
<div class='logo'>123456</div>
<div class='logo'>aaa</div>
</body>
</html>
即在代码中添加一个<style></style>代码块,自定义一个样式,然后在后面的代码中可以反复调用
3、引入外部css文件
如果有多个html文件需要引用自定义的css样式,那么按照第二种方式的做法就需要在每一个html文件中定义一个样式,为了解决这个问题,可以定义一个文件,写入自定义的样式,然后从文件中调用这个样式即可。
style的写法:
<style>
.logo{
background-color:red;
}
#logo{
background-color:red;
}
a,div{
color:red;
}
a div{
color:red
}
input[type='text']{
color:blue
}
.logo a,.logo p{
font-size:56px;
}
</style>
1、class选择器
.logo表示class='logo'时,引用该样式
2、id选择器
#logo表示id='logo'时,引用该样式
3、组合选择器选择器
a,div表示所有的a标签和div标签引用该样式
4、关联选择器
a div表示层级关系,即所有a标签下面的div标签应用该样式。
5、属性选择器
input[type='text'],属性标签,表示所有的type为'text'的标签引用该样式
6、.logo a,.logo p表示class='logo'时,下面的所有a标签和class='logo'时下面所有的p标签,引用该样式
更多css样式选择器 。