HTMLCSS学习笔记（五）——CSS列表属性

CSS列表属性

1）定义列表符号样式
list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
list-style-type:none===list-style:none;

2）使用图片作为列表符号
list-style-image：url(所使用图片的路径及全称)；

3）定义列表符号的位置
list-style-position:outside(外边)/inside(里边)；

CSS背景属性

1）背景颜色
语法：选择符{background-color:颜色值;}

2）背景图片的设置
语法：background-image：url(背景图片的路径及全称)；
说明：
网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

3）背景图片平铺属性
语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }
no-repeat:不平铺
repeat：平铺
repeat-x：横向平铺
repeat-y ：纵向平铺

4）背景图片的定位
语法：选择符{background-position:left/center/right/数值 top/center/bottom/数值;}
水平方向上的对齐方式（left/center/right）或值
垂直方向上的对齐方式(top/center/bottom)或值
background-position:值1 值2;
两个值 ：第一个值表示水平位置的值，第二个值：表示垂直位置的值。
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置
说明：向左方向，向上方向是负值

5）background的简写
背景属性的缩写语法：
background:属性值1 属性值2 属性值3；
背景缩写：background:url（背景图片的路径及全称） no-repeat center top #f00；

CSS边框属性

border:边框宽度 边框风格 边框颜色;
例如：border:5px solid #ff0000
边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:
​ 边框颜色：border-color:
​ 边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
可单独设置一方向边框：
border-bottom:边框宽度 边框风格 边框颜色;底边框
border-left:边框宽度 边框风格 边框颜色;左边框
border-right:边框宽度 边框风格 边框颜色;右边框
border-top:边框宽度 边框风格 边框颜色;上边框

边框三角形
制作过程
1、将div的宽度和高度设为0
2、设置边框宽度、样式、颜色
3、此时得到四个三角形，若需要去掉一些三角形时，可以使用以下方法实现：
（1）、使用rgba()将透明度改成0
（2）、使用关键字transparent
（3）、将颜色设为跟背景色一样的颜色

div{
            width: 0;
            height: 0;
            background: gray;
            border-width: 100px;
            border-style: solid;
            border-color: transparent red blue yellow;
            /* border-color: rgba(0, 128, 0, 0) red blue yellow; */
            /* border-color: gray red blue yellow;*/
        }

CSS Float属性的应用原理

语法：float:none/left/right;
float:定义网页中其它文本如何环绕该元素显示
浮动的目的：就是让竖着的东西横着来
有三个取值：
left:元素活动浮动在文本左面；
right:元素浮动在右面；
none:默认值，不浮动。

扩展知识点：浮动的排序规则

• 相同方向的浮动元素,先浮动的显示在前面.
• 不同方向的浮动元素,左浮找左浮,右浮找右浮
• 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定.
• 贴靠现象: 如果浮动的最后一个元素超过了父元素的宽度,会自动找上一个元素贴过去,如果宽度还是不够,继续找上一个~如果父元素宽度还是不够的话,那就只能凑合呆着了
• 图文混排

清除浮动的关键字是clear，语法：clear : none | left | right | both
none : 默认值。允许两边都可以有浮动对象
​left : 不允许左边有浮动对象
​right : 不允许右边有浮动对象
​both : 不允许有浮动对象
​对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。清除浮动只是改变元素的排列方式，浮动之后横着排，清除某一个元素之后，该元素会竖着排