CSS2

最新推荐文章于 2025-08-08 09:38:25 发布

一个沉默无趣的人

最新推荐文章于 2025-08-08 09:38:25 发布

阅读量449

点赞数

CC 4.0 BY-SA版权

文章标签： css scroll url 浏览器 border 嵌入式

本文链接：https://blog.youkuaiyun.com/y448979056/article/details/7459034

设置颜色——color
设置背景颜色——background-color
插入背景图片——background-image:url();
插入背景附件——background-attachment:scroll表示背景图片是随着滚动条的移动而移动。是浏览器的默认值。|fixedfixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动.
设置重复背景图片——background-repeat:repeat默认铺满|repeat-x水平平铺|repeat-y垂直平铺|no-repeat不重复平铺
设置背景图片位置——background-position:百分比|长度|关键字

设计边框样式——border-style
调整边框宽度——border-width
设置边框颜色——border-color
设置边框属性——border
边距——margin-top /margin-bottom /margin-left/ margin-right/margin
填充——padding-top／padding- bottom /padding-left / padding- right /padding

设计边框样式——border-style
border-style:样式取值
border-top-style:样式取值
border-bottom-style:样式取值
border-left-style:样式取值
border-right-style:样式取值
none默认不显示边框
dotted点线
dashed虚线或短线
solid实线
double双直线
groove凹形线
ridge凸型线
inset嵌入式
outset嵌出式
复合属性border-style可以同时取一到4个值。
取一个值：四条边框均使用这一个值。
取两个值：上下边框使用第一个值，左右边框使用第二个值，两个值一定要用空格隔开。
取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值，取值之间要用空格隔开。
取4个值：四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。

调整边框宽度——border-width
border-width:关键字|长度
border-top-width:关键字|长度
border-bottom-width:关键字|长度
border-right-width:关键字|长度
border-left-width:关键字|长度

border:<边框宽度>||<边框样式>||<边框颜色>
border-top: <上边框宽度>||<上边框样式>||<上边框颜色>
border-right: <右边框宽度>||<右边框样式>||<右边框颜色>
border-bottom: <下边框宽度>||<下边框样式>||<下边框颜色>
border-left: <左边框宽度>||<左边框样式>||<左边框颜色>
基本语法中每一个属性都是一个复合属性，都可以同时设置边框的宽度、样式和颜色属性。但是在用该语法定义边框属性时，每个属性间必须用空格隔开。

设计列表样式 list-style-type:<属性值>
属性值：disc       列表符号为黑圆点；
        circle               空心圆点；
        square               黑方块；
        decimal              数字排序；
        lower-roman       小写罗马数字排序；
        upper-roman       大写罗马数字排序；         lower-alpha       小写字母排序；
        upper-alpha       大写字母排序；
        none              无符号或编号；
添加列表图像：list-style-image:none|URL
none表示不使用图像符号。URL指定图像的名称或者路径。
调整列表位置：list-style-position:outside|inside
outside表示列表符号不向内缩进，是列表的默认属性值。inside表示列表符号向内缩进。

定位方式：position:static|absolute|relative
static表示为静态定位，是默认设置。
absolute表示绝对定位，与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。
relative表示相对定位，对象不可层叠，但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置。

设置位置：top:auto|长度值|百分比
          bottom: auto|长度值|百分比
          left: auto|长度值|百分比
          right: auto|长度值|百分比

浮动：float:left|right|none
left表示浮动元素在左边，是居左对齐的。
right表示浮动元素在右边，是居右对齐的。
none表示不浮动，是默认值。

清除：clear:left|right|both|none
left表示不允许在某元素的左边有浮动元素。
right表示不允许在某元素的右边有浮动元素。
both表示在某元素左右两边都不允许有浮动元素。
none表示在某元素左右两边都允许有浮动元素。

图层的创建——<div>
图层的嵌套只要插入多个成对的<div></div>，设置好的层的样式属性就可以完成层的嵌套。

图层属性：
id           层的名称
style    position       定位
         width          设置图层宽度
         height                 高度
         left                   左边距
         top                    顶端间距
        layer-background-color 图层背景颜色
层叠通过z-index属性定义：z-index:auto|数字
auto表示子层会按照父层的属性显示。
数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。

设置层裁切：clip:rect{<上>|<右>|<下>|<左>} |auto

auto表示不裁切。
rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左上角为参照点计算的。而且任意一个坐标值都可由auto来代替，表示该边不裁切。

设置层大小：width:auto|长度
height:auto|长度

width表示的是宽度，而height表示的是高度。
auto表示自动设置长度。
长度包括长度值和单位。
长度也可使用相对值中的百分比。

设置层溢出：overflow:visible/hidden/scroll/auto
visible：扩大层的容纳范围，将所有内容都显示出来。
hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。
scroll：表示一直显示滚动条。
auto：当层内容超出了层的容纳范围时，则显示滚动条。

设置层可见：visibility:visible|hidden|inherit
visible表示该层是可见的。
hidden表示该层被隐藏，是不可见的。
inherit表示子层或子元素会继承父层或父元素的可见性，父级元素可见则子级元素也可见。

鼠标指针：cursor:auto|关键字|URL（图像地址）
auto表示根据对象元素的内容自动选择鼠标指针形状。
URL（图像地址）表示选取自定义的图像作为鼠标指针的形状。
关键字共有16种，是系统预先定义好的鼠标指针形状。

伪类是一种特殊的类选择符，用来指定链接或者与其相关的选择符的状态；能被支持CSS的浏览器自动所识别的特殊选择符，
伪类与选择符间用冒号相连，在CSS中，伪类对文本或图像处于链接状态的修饰，故选择符大部分下是a标记，本章主要对a标记做实例讲解，其中伪类有四种常用形式是本章要讲解的，内容如下：
“:link”用在为访问的链接上
“:hover”用于鼠标光标置于其上的链接
“:active”用于获得焦点（如“被单击”）的链接上
“:visited”用在已经访问过的链接上

理解盒子模型。

流体浮动布局
固定浮动布局
固定定位布局