目录
一.CSS
1.属性选择器
通过标签的属性来查找标签,标签都有属性
<div class="c1" id="d1"></div>
id值和class值是每个标签都自带的属性,还有另外一种,自定义属性<div class="c1" id="d1" username="kevin" password="123"></div>
针对于username="kevin" password="123"属性就是div标签的自定义属性
2.分组和嵌套选择器
分组选择器使用逗号隔开,所有的选择器都是并列的
组合(嵌套)选择器使用的是空格隔开,选择器不是并列的,最终生效的还是最后一个选择器
3.伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
4.伪元素选择器
p:first-letter {
font-size: 48px;
color: red;
}
/*在每个<p>元素之前插入内容*/
p:before {
content: "你好啊";
color: red;
}
/*在每个<p>元素之后插入内容*/
p:after {
content: "[?]";
color: blue;
}
before和after多用于清除浮动。它可以解决浮动中得父标签塌陷问题!!!
5.选择器的优先级
比较选择器的优先级高低
1.选择器相同的情况下:
离谁越近,就听谁的,就近原则
2.选择器不同的情况下:
行内选择器 >>> id选择器 >>> 类选择器 >>> 标签选择器
二.CSS属性相关
1.宽和高
宽和高
width属性可以为元素设置宽度
height属性可以为元素设置高度
(块儿级标签才能设置宽度,内联标签的宽度由内容来决定)
***默认情况下,只有块儿级元素才能设置长宽,内联元素不能设置,就算设置了也没效果***
2.字体属性
(1)font-weight用来设置字体的字重(粗细)
值 | 描述 |
normal | 默认值,标准粗细 |
bold | 粗体 |
bolder | 更粗 |
lighter | 更细 |
100~900 | 设置具体粗细,400等同于normal,700等同于bold |
inherit | 继承父元素字体的粗细值 |
(2)文本颜色
颜色属性被用来设置文字的颜色
颜色是通过CSS最经常的指定:
- 十六进制
- FF0000
- RGB值
- RGB(255,0,0)
- 颜色名称
- red
(3)文字对齐
text-align 属性规定元素中的文本的水平对齐方式
left | 左对齐,默认值 |
right | 右对齐 |
center | 居中对齐 |
(4)文字装饰
text-decoration
none | 默认,定义标准的文本 |
underline | 定义文本下的一条线 |
overline | 定义文本上的一条线 |
line-through | 定义穿过文本下的一条线 |
(5)背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
# 支持简写
background:#336699 url('1.png') no-repeat left top;
# 边框
边框属性
● border-width
● border-style
● border-color
#i1 {
border: 2px solid red;
}
border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
3.display属性
display:"none" HTML文档中元素存在,但是在浏览器中不显示,一般用于配合JavaScript代码使用
- display:"block"
- 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分
- display:"inline"
- 按行内元素显示,此时再设置元素的width,height,margin-top,margin-bottom和float属性都不会有什么影响
- display:"inline-block"
- 使用元素同时具有行内元素和块儿级元素的特点
二.CSS盒子模型
以快递盒为例:
- 快递盒与快递盒之间的距离称之为是外边距,用margin值表示
- 快递盒和里面的物品之间的距离称之为是内边距,用padding来表示
- 盒子的厚度我们称之为边框,用border来表示
- 物品的实际大小称之为content
float浮动
三种取值
left:向左浮动
right:向右浮动
none:默认值,不浮动clear
clear属性规定元素的哪一侧不允许其他浮动元素。值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。清除浮动
清除浮动的副作用(父标签塌陷问题)
主要有三种方式:
● 固定高度
● 伪元素清除法
● overflow:hidden
伪元素清除法(使用较多):
.clearfix:after {
content: "";
display: block;
clear: both;
}