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)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。清除浮动只是改变元素的排列方式，浮动之后横着排，清除某一个元素之后，该元素会竖着排