青训营笔记css2

82 阅读2分钟

文本

color:字体颜色 可使用十六进制颜色代码,如#ff7f50

也可使用颜色所表示的英文字母,如red

color: #ff7f50;

font-size:字体大小 需要在设置的大小后加上像素单位px,如20px

px:像素单位 css中尺寸需要添加单位

font-size: 20px;

font-family:字体

需使用字体库中拥有的字体,如font-family: 楷体;

text-align:文本对齐

text-align: center;

文字水平对齐

text-decoration:line-through 定义穿过文本下的一条线,即给文本添加删除线

text-decoration:underline 定义文本下的一条线,即添加下划线

text-decoration:none:定义标准的文本

font-style: italic;斜体文本

font-weight:字体粗细

font-weight: 700;

line-height:设置行高

line-height: 50px;

letter-spacing可以指定字符间距

letter-spacing: 20px;

text-indent用来设置首行缩进

text-indent: 2em;

em:当前文本中一个字符的大小

背景

background-color背景颜色 与为字体添加颜色相同

使用时 background-color: aquamarine;

background-image背景图片

background-image: url(img/bg.jpg);

background-repeat背景重复

background-repeat: no-repeat;设置背景不重复

background-size背景尺寸

background-size:400px 500px; 先宽,后高

background- position 背景位置

background-position: right top;

背景图片位置,先设置水平,后垂直,上述代码表示背景在右上角

CSS列表

属性可以放置、改变列表项标志,或者将图像作为列表项标志 。

list-style-image 将图象设置为列表项标志。

list-style-image: url();

list-style-position 设置列表中列表项标志的位置。

list-style-position: inside;

图标位置,在列表里(inside)还是列表外(outside)

list-style-type 设置列表项标志的类型。

list-style-type: none;

list-style 简写属性。

list-style: none url() inside;

CSS伪类

专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类 。

伪类的语法:

:hover伪类表示鼠标移入的状态
a{
    color: cadetblue;
}
a:hover{/* 鼠标移进去显示 */
    color: crimson;
}
:active表示的是被点击的状态
a:active{
    color: coral;
}
/*一般给按钮设置 点击后显示*/
:focus向拥有键盘输入焦点的标签添加样式
/* 当拥有输入功能的标签 获得鼠标焦点时 自动切换到此样式表 */
input:focus{
	background-color: aqua;
}

透明 opacity:0-1 0完全透明,但图片还存在 1不透明
如:img{opacity: 0.5;}

display: none; 使内容在网页上消失