写在前面:
学习网站:https://www.w3school.com.cn
属性style |
<style> |
<link rel='stylesheet' href='url'> |
div .class #id * |
A,B(A和B) A B(A下的B) A>B(B上的A) |
A[属性='值'] A:状态 A:first-child |
float (左右) margin: auto水平、vertical-align: middle垂直(外边距,上右下左) padding(内边距)(固定大小:box-sizing: border-box) |
border-(top right bottom left)-(style color width) border: 1px solid red; border-radius: 5px |
font-size line-height text-align: center color |
backgroung: #ff0000 background: url('url') no-repeat center |
1. 简单介绍+语法
三种使用方式
内联:在标签内使用style属性 style=' color:red; '
内部:head标签内,定义style标签,里面写CSS代码
外部:head标签内,定义link标签引入外部.css文件 <link rel='stylesheet' href='url'>
也可以在style标签内引入:@import 'url'
CSS语法:
选择器{
属性名1 : 属性值1;
属性名2 : 属性值2
}
2. 选择器
基础选择器
标签名 {}
.class {}
#id {}
扩展选择器
* {} :所有元素
选择器1, 选择器2 {} :并集
选择器1 选择器2 {} :子(1下的2)
选择器1 > 选择器2 {} :父(2上的1)
选择器:first-child {} :第一个这个选择器(last-child最后一个)
标签名[属性名='属性值'] {} :有这个属性值的标签
标签名:状态 {} :这个状态下的标签
a的状态:
link初始状态,hover鼠标悬浮,active正在访问,visited被访问过
3. 属性
字体
color: #ff0000;
font-size: 30px;
text-align: center; 对齐方式(right右对齐)
line-height: 50px; 行高(值等于height的值,则文字垂直居中)
边框(复合属性)
border: 1px solid red; 宽度1像素,实线,红色
border-left-color (top,right,bottom,left) ( color, style, width )
border-radius: 5px; 圆角
尺寸
width, height
背景
background: url('图片url') no-repeat center; 图片为背景,图片不重复,居中
background-color: #ff0000;
盒子模型(页面布局)
margin: auto; 水平居中(垂直居中:vertical-align: middle; )------ 外边距(top,right,bottom,left)
padding ------内边距;默认内边距会影响盒子大小,要设置好大小(让宽高不变):box-sizing: border-box;
float ------浮动(到一行) (left,right)