您的位置：首页 > Web前端 > CSS

前端CSS笔记之小白入门（二）

2020-06-29 04:54 806 查看

本文为他人笔记搬运版

1.CSS常见属性使用说明

CSS里不仅要使用选择器找到标签，找到标签以后还需要使用CSS的属性键值对设置标签的属性。CSS的属性键值对非常的多，我们只给大家列举一些开发中比较常见的属性，其他样式大家可以自行尝试。CSS属性列表

1.1文本相关属性

属性	取值	描述
color	可以直接写颜色英文单词，可以直接用十六进制、也可以用rgb()值代替	设置文本颜色
text-align	center\left\right\justify	居中、左对齐、右对齐、分散两端对齐
text-indent	数字/百分比	表示文字缩进的距离
text-height	数字/百分比	设置行高
text-shadow	x-offset\y-offset color	用来给文字设置阴影效果
text-decoration	underline\overline\line-through	设置文字装饰样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{

color:red;
text-align:left;
text-shadow:3px -2px 1px green;
}
</style>
</head>
<body>
<p>我是一个p</p>
</div>
</body>
</html>

1.2字体相关属性设置

属性	取值	描述
font-family	系统可用字体	用来设置字体
font-size	数字/百分比	用来设置字体大小
font-style	normal\italic\oblique	设置字体样式，后两个表示斜体
font-weight	关键字和数字	设置字体粗细
font	设置字体相关属性，可连写	至少要设置font-size和font-family属性，且必须放在最后面

p{
/* font-style font-weigth font-size/line-height font-family */
font:italic 700 20px/40px "Kai";
}

1.3背景相关属性设置

属性	取值	描述
background-color	颜色取值	设置背景颜色
background-image	url(路径)	设置背景图片
background-size	宽高	设置背景图片大小
background-repeat	no-repeat\repeat-x\y	设置背景图片是否重复
background-position	关键字或px值	设置背景图片位置
background-attachment	fixed\scrolll	设置背景图片是否随着内容滚动
background		设置背景所有相关属性

p {
width: 400px;
height: 400px;
/*background-color: blue;
background-image: url(fj.JPG);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10px 10px;*/
background: blue url(fj.JPG) no-repeat fixed 10px 10px/200px 200px;
}

1.4其他属性

属性	取值	描述
border-collapse	separate\collapse	只能用于表格元素，默认值是separate，不合并
over-flow	visible\hidden\scorll\auto	用来规定超出父元素范围后的表现形式

2.CSS布局

CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。HTML里常见的布局方式有三种:

盒子模型，通过设置元素的宽高，修改内外边距来布局
浮动，修改float属性对应的值，让元素向左或者向右浮动。
定位，修改元素的position属性，将元素直接放在指定的位置上。

2.1盒子模型

属性	取值	描述
width	数字	设置元素的宽度
height	数字	设置元素的高度
padding	数字	设置内边距
margin	数字	设置外边距
border	数字样式颜色	设置边框的线宽、颜色、样式
display	line\block\inline-block\none	修改元素的显示方式
box-sizing	conten-box\border-box	用来规定边框padding是否会撑大盒子

2.2 浮动

属性	取值	描述
float	left\right	设置元素向左或向右浮动

浮动脱离了标准流式布局，内部实现起来也比较复杂，只做了解即可

2.3定位

属性	取值	描述
position	static	元素框正常生成
	relative	可修改left right让元素偏移某个某个距离
	absolute	元素框从标准文档流完全删除，并相对于其父元素定位
	fixed	固定定位
left	数字	设置元素向左偏移像素
right	数字	设置元素向右偏移像素

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

前端CSS笔记之 小白入门（二）