Css

来源：互联网发布：vb case语句的用法编辑：程序博客网时间：2024/06/07 11:40

Css 基础知识

Css顾名思义就是层叠样式;（Cascading style sheets）的缩写；

但是什么什Css？

Html 描述了呈现的内容，而Css则是定义了这些内容的呈现样式；

列如：字体、颜色...

我们为什么要用到Css？

根据代码得出，Css能够将页面的内容和呈现方式有效的分离，有利于分工合作，也有利于快速更换不同的呈现方式；

Css样式代码如下：

Css也有三种样式：

1）内联样式

内联样式主要定义在style属性中。内容和表现形式高度耦合；维护困难，不利于分工合作。定义的只能在当前标签中使用；

2）内部样式

通过在<head>标签中通过<style>标签来定义内容和表现形式的耦合程度降低！但是在HTml文件中，没有实现完全分离。只能应用在当前页面；

P{
font-size:36px;
color:aqua;
}

<p>内部样式演示1</p>
<p>内部样式演示2</p>

3）外部样式

首先定义一个样式的文件（Css）

CSS中也可以使用注释，形式为/*......*/

实现样式内容和表现的形式完全分离，有利于分工合作以及维护；可以在多个Html

中引入。

颜色

所有颜色都是用红（red）绿（Green）蓝（blue）三种基色引发而来，这三种颜色成为三原色

Css中用8位表示一个颜色，那么可以表示2⁸种颜色，即256种颜色，所以总共可以表示256*256*256种颜色（真彩色），

Css中颜色表示

十六进制：#ff0000

RGB颜色

<p style="color:#800000;">十六进制颜色</p>

RGBA颜色

基础上加了透明度分量 Alpha

<p style="color: red;RGB(255,0,0 0.5)">十六进制颜色</p>

HSL颜色

颜色可以由另外三个分量进行表示，即色调，饱和度，明度；

<p style="color:HSL(120,60%,50%)">十六进制颜色</p>

HSLA颜色在HSL上增加了Alpha分量

<p style="color:HSLA(120,60%,50%,0.4)">十六进制颜色</p>

预定义颜色

Css提供了一些预定颜色比如 red yellow blue

1.3 尺寸单位

Cm 厘米

Mm 毫米

In （lich）英寸

Px 像素（pixel）：绝对单位

%：百分比：相对单位

那些是绝对单位，那些是相对单位

Css属性

Background-color：red

Background-color:red;

Font-size:24px;

}

字体属性：

Font-family 字体名称

Font-size 字体大小

Font-style 字形样式倾斜

Font-variant 字体变形（大写）

Font-weight 字体加粗样式

也可以简写：

Font-size Font-variant Font-weight Font-size Font-family

前三个标红的可以省略不写，使用默认值Font-size Font-family 必须指定值；

这种书写方式更加简写；

font: 600px 楷体;

文本相关属性

文本属性主要包括颜色、对齐方式、修饰效果。

Color ：设置文本的颜色；

Text-decoration：

none 默认值，没有装饰

underline 加下划线

Overline 文字上方

line-through 文字中间穿过线加删除线

text-shadow 给文字加上阴影效果

text-shadow: -14px -12pxblueviolet;

含义是定义一个背景颜色，其水平方向向上移14px；垂直方向上移12px；

Direction方向左右

属性： ltr左至右rtl右至左

Text-align 对齐方式水平方向 4种属性

Left 左对齐

Right 右对齐

Center 居中

Justify 两端对齐

Vertical-align 文本垂直对齐方式

Top 靠上对齐

Bottom 考下对齐

Middle 居中对齐

Text-indent 文本缩进

Letter-spacing 字符和字符的间隔

Word-spacing 单词和单词之间的（字）间距

Line-height：行高设置行和行之间的距离；实际上是调整行间距；

背景颜色

<styletype="text/css">
    body{
        background-color:peachpuff;
        background-image:url("../Css/胖迪.jpg.jpg");
        background-repeat:no-repeat;
        background-repeat:repeat-x;
      /*background-repeat:repeat-y;
        background-repeat:round;*/
        background-position:center;
    }
</style>

Background-color ：背景色

Background-image：设置背景图片，需要设置图片的url地址

Background-repeat：图片的复制选项

Repeat：在水平和垂直的两个方向进行复制

No-repeat：不复制

Repeat-x：在水平方向进行复制

Repeat-y：在垂直方向进行复制

也可以将这组属性值封装到一个属性background中，表达书序是：

背景色 background-color

背景图片background-image

重复方式background-repeat

位置 background-position

表达更加整洁

background:yellowurl("../Css/胖迪.jpg.jpg")no-repeat right;

2.4尺寸相关属性

Height 高度

Width 宽度

div{
    width:600px;;
    height:600px;
    background-color:lightskyblue;
}

Max-width：最大宽度

Max-height：最大高度

Min-width：最小宽度

Min-height ：最小高度

2.5 相关属性

隐藏元素方法：

Visiblity：hidden：仅仅隐藏内容该元素所占位置依然存在；

Display-none：不仅隐藏内容，且不占位置；

Display ：可以设置他的显示模式；

Inline：

可以将块级元素以内联的形式进行显示；此时width和height属性无效其空间取决于元素的内容。

Inline-block：

将块级元素以内联形式显示，同时兼具块级元素的某些特征，列如可以使用width和height设置所占位置大小；

/* li{
     display:inline-block;
     width: 200px;
     background-color: cyan;
}*/span{
     display: block;
     background-color: lime;
}

也可以将内联元素以块级元素形式进行显示，即display：block；

2.6盒子模型

Margin：边缘留白；外边距

Margin-top：margin-right：margin-bottom：

Margin-left：从上到右；从下到左；

使用方式：

Margin：30px；表示上下左右外边距都为30px；

Margin-left：30px分别单独设置上下左右外边距；

Margin：10px 20px 30px40px分别设置上右下左四个边距为10px20px 30px 40px；

Padding：内边距

也有上下左右边距，和margin类似；

Border：边框

border-width: 20px;
border-style: dashed;
border-color: antiquewhite;/*属性可以更优化optimize properties*/

border-width 边框宽度

border-style: 边框线条

border-color: 边框颜色

word 中设置边框操作

也可以使用更优化的书写方式

border: 5px dashed green;

2.7定位

定位方式:static静态

fixed 固定

related 相对

absolute 绝对

static静态定位（默认）

无定位、元素正常出现了流中；不受left、right、top、bottom影响；

显示效果

div{
    width:500px;
    height:500px;
    background-color:maroon;
    position:static;/*加或者不加static都是默认效果*/
}

#div1{
            width:300px;
            height: 300px;
            background-color: maroon;
            position: fixed;
        }
        #div2{
        width:300px;
        height:300px;
        background-color:aquamarine;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>

显示效果为

从结果可以看出，fix定位会将元素从流中单独进行定位中，摘出来单独进行定位，取决于left、top；

#div1{
    width:300px;
    height:300px;
    background-color:antiquewhite;
    position:fixed;
    left:40px;
    top:40px;
    z-index:2;}
#div2{
width: 300px;
height: 300px;
background-color: aquamarine;
    position:relative;
    z-index:2;

重新定位之后可能出现重叠，通过z-indx可以调整其顺序

从以上结果可以看出，相对定位是从原来的位置进行位移，但并不受影响其他后续位置；

从结果可以看出：绝对定位的元素将从分流中被摘出来，依靠left和right属性进行定位，与fixed类似，但参照物不同

Fixed参照物跟元素（html）

Absolute参照父容器

3 选择器

所谓选择器，指得是选择施加到样式目标的方式。

3.1元素选择器

用标签名作为选择器，选中所有相应的元素

    <styletype="text/css">
        div{font-size:30px;
            color: cyan;
        }p{
            font-size:28px;
            color: red;  }
    </style></head><body>
<div>元素选择器</div>
<p>元素选择器</p>
<p>元素选择器</p>

3.2id选择器

顾名思义就是根据id来选择元素；其定义形式为#idname{

......

}

    <styletype="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color: cyan;}
        #div2{
            width:200px;
            height:200px;
            background-color: coral;}
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>

3.3类选择器

类选择器是根据class属性来选择元素，器样式定义为：

.Classname{

.......

}

从结果可以看出：.odd{....}定义样式会施加到所有class=“odd”的元素中；

如上图列中的div第一个和第二个所示；

结果会选择所有的id选择器上面，当然也包括class=“odd”的<p>；

3.4属性选择器

根据某个属性的特性（比如有无、值等）来选择，

1）根据有无某个属性选择；

运行结果：

从结果可以看出，所有具有title属性元素都应用了红色背景颜色的样式。

2）根据属性的值来选择

从结果可以看出来，只有第二个div应用了北京的样式，因为只有第二个div的title属性等于div2；

~=：选中属性值包含指定完整单词的元素，类似word中文字匹配；

cursor pointer 去线

title^=”div”：选中以div开头的元素

Title$=“div“选中title属性值以div结尾的属性；

Title*=“div“选中title属性值包含所有div的；

阅读全文

2 0