1、轮廓设置
outline(轮廓):绘制在元素周围的一条线,位于元素边框的外围,用于突出元素。
注:轮廓线不计算在盒模型尺寸内。
主要代码:
outline-color: 轮廓线的颜色
outline-width:轮廓线宽度(像素)
outline-style:dotted: 小方点;
dashed: 虚线;
solid: 实线;
(不常用)
double: 双线;
groove: 凹槽县;
ridge: 凸槽线
inset: 凹边
outset: 凸边*/
2、隐藏方式: 隐藏一个元素的方式有两种: display 和visibility
display: none;
visibility:hidden;
display 和 visiblity 区别:
1. display 不仅隐藏元素,而且不保留之前的位置
2. visibility 影藏元素,但保留之前的位置
display:改变属性的特性
display的属性:block: 会把一个元素变成一个块元素
inline: 会把一个元素变成行元素
inline-block: 会把一个元素变成行级块元素;(低版本IE不支持)
3、行元素、块元素、行级块元素
块元素:
1.默认宽独占一行,高由内容撑出
2.可以设置宽高,即使设置了宽也独占一行,
3.支持设置上下的martgin和padding值,支持左右的
4.块元素可以嵌套块元素,也可以嵌套行元素(特殊情况除外)
行元素:
1.默认宽高由内容撑出
2.不支持设置宽高
3.支持设置上下的martgin和padding值,支持左右的
4.行元素不可以嵌套块元素,但可以嵌套其他行元素
行级块元素:
1.行级块元素:默认宽高由内容撑出
2.支持设置宽高
3.
4. 行级块元素的嵌套
4、背景:
1)背景色 background-color:red;
2)背景图片 background-image:url(图片地址)
a、背景图片的平铺方式: background-repeat:no-repeat;
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y; 竖直平铺
b、背景图片是否跟随屏幕滚动 background-attachment: fixed;
fixed: 固定, 不随着屏幕混动
scroll: 跟随屏幕滑动;
c、背景图的位置:
需要填写两个值:x轴位置和y轴位置(有三种表示方式)
a)用单词表示位置:left center bottom
b)使用具体的数值:px 距离上和左的px数值
c)使用百分比 实际还是在使用具体的数值 计算公式:x:(容器的宽-元素的宽)*百分比的值
d、背景设置的简写方式: 颜色 图片;图片路径 是否平铺 是否跟随滚动 图片位置(在书写复合属性时,如果一个属性的值如果有多个,那么这多个属性值必须相连书写,不可分开)
例如: background: pink url(1.gif) no-repeat scroll center;
5、文本:
1)文字颜色
颜色:1)用颜色对应的英文单词
2)RGB (red green blue):所有的颜色都是由这三种颜色调和而成 rgb(0,0,0)
3)16进制颜色 #后面跟6个0~9或A~F #FFFFFF
三种颜色值的范围0~255*/
2)文字排版方向
ltr:left to right
rtl:right to left
不影响文字的阅读顺序的方向,但是影响标点符号的方向
3)字母间距 letter-spacing: 10px;
默认值为normal 相当于0px,可以给负值
4)单词间距 word-spacing: 40px;
单词间距 都与英文文本,默认值normal 相当于0px;可以为负
5)对齐方式 text-align:
left:左对齐
center:中心对齐
right:右对齐
justify:分布对齐(不推荐使用,部分浏览器不支持该属性)
重点:该属性只对行元素或者行级块元素有作用,对块计元素无效
单纯的文字——匿名的行元素
6)文字修饰 text-decoration:
underline:下划线;
overline:上划线;
line-through:删除线
none;
7)首行缩进: text-indent:
a、数值类型 px
b、em单位类型 一个单位的em表示当前元素的font-size值。
8)文字转化 text-transform:
uppercase: 转化成为大写
lowercase: 转化为小写
capitalize:首字母大写
9)空白区域处理 white-space:
normal;默认状态
nowrap;不换行
pre;保留文本原有的格式,包括所有的空格
10)行高 line-height
normal 默认的行高
11)文本溢出的处理方式 text-overflow
clip: 裁剪掉
ellipsis:用省略号代替
string:用给定的字符代替(不建议使用,有些浏览器不支持)
6、字体
1)文字大小
font-size: 30px;
2)字体类型
可以把字体类型书写的若干个值,看做一个“回退”系统来理解,如果写了多个值,系统会从第一个一个一个判断当前的字体,如果不支持,尝试下一个,但最后一个值,必须写css通用的字体类族,css一共有5个通用类族,分别是“serif”,“sans-serif”,“cursive”,“fantasy”,“monospace”
font-family: “monospace”;
小写字母以大写字母的形式+小写字母的高度进行展示
font-variant:small-caps;
3)字体样式 font-style: italic;
normal: 正常;
oblique: 强制文字斜体
italic:文字自身的斜体,如果设置的文字或者字体集内没有斜体,无效果
4)字体粗细 font-weight: 900;
对应的单词normal lighter bold bolder
数值:400==normal 700==bold 100-900 无单位