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>
