各级标签等应用（第五章）

最新推荐文章于 2024-09-30 12:59:54 发布

社会你杰哥

最新推荐文章于 2024-09-30 12:59:54 发布

阅读量813

点赞数

CC 4.0 BY-SA版权

文章标签： htmlcss 标签应用字体

本文链接：https://blog.youkuaiyun.com/lllllllllaaa/article/details/75095226

1CSS基础知识

1.1基本概念

Css指折叠样式表（casaading style sheets）

为什么需要用css

Html描述了要呈现的内容，而css怎定义了这些内容的呈现形式，比如字体，颜色等。使用css能够将页面内容和形式有效分离，有利于成分合作，也有利于快捷更换不同的呈现形式。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 p{
 font-size: 36px;
 color: blueviolet;
 }
 </style>
</head>
<body>
<p style="font-size: 20px;color: blue">asdasd
<p class="p">示例1
<p class="p">示例2

</body>
</html>

使用CSS有三种方式：

(1) 内联式：

将样式定义在style属性中。内容和表现形式高度耦合。不利于分工合作

维护困难。不提倡使用。

且只能应用于单签标签中。

（2）内部样式：

在<head>标签中通过<style>标签来定义。

内容和表现形式的耦合程度上降低了。但都还是在html文件中，没有实现完全分离。

而且只能运用到当前页面。

（3）外部样式表

首先要定义一个外部文件（.css）

Css也可以注释如：/* */

然后需要使用这些样式的html文件引入该样式表文件。

外部样式表使得内容和表现形式彻底分离，有利于分工合作及维护。可在多个html中引用。

推荐使用外部样式。

引用代码：<link rel=”stylesheet”type=”text/css” href=”xxx.css”

1.1.2颜色

所有的颜色都可以有红绿蓝三种颜色调配而成，这三种颜色俗称三原色。

每种颜色用八位表示，可以表示256（2⁸）种颜色。那么每种颜色值有24位来表示，可以表示256*256种颜色（真彩色）

Css中有多种颜色表示形式：

十六进制颜色表示形式

（3）RGB颜色基础上增加了透明度分量（alpha），该分量取值范围为0~1.0（完全不透明）

（4）HSL颜色

颜色也可由另外三个分量来表示，即色调、饱和度、透明度。

（5）HSLA颜色

在HSL颜色的机床上增加了Alpha分量

（6）预设颜色

Css提供了一些预定颜色，如：red、Green。

1.3尺寸单位

Cm:厘米

Mm：毫米

In：英寸（inch）

Px：像素（pixel）

Em、vw、vh。

Px：绝对单位。

进制：

十进制：145=1*10²+4*10¹+5*10⁰

八进制：145=1*8²+4*8¹+5*8⁰

十六进制：145=1*16²+4*16¹+5*16⁰

十六进制：0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。

二进十：如：11001 1*2⁴+1*2³+0*2²+0*2¹+1*2⁰=25

%：相对单位。

哪些是绝对的单位？那些事相对的单位？a

字体相关属性：

Font-family：字体名称。

Font-size：字体大小。

Font-variant：小写变成大写。

font-weight：字体的粗细。

可以简写，书写顺序

Font-style Font-variant font-weight Font-size Font-family

2.2文本相关的属性

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

Color：设置文本的颜色。

Text-decoration：字体装饰。

None：默认值，没有装饰效果

Overline ：上划线

Line-throoth：删除线

Underline：加下划线。

Text-shadow：阴影。比如--（+-）5px （+-）10px gray；的含义是定义一个背景，向上水平方向左（右）移5px，水平向上（下）移动10px。

Direction：方向。

Ltr：自左至右；rtl：至右向左。

例如：text-align:center;

Inherit：继承。

Start：起点。

Right：右对齐

Left：左对齐

Justify：两端对齐

Center：居中。

End：底端。

Top：靠上对齐

Bottom：靠下对齐

Middle：水平对齐

Text-indent：文本缩进。

Letter-spacing：字符间距。

Word-spacing：字词间距。

Line-height：设置行高，实际上是调整高度。

Background-color:底纹阴影（切记块级标签和关联标签做标题底纹换行不换行）

2.3.背景相关属性

body{
    background-color: blueviolet;
    background-image: url("QQ小贱鸡.png");
    /*background-repeat:no-repeat;*/
    background-repeat:no-repeat;
    background-position:rightbottom;

}

background-color：背景颜色

background-image：添加背景图片

background-repeat：图片的复制选项

no-repeat：不复制。

Repeat-y: 在垂直方向上设置。

Repeat-x：在水平方向上设置。

也可以将这一组属性封装进一个属性background中，表达更简洁。

background: greenyellow url("QQ小贱鸡.png") no-repeat right top;

书写顺序：

背景色-background-color

背景图片：background-image

重复方式：background—repeat

位置：background——position

div{
    height: 200px;
    width: 200px;
    background-color: red;
}

max-width：最大的宽度

max-height：最高的高度

min-width：最小的宽度

min-height：最小的高度

2.5显示相关属性

隐藏元素的方法啊：

（1） visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在。

（2） display：直接隐藏所有，格式，内容等，相当于没有，不占位置。

1）Display：可以设置元素的模式。

2）Inline：将块级元素以内联元素形式显示，此时width和height属性无效，

其空间取决于元素内容。

3）Inline-block：将块级元素以内联的元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。

li{
    /*inline 内联  不能控制背景色宽度*/
    display:inline-block; /*块级元素可以控制*/
    width: 200px;
    background-color: aqua;
}
span{
    display: block;
}

也可以将内敛元素以块级元素形式来显示，即display：block。

2.6盒子模型

Margin：外边距

Margin-top、margin-right、margin-bottom、margin-left。

（1） margin：30px：表示四个（上下左右）边距都是30px

（2） margin-left：30px单独设置上下左右外边局。

（3） margin：10px 20px 30px 40px；分别设置上下左右四个边距为10、20、30、40边距

padding：内边距。（同上面的外边距用法一样）

border:边框。

/*border: 10px doubledeepskyblue;*/
/* 线条的粗细边框类型（double双实线）颜色*/
border-width: 10px; 宽度
border-style: dotted; 类型
border-color: #ff9000; 颜色

solid实线

dotted点虚线

dotted线虚线

double双实线

groove凹槽

outline：轮廓线

2.7定位。

定位方式有：static（静态定位默认）、fixed（固定）、relative（相对）、absolute（绝对）。

无定位，元素正常出现了流中。不受left、right、top、bottom等控制。

div{
    width: 300px;
    height:300px;
    background-color: aqua;
    position:static;

}

/*position: static;*/
position:fixed;

      <style>
        #div1{
            width: 100px;
            height:100px;
            background-color: aqua;
            left: 100px;
            position:fixed;
            left: 30px;
            top: 30px;
        }
       #div2{
            width: 100px;
            height:100px;
            background-color:fuchsia;

        }
    </style>
</head>
<body>
<div id="div1">qwe</div>
<div id="div2">qwe</div>

</body>

从结果可以看出。Fix定位会将元素从流中“摘”出来

单独进行定位，定位取决于left、top。

重新定位之后就可能出现重叠现象。

相对定位

#div1{
 width: 100px;
 height:100px;
 background-color: aqua;
 }
 #div2{
 width: 100px;
 height:100px;
 background-color:fuchsia;
 position:relative;
 left: 30px;
 top:20px;
 }
 #div3{
 width: 80px;
 height:80px;
 background-color:sienna;
 }
 </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

从结果可以看出，相对定位是从原有的位置上进行位移但不影响后边的位置。

绝对定位：

从结果可以看出：绝对定位的元素将从流中被“摘”出来。依靠left属性进行定位。

与fixed类似，但是参照物不同。

Fixed参照根元素。

Absolute参照父容器

3.选择器

所谓的选择器，值的是选择施加样式目标的方式

3.1施加目标的选择器

元素选择器：

<style>
 div{
 color: red;

 font-size:30px;
 }
 p{
 font-size:50px;
 color: aqua;

 }
 </style>
</head>
<body>
<div>元素选择器</div>
啦啦啦
</body>

Id选择器：

根据class属性来选择元素的，其样式定义为

<style>
 #div1{
 width: 100px;
 height: 100px;
 background-color: red;

 }
 #div2{
 width: 100px;
 height: 100px;
 background-color:darkgreen;

 }
 </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>

结果显示：

从结果可以看出：。Odd{}定义的样式会施加给class=“odd”的元素上，比如上例中的第一个和第三个div。

  <style>
        .odd{
            width: 100px;
            height: 100px;
            background-color: red; 
        }
        .even{
            width: 100px;
            height: 100px;
            background-color:darkgreen;
        }
    </style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>

属性选择器：

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

<style>

 [title]{
 width: 100px;
 height:50px;
 background-color: red;
 border: solid aqua;
 }
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="div a">4</div>
<div title="div a">5</div>
</body>

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

根据属性的值来选择：

<style>
 [title='div2']{
 width: 100px;
 height:50px;
 background-color: red;
 border: 1pxsolid aqua;
 }
 </style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="div a">4</div>
<div title="div a">5</div>