哈喽,各位小伙伴,我们会更新一些前端的文章,想学习前端的小伙伴,特别是0基础的小伙伴,或者对此感兴趣的小伙伴,可以关注我,我会保持更新。
CSS属性部分:
CSS语法:选择器:{属性:属性值}
1.文本属性
1.字号大小:
font-size:数值+单位
浏览器中默认字号大小为16PX
2.字体:
font-family:字体名1,字体名2,字体名3
取值:
单一取值:
1.如果字体名是中文,引号可加可不加
2.如果字体名是一个英文单词,不加引号
3.如果字体名由多个英文单词组成需要加上引号
取多个值:
不同字体名用逗号隔开
谷歌浏览器默认字体微软雅黑
IE低版本浏览器默认字体为宋体
3.字体颜色:
color:
取值:
1.一个表示颜色的英文单词 如:red,yellow,pink
2.#六位十六进制数值(0-9A-F) 如:#09AB3C(正确),#59AJ23(错误)
3.rgb(red,green,blue)(0-255) 如:rgb(150,123,22)
4.rgba(red,green,blue,alpha)
alpha:透明度用数字来表示取值范围:0-1,0:完全透明;1:完全不透明,可以取0.2,0.5之类的
4.字体加粗:
font-weight:
取值:
1.关键词取值
bold------加粗
bolder----更粗(效果同等于加粗)
normal----正常显示(默认值,可以用来取消b,strong,标题标签的加粗效果)
lighter-----细体字
2.数值取值(整百数值取值)
100-900
100-----细体字
400-----normal(正常显示)
700-----加粗
900-----更粗
5.字体倾斜:
font-style:
取值:
italic-----字体倾斜(强调斜体字)
oblique------字体倾斜(强调倾斜效果,更具有强调性)
normal------正常显示(默认值,可以用来取消,i,em标签的倾斜效果)
6.文本修饰线:
text-decoration:
取值:
underline------下划线
overline------上划线
line-through----中划线(删除线)
none--------取消下划线(常用来取消超链接标签的下划线)
7.首行缩进
text-indent:数值+单位(px,em)
em是一个相对单位,相对于父元素字号大小进行放大或缩小
不更改父元素字号大小
1em=16px
2em=32px
更改父元素字号大小为20px
1em=20px
2em=40px
8.文本对其方式:
text-align:
取值:
left------靠左
center-------水平居中
right------靠右
justify------两端对其(对单行文本不生效,对多行文本最后一行生效)
9.行高
Line-height:
应用在单行文本中:
当行高大于容器高度,文本靠下显示;
当行号等于容器高度,文本居中(此时可以省略容器高度);
当行高小于容器高度,文本靠上显示
应用在多行文本中:
用来调整每一行文本内容之间的间距
2.列表属性:
list-style:none;取消列表项样式,写在ul/ol或者li上面都生效---(常用)
list-style:none url() outside;(不常用)
none:表示列表项样式
url:表示更改列表项插入的图片
outside:表示列表项在列表内还是列表外
3.边框属性:
边框:元素的边缘
bodder:5px solid red;
5px------边框粗细------border-width
solid-----边框样式-----border-style
最后的颜色,如果想要设置为透明(如:制作三角,颜色设为transparent)
取值:
solid------实线
dashed-----虚线
dotted-----点线(由点组成的线)
double------双实线
red------边框颜色------border-color
思考:给元素指定方向上设置边框
border-方向词
border-top--------上边框
border-right--------右边框
border-bottom--------下边框
border-left--------左边框
4.背景属性:
1.背景颜色
background-color:
取值:
同color取值方式
2.背景图
background-image:url()
默认背景图重复
背景图在页面中不占位置
3.背景图重复
background-repeat:
取值
repeat-------重复(默认值)
no-repeat------不重复
repeat-x------水平方向重复(X轴重复)
repeat-y------垂直方向重复(Y轴重复)
4.背景图的位置
background-position:x y;
X-------水平方向上的位置
Y-------垂直方向上的位置
取值:
1.数值+单位,可以是正值,也可以是负值
x:100px
y:100px
2.关键词
x------left/center/right
y------top/center/bottom