CSS,层叠样式表,用于控制页面的样式.CSS能够对网页中元素的位置进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离.
CSS的基本语法规则:选择器+{N条声明}
选择器决定修改谁,声明表示修改的内容.声明的属性是键值对.CSS有三种引入方式,行内样式,内部样式,外部样式.为了方便介绍,接下来主要使用内部样式.在介绍之前,CSS有一些书写规范需要介绍:统一使用小写字母,冒号后面需要带有空格,选择器和{之间也需要带有空格.
CSS选择器:CSS选择器的主要功能就是选中页面指定的标签元素,选中了元素,才可以设置元素的属性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面</title>
</head>
<body>
<div class="font1"> 这是一个div,class为font1</div>
<div class="font1"> 这是一个div,class为font1</div>
<div><a href="#">这是一个div</a></div>
<ul>
<li>t1</li>
<li>t2</li>
<li><a href="#">t3</a></li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<button id="提交">提交</button>
</body>
</html>
原始的页面如下:
CSS选择器主要分下面几种:
1.标签选择器,针对标签进行选择
比如选择所有的<li>标签设置成绿色,选择所有的<div>标签设置成红色.
<style>
li {
color: green;
}
div {
color: red;
}
</style>
发现有两个超链接没有按照预期进行变色,原意是CSS中的就近原则,要想使超链接的字变色,需要使用a标签进行设置.
<style>
li {
color: green;
}
div {
color: red;
}
a {
color: rebeccapurple;
}
</style>
2.类选择器,对每一个标签都可以设置类名,然后通过类名来选择不同的标签.上面的代码设置了类名font1,因此可以通过类选择器来选中标签进行设置.需要注意的是,类选择器的用法式 .+类名
<style>
.font1 {
color: red;
}
.t222 {
color: green;
}
.t231 {
color: pink;
}
</style>
3.ID选择器,通过标签的ID来选中标签,要注意在ID之前要加一个#
<style>
#t9 {
color: aqua;
}
#提交 {
color: white;
}
</style>
4.通配符选择器,即选中页面内的所有元素*
<style>
* {
color: pink;
}
</style>
5.复合选择器
<style>
ul li a {
color: white;
}
</style>
以上三个标签选择器中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合.不一定是父子标签,也可以是孙子标签.如果需要选择多种标签,可以使用,分隔表示同时选中,两侧的标签.
常用CSS
1.font-size:设置字体的大小.
<style>
.font1 {
font-size: 90px;
}
</style>
2.border:边框,border-width 设置边框粗细 border-style 设置边框样式 border-color 设置边框颜色.
<style>
table {
border-width: 3px;
border-color: pink;
border-style: dashed;
}
</style>
3.width/heirht
width设置宽度,height设置高度.只有块级元素才可以设置宽度和高度.常见的块级元素:h1-h6,p,div
<style>
table {
border-width: 3px;
border-color: pink;
border-style: dashed;
width: 300px;
height: 300px;
}
</style>
