CSS-02
文本属性
CSS 文本属性可定义文本的外观。
通过文本属性，改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
text-align：对齐方式，left、right、center
text-decoration：文本修饰,underline(下划线)、line-throuth(删除线)、overline(上划线)、none（默认的文本）
line-height：行高
妙用：设置文字居上下中展示。
text-indent：文字/图片缩进
透明度
opacity用来设置透明度，默认值为1，1为不透明，0为完全透明。
p{ opacity: 0;} 隐藏一个元素 ，完全不显示，但是会占空间，只是看不到。
font字体设置
属性名 | 作用 | 参数说明 |
font-family | 字体名称 | 例如：Arial，"微软雅黑"，"宋体" |
font-size | 字体大小 | 例如：18px，2em |
font-style | 字体风格 | normal，italic, oblique |
font-weight | 字体粗细 | normal，bold或bolder或数值。 |
自定义字体
有些字体是浏览器自带的，有些特殊字体则浏览器没有
字体文件：eot svg ttf woff （用多种字体是为了兼容浏览器）,比如有些浏览器支持eot字体文件，但是有的不支持，支持svg，所以我们准备多个文件类型，以保证的我们的字体显示万无一失。
<style>
/* 定义字体 */
/* @font-face定义字体文件的关键词 */
@font-face{
/* font-family和src是必要的 */
/* font-family是给定义字体起名字用的 */
font-family: myfont;
/* src资源路径 url（用来放字体文件的地址用的【相对路径】） */
src: url(./font/shimesone_personal-webfont.eot);
src: url(./font/shimesone_personal-webfont.svg);
src: url(./font/shimesone_personal-webfont.ttf);
src: url(./font/shimesone_personal-webfont.woff);
/* 非必选的样式 */
/* 改变字体的粗细 */
font-weight: normal;
/* 改变字体的样式，比如斜体 */
font-style: italic;
}
/* 使用定义的字体 */
span{
font-family: myfont;
}
</style>
<body>
<span>QQQQQSSSSSSWWWWWWW小猪WUUa</span>
</body>
</html>字间距（litter-spacing）
因为ui给的高保真的效果，字和字之间是有固定的距离。
litter-spacing来改变字间距，单位使用px像素。
overflow属性
作用：属性规定当内容溢出元素框时发生的事情。
描述 | 描述说明 |
visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
hidden | 内容会被修剪，并且其余内容是不可见的。 |
scroll | 内容被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
<style>
div{
width: 300px;
height: 50px;
border: 1px solid red;
/* 默认值visible */
overflow: visible ;
/* 截断hidden */
overflow: hidden;
/* 滚动 （但是使用scroll，x轴和y轴都会显示出来，臃肿。）*/
overflow: scroll;
/* 改进方案(滚动条该显示显示不该显示不显示) */
overflow: auto;
}
</style>需求：当文字有很多，我们只想让文字在一行显示，显示不了的部分显示滚动条。
<style>
div{
width: 300px;
height: 50px;
border: 1px solid red;
/* 第一个要素：加上overflow:hidden */
overflow: hidden;
/* 第二个要素：加上 白空格不转行 white-space: normal */
white-space: normal;
/* 第三个要素：加上文字吹出的时候显示省略号 ellipsis（省略号） */
text-overflow: ellipsis;
}
</style>复合样式
（边框样式举例）
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
border-width: 10px;
/* border-radius: 50%; */
/* 对应顺序是左上、右上、右下、左下 */
/* 上右下左 */
border-radius: 30% 40% 10% 20%;
}
</style>
</head>
<body>
<div>
</div>
</body>列表属性（list-style-type）
list-style-type列表样式，类型属性值可以为：
disc (缺省值，黑圆点)
circle (空心圆点)
square (小黑方块)
decimal (数字排序，类似有序列表)
lower-roman（小写） upper-roman（大写） 罗马数字
lower-alpha （小写） upper-alpha （大写）英文字母
none (无列表项标记，针对无序列表)
元素分类
元素主要分为：行内元素、块元素、行内快元素
行内元素（内联元素）
行内元素（内联元素）：【spna a em i b strong img sub sup del s u】
默认display属性是display:inline
特征：不可以设置宽高，宽度是由文字长度，高度是由字体大小决定的。
对margin外边距，设置上下外边距是无效的，设置左右外边距有效。
对padding内边距，设置上下内边距是无效的，设置左右内边距有效。
注意：不要使用行内元素包裹块元素
display属性是可以改变的，比如把div块元素改成行内元素
<style>
div{
width: 400px;
height: 400px;
background: #000;
/* 块元素更改行内块元素 */
display: inline;
}
</style>块元素
块元素：【body div ul li ol dl dt dd p h1-h6 pre html】
默认display属性是display：block
块元素特征：可以设置宽高，无论内容多少独占一行，会换行，上右下左
一般情况下都是使用块元素里面来包裹行内元素。
display属性是可以改变的，比如我们可以把行内元素span改成块元素。
<style>
span{
background: pink;
color: #fff;
font-size: 40px;
/* 改变行内元素变成块元素 */
display: block;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<span>111</span>
</body>行内块元素
【input】display:inline-block表示行内块元素
行内块元素：可以设置宽高，不会独占一行
display的补充
属性值 | 描述说明 |
none | 此元素不会被显示，不保留物理空间。 |
block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
inline | 此元素会被显示为行内元素，元素前后没有换行符。 |
inline-block | 行内块元素。 |
visibility和display的区别
visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
当display被设置为"none"的时候，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。
总结：应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。
background背景属性
属性名 | 说明 |
background-color | 设置元素的背景颜色。 |
background-image | 背景图片 |
background-repeat | 背景重复 |
background-color
背景色的色值，具体的名字，十六进制，rgb rgba
<style>
/* 给.box的背景色设置为红色 */
.box {
background-color: red;
}
</style>background-image
为元素设置背景图片。
解决背景图重复显示：
使用 background-repeat 属性设置背景图片是否重复。
repeat 重复（默认值）
repeat-x 图片在横向上平铺
repeat-y 图片在纵向上平铺
no-repeat 不重复平铺
注意：背景色是在最里面，背景图是最外面
<style>
.box {
background-image: url("img/11.jpg");
/* 设置图片不重复平铺 */
background-repeat: no-repeat;
}
</style>background-position
改变图像在背景中的位置。
图片定位可以使用px像素作为单位，也可以使用%作为单位（占据父元素尺寸的百分之多少）
background-position只设置一个值，表示x轴10px，y轴是居中状态（并不是x和y都是10px）
background-position：10px可以使用一些关键字：top、bottom、left、right 和 center，不能超过两个关键字，一个对应水平方向，另一个对应垂直方向。
background-size
可以改变背景图片的大小
两个值，第一个值表示宽度，第二个表示高度，单位px %
100% 100% 占满整个背景图，宽、高都占据背景图的百分百（使用较多）
如果只写一个值，那另一个值根据图片的纵横比来自动显示。
cover: 按照最小宽或最小高来做拉伸，背景图片能够铺满设备屏屏幕，并不会造成图片失真。
contain：按照最大宽度或最大高度来做拉伸，但是背景图片有可能不能铺满设备屏幕。
扫一扫
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
