day3

A今天学习内容

1.css基本样式

①背景
background-color

background-repeat（设置背景是否重复显示，可用repeat-x/y分别设置背景相对x/y轴重复）

background-image：url(" ")

background-attachment：fixed/scroll等（设置背景是否随滚动条滚动）
background-position：x y（设置背景图片的x和y值确定位置，x表示离x轴的距离，y表示离y轴的距离）

以上除attachment外可简写成：background：color image repeat position

background-size：x y（设置背景图片大小，x表示宽度，y表示高度，也可以用百分比来表示占网页的百分之多少）

background-size：cover（此时会保持图像的纵横比并将图像缩放成完全覆盖背景定位区域的最小尺寸，相当于background-size：100% 100%）

8.PNG

②css文本
color，颜色的设置有颜色名称（如red，green等），十六进制值（如#ff000）和rgb/rgba值（如rgb/rgba（255,0,0,/0.5），a指的是该指定文本的透明度）三种方法；

text-align（文本对齐方式）
text-align：right/center等

text-decoration（文本修饰）
text-decoration：underline/line-through等

text-transform（文本转换）
text--transform：uppercase（全大写）/capitalize（首字母大写）等

text-indent（文本缩进）

③css字体
font-family（该属性应该设置几个字体名称作为一种“后备”机制，用逗号隔开，如果浏览器不支持第一种字体，它会尝试下一种字体，以此类推）

font-size（单位一般为px）

font-style（一般是斜体或非斜体）

font-weight（字体的粗细程度）

line-height（设置行高）

④css链接
一、a：link——正常，表示未访问过的链接；
二、a：visited——表示已访问过的链接；
三、a：hover——鼠标放在链接上时；
四、a:active——链接被点击的一刻；

*如果单独设置几个链接，必须遵循以下规则：
a：hover必须写在a：link和a：visited的后面；
a:active必须写在a：hover的后面；

⑤css列表样式（针对ul）
list-style：none（清除列表样式，即清除掉每个li前的点）

list-style-type：circle/square等（让li前的图标变成circle等形状）

list-style-image：url（" "）（自定义li前面的图标）

⑥边框
border-width；
border-style；
border-color；
以上可简写成：
border：width style color
单独设置四个边：
border{
       border-top/bottom/left/right：double/dotted等
           }

⑦表格
border-collapse(属性设置表格的边框被折叠成一个单一的边框）
折叠前

1.PNG

折叠后（table{border-collapse：collapse；}）

2.PNG

跨行显示：在所要跨行的元素中加入rowspan=" "，双引号里面填数字，数字取决于跨行数

如：

3.PNG

4.PNG

跨列显示：在所要跨列的元素中加入colspan=" "，双引号里面填数字，数字取决于跨列数

如：

5.PNG

6.PNG

⑧轮廓属性（非常用）
outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用（如：p{1px solid pink；}）

opacity（设置元素透明度，可用0~1或%表示）

visibility：hidden/visible（表示可见度为隐藏或可见）

2.css样式的继承

①继承是子元素对父元素的继承
a.如果子元素不设置宽度，默认继承父元素的宽度
b.如果父元素不设置高度，默认继承子元素的高度

7.PNG

②css可以继承的属性
文本相关属性：color、text-align/decoration/transform/indent（内联块不能设置此属性）

字体相关属性：font-family/style/size/weight、line-height

列表相关属性：list-style

表格相关属性：border-collapse

其他属性：cursor，visibility

B今天掌握的内容

1.css的基本样式及其使用方法包括一些简写，规则
2.css样式的继承关系包括父子元素在不同情况下的继承关系和css可以继承的属性有哪些

C今天未掌握的内容

none