Day04 Day04 - 锐客网

1.css背景

1.1.背景背景颜色。

background-color:#000;

背景图片。

background-images:url(images/xxxx);

1.2.背景重复

background-repeat：no repeat; (取消重复)

1.3.背景吸附

background-attachment:fixed（吸附：不随页面滚动而滚动，只显示在原有位置） background-attachment:scroll（滚动：图片随着页面滚动在滚动）；

1.4.背景位置背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离。

背景位置:background-position: x y；

可以将以上的代码简写为：

background: （color）（ image）（ repeat）（ position）；

1.5.背景图片大小

background-size: x y;

x表示宽度，y表示高度

background-size:cover;

此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于:

background-size:100% 100%;

2.css文本

2.1.文本颜色 color:设置字体的颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)其中R是红色，G是绿色，B是蓝色，这三种颜色的饱和值为255。
颜色的名称 - 如: red

body {color:red; } h1 {color:#00ff00; } h2 {color:rgb(255,0,0); }

2.2.文本的对齐方式 text-align文本对齐方式

text-align: right|left|center

2.3.文本修饰

text-decoration: underline（下划线）|overline（上划线）|line-through（中划线）

2.4.文本缩进

text-indent：50px;

上面的代码就是讲一段长文本缩进到50px。
2.5.文本转换

text-transform:uppercase（转换为全部大写） text-transform:lowercase（转换为全部小写） text-transform:capitalize（转换为首字母大写）

1.3.css字体

3.1设置字体

p{ font-family:Helvetica,Microsoft YaHei }

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
3.2字体大小

font-size

3.3字体样式

font-style:normal (正常) font-style:italic（斜体） font-style:oblique（斜体） font-weight:bold(加粗) font-weight:bolder（更粗） font-weight:lighter（更细）

3.4用em来设置字体大小

font-size:2.5em; (40px/16=2.5em)

tips: 输入Lorem可以立即出现一段Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, dicta odio. Dolorum esse inventore ea cumque architecto dignissimos asperiores delectus, porro sunt vitae, ipsum recusandae officiis enim cupiditate fugiat exercitationem.

1.4.css链接

这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

1.5.css列表样式(针对ul)

list-style:none; //(去掉列表样式) list-style-type:circle//（圆点）|square//（方形） list-style-image:url("xxx")//（加图片）

1.6.边框

border-width//(边框的宽度) border-style// (边框的样式) border-color //(边框的颜色)

可以简写成

border： width style color p{border:1px solid #333}

边框-单独设置各边

p { border-top:1px solid #ccc; }

1.7.表格(了解)

border-collapse 属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性

colspan:value//跨越的列 rowspan:value//跨越的行

【Day04】实例：

生活家秋色赛尔实木复合地板基本信息品牌生活家系列普罗旺斯系列名称桦木-秋色赛尔规格 1210*165*14.6mm 产品内别多层实木复合主要工艺平面仿古，手工倒角，手工擦色评测方法外观纹理、拼接效果、承重性、耐磨性、抗污性、防火阻燃、防水防潮

生活家秋色赛尔实木复合地板基本信息
品牌	生活家
系列	普罗旺斯系列
名称	桦木-秋色赛尔
规格	121016514.6mm
产品内别	多层实木复合
主要工艺	平面仿古，手工倒角，手工擦色
评测方法	外观纹理、拼接效果、承重性、耐磨性、抗污性、防火阻燃、防水防潮

文章图片
M}_N4KHR{58P7LPU(74RDI6.png

1.8.轮廓属性（不怎么用）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

p{outline:1px solid pink}

1.9.透明

opacity为元素透明度1~0，由透到不透
visibility:hidden和display:none的区别

1.10css样式的继承

继承:是子元素对父元素的继承
10.1width和height width
如果子元素不设置宽度，默认情况下继承父元素的宽度
Height(特殊)
如果父元素不设置高度，默认情况下父元素继承子元素的高度
10.2css可以继承的属性文本相关属性:color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
字体相关属性:font-family,font-style,font-size,font-weight,line-height
列表相关属性:list-style
表格相关属性:border-collapse
其他属性:cursor,visibility