常用属性:
字体属性:
font:bold 20px "宋体";
font-weight:bold bolder;
font-size:30px; em rem
font-family:"宋体" "微软雅黑"
文本属性:
color:rgb(0-255,0-255,0-255) #ccc
line-height:18px; 字体上下间距 垂直居中 行高等于高度
text-align:left center right; 水平居中
letter-spacing:10px;
text-indent:30px; 左边的字体缩进距离
text-decoration:none underline overline line-through;
鼠标样式:
cursor:default pointer mover help text wait;
列表属性:
list-style-type:square cycle disc;
list-style-image:url("图片");
背景属性:
网页上的图:
1.img 标签 图上没有内容
2.背景图 适合用在 元素上有内容 不会撑开内容
background-image: url("./img/bd.png"); //路径
background-repeat: no-repeat repeat-x repeat-y; //平铺
background-size: cover; //设置背景图大小
雪碧图:--------------------------->>>>>>>>重点
CSS3新增选择器:
标签选择器 类选择器 id选择器
1. * 用于选中所有的元素
2. > 用于选中父子关系节点
3. 空格 div p p只要包含在div中即可选中
4. , div,p{color:red;} 多个选择器之间共用同一个样式
div{color:red;}
p{color:red;}
5. + 毗邻元素选择器E+F 匹配紧邻E元素之后的同级F元素
6. ~ 毗邻元素选择器E~F 匹配E元素之后的同级F元素
7. 属性选择器: 表单
E[attr] 匹配有这个属性
E[attr="值"] 匹配有这个属性并且值相等
E[attr*="值"] 匹配有这个属性值包含指定的数据
E[attr^="值"] 匹配有这个属性值以指定的数据开头
E[attr$="值"] 匹配有这个属性值以指定的数据结尾
8.伪类选择器:
选个数:
:nth-child(n)
p:nth-child(2) p标签 是在其父元素必须排第二个
:nth-of-type(n)
p:nth-of-type(2) p标签 在其父元素中第二个P标签
:nth-child(1) === :first-child
:nth-of-type(1)===:first-of-type
:nth-child(2n) :nth-child(even) 偶数
:nth-child(2n+1) :nth-child(odd) 奇数
动态(状态)伪类:
:hover 鼠标移动上去
:link 默认状态
:active 激活 点击下去没松手
:visited 点击完成后
:focus 获得焦点 表单
:selected 下拉列表中被选中的项
:checked 单选按钮/复选框选中的项
:disabled 选中被禁用
:enabled 选中启用
9.伪元素选择器:
::first-letter 第一个字母
::first-line 第一行
::after 在后面加内容
::before 在前面加内容
::selection 选中区域的效果
10CSS权重计算方式:
计算表
权重值 A B C D
类型
行内样式 1 0 0 0 (1000)
Id 0 1 0 0 (100)
class/属性 0 0 1 0 (10)
标签/伪类 0 0 0 1 (1)
继承 0 0 0 0 (0)
!important 忽略权重计算规则 以此为准
布局:
文档流:
对网页元素的排布限制 默认情况下 元素是按照从上到下从左到右排布
网页元素分类:
行内元素(内联) inline 一行可以摆多个元素 设置宽高无效
a span img b u i input select button td ......
块级元素 block 一个元素独占一行 一行只能放一个
div p h1 ul-li dl-dt-dd ol-li form table .......
display:inline-block;
display:inline;
display:block;
盒子模型:
把页面元素 全部看成一个个“盒子”来操作 边框 外边距 内边距
边框:
border: -left -right -top -bottom
border:1px solid/dashed red;
像素 类型 颜色
外边距:
margin: -left -right -top -bottom
行内元素: 左右设置有效果 上下设置失效
块级元素: 上下左右设置有效果
内边距:
padding:-left -right -top -bottom
改变盒子的大小
行内和块级都可以使用