CSS介绍
什么是CSS
基本语法规范
CSS 要写到 style 标签中(后⾯还会介绍其他写法)style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换)
引入方式
| 引入方式 | 语法描述 | 示例 |
| 行内样式 |
在标签内使⽤style属性，
属性值是css属性键值对
| <div style="color:red">红色</div> |
| 内部样式 |
定义<style>标签，
在标签内部定义css样式
| <style>h1{
}</style> |
| 外部样式 |
定义<link>标签，
通过href属性引⼊外部css⽂件
| <link rel="stylesheet" href="CSS文件目录"> |
规范
CSS选择器
CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性
CSS选择器主要分以下⼏种:
1）标签选择器 通过标签来选择
2）类选择器 通过class来选择（.class）
3）ID选择器 通过ID来选择（#ID）
4）复合选择器 对元素进行分类，通过class来标识类名
5）通用选择器 （通配符选择器） 对元素进行起名，通过ID来标识（ID不能重复）
<style>
div{
color:red;
} //标签选择器
.center{
color:red;
} //类选择器
#test{
color:red;
} //ID选择器
</style>
<div>已有账号？</div>
<sapn class="center">已有账号？</span>
<span class="center" id="test">已有账号？</sapn>span>
复合选择器——>有多个单选择器组成，选择器之间，使用 空格 隔开
.order li{
color:red;
}
<ol class="order">
<li style=" color:blue;">1111</li>
<li>2222</li>
<li>3333</li>
</ol>
通配符选择器
/* 设置⻚⾯所有元素 , 颜⾊为红⾊ */* {color : red;}
注意：
常见的CSS样式
< div class = "text" > 我是⽂本 </ div >
1）color: 设置字体颜⾊
.text{
color:red;
}
2）font-size: 设置字体⼤⼩
.text{
color:red;
font-size: 32px;
}
3）border: 边框
边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断
.text{
color:red;
font-size: 32px;
border: 1px solid blue;
}
分别为边框粗细, 边框样式, 边框颜⾊
.text{
border-width: 1px;
border-style: solid;
border-color: purple;
} //两处的代码是等价的
4）width / height
块级元素是HTML标签的⼀种显示模式, 对应的还有行内元素常⻅块级元素: h1-h6, p, div 等常⻅⾏内元素: a span块级元素独占⼀⾏, 可以设置宽⾼⾏内元素不独占⼀⾏, 不能设置宽⾼
.text{
color:red;
font-size: 32px;
border: 1px solid blue;
width: 200px;
height: 100px;
}
.text{
color:red;
font-size: 32px;
border: 1px solid blue;
width: 200px;
height: 100px;
margin: 10px 20px 30px 40px;
}
.text{
color:red;
font-size: 32px;
border: 1px solid blue;
width: 200px;
height: 100px;
padding-right: 10px;
padding-left: 20px;
margin: 10px 20px 30px 40px;
}
html{
padding: 20px;
}
