CSS概述及基本语法[web前端]

1 css概述

网页分为三部分:

  1. 结构(HTML)

  2. 表现(CSS)

  3. 行为(JavaScript)

早期在没有css以前,html都是靠下边这些标签修饰的,用html来修饰网页非常麻烦,需要用到大量的标签,为了解决这个问题,就诞生了css语言,专门用作修饰网页内容

<a href="#">
    <b>
        <font>
            <i>
                <s>
                    新浪
                </s>
            </i> 
        </font>
    </b>
</a>

CSS(Cascading Style Sheets):级联样式表(又称为:层联样式表)

  • 是一种样式表语言,用于为HTML文档控制外观,定义布局。eg:字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。

  • 可将页面的内容与表现形式分离,页面内容存放在HTML文档中,用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

网页实际是一个多层的结构,通过css可以为网页中的每一层设置样式,我们最终看到的只是最上面的一层,总而言之,css就是用来设置网页中元素的样式的。

2 基本语法

1.行级样式表(也称内联样式表):在标签行内修饰

  • 我们通过举例来说明如何使用行级样式表来修改元素的样式:

<p style="color: red;font-size: 20px;">
    我是一个段落,我的颜色和大小是使用行级样式表修饰的。
</p>

效果:70e477044dee48fc85315dcd1a27c9d9.png

  • style属性中的内容都是css的内容,css中的声明和html中的属性一样,都是名值对的形式

    • 名和值之间用:隔开,使用;结尾。

  • 行级样式表一般在优先级最高时使用,因为如果在多个同样的使用场景下就要重复写,麻烦且不够高级

eg:

<a href="#" style="color: red;font-size: 20px;">百度</a>
<a href="#" style="color: red;font-size: 20px;">百度</a>
<a href="#" style="color: red;font-size: 20px;">百度</a>
<a href="#" style="color: red;font-size: 20px;">百度</a>
  • 这种情况下就需要用到下面的内嵌样式表,将几种使用相同样式修饰的标签分为一类

2.内嵌样式表

  • 将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            /* 此标签内写的都是css语法 */
            .a1{
                color: blue;
                font-size: 20px;
            }
            .a2{
                color: coral;
                font-size: 15px; 
            }
        </style>
    </head>
    <body>
         <a href="#" class="a1">我是一个链接,我的颜色和大小是使用内嵌样式表修饰的。</a>
         <a href="#" class="a1">我是一个链接,我的颜色和大小是使用内嵌样式表修饰的。</a>
         <a href="#" class="a2">我是一个链接,我的颜色和大小是使用内嵌样式表修饰的。</a>
         <a href="#" class="a2">我是一个链接,我的颜色和大小是使用内嵌样式表修饰的。</a>
    </body>
</html>

效果:4f37dbd2b139488191df5ca5e0b4bbb3.png

3.外部样式表

  • 将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中

baf6e4e3ea744caf863daa26e6d6abfe.png

 d7f9d40c138e4a27825e46e99ad98fa8.png

3 选择器

因为CSS样式和HTML页面中的标签是分离的,我们需要将样式和标签联系起来,就需要通过选择器实现。

3.1 标签选择器

  • 根据标签名来选择页面中的所有指定标签

  • 语法:标签名 { 样式表 }

  • eg:p{},h1{},div{}

实际代码举例:

<style type="text/css">
    /* 所有的p标签都会选中 */
    p{
        color:#FF0000;
    }
</style>

3.2 类选择器

  • 根据元素的class属性值匹配,表示一组,可以有多个标签属于一组,从而具有相同的样式。

  • 语法:.class属性值{ 样式表 }

实际代码举例:

<style type="text/css">
    .p1{
        color: #008000;
    }
    .p2{
        color: yellow;
    }
</style>

3.3 id选择器

  • 通过标签的id属性值选中唯一的一个标签

  • 语法:#id属性值 { 样式表 }

实际代码举例:

<style type="text/css">
    #p0{
       color: blue;
    }
</style>

3.4 通配选择器

  • 可以用来选中页面中的所有的标签

  • 语法:*{}

<style type="text/css">
    *{
        color: aqua;
        font-size: 30px;
     } 
</style>

选择器组合

  • 可以将公共的样式写进来

  • 语法:选择器1,选择器2,选择器N{}

<style type="text/css">
    p,.p1,#p0,h1{
         font-size: 20px;
    }
</style>

注意:

  1. 当一个标签被多个选择器选中时,会显示优先级高的样式

  2. 优先级从高到低:id >类 >标签 >通配选择器

4 文本,背景,列表,伪类,透明

4.1 文本

  • color:字体颜色

  • font-size:字体大小

    • eg:16px (px:像素单位,css中必须加单位)

  • font-family:字体

    • eg:楷体、宋体等

  • text-align:文本内容对齐

    • 注意:只能让文本内容对齐

    • 如果设置文本居中,这里的居中指的只是水平方向的居中,我们如果想要垂直方向也居中,就要通过line-height属性将我们的行高设置到和文字占据的块或者是行一样高。

  • font-weight:设置字体粗细

  • text-decoration:设置对文本的修饰

    • line-through:表示穿过文本的一条线(删除线)

    • underline:下划线

    • none:定义标准的文本

      • 可以用来去除超链接默认的下划线

  • font-style: italic:斜体文本

  • line-height:设置行高

  • letter-spacing:可以指定字符间距

  • word-spacing:设置每个单词之间的间距

  • text-indent:设置首行缩进

    • 建议使用单位em(表示当前一个文本中一个文字尺寸大小),假如我们使用单位px,那么在修改了字体大小的时候,缩进的大小也需要改变,这样来回修改就很麻烦,所以建议直接使用em。

4.2 背景

  1. background-color:背景颜色

  2. background-image:背景图片(优先级高于背景颜色)

    • 默认情况下设置的背景图片是可重复的,如果一张图片不足以将背景完全填充,那么就会重复产生几个照片对没有完全填充的部分进行填充,如果我们不想填充,可以通过background-repeat:no-repeat属性设置为不重复,这个时候即使我们的图片不足以将背景完全填充时,也不会产生重复照片去填充。

  3. background-repeat:设置背景是否可重复

  4. background-size:设置背景尺寸(宽和高)

  5. background- position:设置背景位置

    • 可以设置四个值:left,right,top,bottom(也可以左上,右上这样组合设置)

4.3 列表

CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。

  1. list-style-image:将图象设置为列表项标志。

    • 样式值的格式为url(图片地址)

  2. list-style-position:设置列表中列表项标志(图标)的位置。

    • 样式值可以设置为:inside、outside

      • 设置为inside代表图标在列表项里

      • 设置为outside代表图标在列表项外面

  3. list-style-type:设置列表项标志的类型。

    • 设置为none就表示去除默认图标

    • 设置为circle就表示图标为圆圈

总结: 可以对上面三条进行一个简写(list-style:简写属性)

eg:list-style:none url() inside;

  • 注意:这三个样式之间没有先后顺序

    • 一般都是位置才有先后顺序,并且一般都是顺时针顺序(上右下左),对于为位置我们如果只指明一个,那就是上右下左都是这个值,如果指明两个,就是上下为第一个值,左右为第二个值,如果指明三个,就是上为第一个值,左右为第二个值,下为第三个值,如果指明四个,就是对应上右下左。

4.4 伪类

CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类 。

伪类的语法:

:hover 选择鼠标悬停在上面的元素
:active 选择鼠标在上面并且按键按下不松手的元素
:focus 输入标签获得鼠标焦点时状态

4.5 透明度

css中设置透明度有两种方式:rgba和opacity

1.grba

  • 语法:rgba(R,G,B,A);

  • rgba只是单纯的设置颜色的透明度,但是标签上的文字不会透明,即透明元素的子元素不会继承其透明效果。

案例:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #p1{
                background-color: rgba(255, 255, 0, 1);
            }
            #p2{
                background-color: rgba(255, 255, 0, 0.2);
            }
        </style>
    </head>
    <body>
        <p id="p1">这是一个段落,这是一个段落</p>
        <p id="p2">这是一个段落,这是一个段落</p>
    </body>
</html>

效果:

 933a1a9fb14547389b3e6b825b8b171b.png

2.opacity

  • 用来设置标签的透明度。

  • 语法:opacity:value;

  • value取值: 0.0 (完全透明)到 1.0(完全不透明)。

  • opacity属性具有继承性,因此会使得容器中所有的元素都具有透明度,所以我们设置的字体也会边透明。

案例:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .a1{
                opacity: 1;
            }
            .a2{
                opacity: 0.5;
            }
            
        </style>
    </head>
    <body>
        <div class="a1">
            <img src="img/背景.jpg"/>
            <span>这是一个span标签</span>
        </div>
        <div class="a2">
            <img src="img/背景.jpg"/>
            <span>这是一个span标签</span>
        </div>
    </body>
</html>

效果:

8523f2dbfe88426d82af50623c612653.png

5 标签分类

5.1 块级标签

  • 会自动换行的标签,无论内容有多少,都会独占一行

  • 此类标签可以设置宽高

  • 默认的大小:与body一样,高与内容一样,如果没有内容高度为0

例如:<p>、<h1>、<ul>、<ol>、<hr/>等

5.2 行级标签

  • 只占自身大小的标签,不会占一行

  • 不能设置宽高

例如:<font>、<b>、<i>、<a>等。 

5.3 行级块标签

  • 可以设置大小,但是不占一行

例如:<input/> <img>等。

注意:

  1. 一般情况下使用块级标签包含行级标签,不使用行级标签包含块标签。

    • 因为块级标签主要用来布局,行级标签主要用来文字选中。

  2. a可以包含任何标签,除去a本身;

    • 比如用超链接把图片包裹起来

  3. p标签不可以包含任何的块标签。

6 display属性

  • 用来修改标签的类型

可选值:

display:inline :设置标签为行级标签
         block :设置标签为块标签 
         none :隐藏标签(标签将在网页中完全消失,不占空间)       
         inline-block :设置标签为行级块标签 

7 div和span

7.1 div标签

  • 块级标签,可以包含任何标签(行内元素、块级元素都行)

  • 没有默认样式,定义什么样式就变成什么样子。

    • 比如可以通过css样式来设置自身的宽度(没有定义宽度时,div标签的宽度为容器的100%),高度,以及标签之间的距离(内边距和外边距)

  • 主要的作用是用来进行网页布局,是一个纯净版的块级标签

7.2 span标签

  • 行级标签,标签内只能添加行内元素的标签或文本,不能容纳块级元素

  • 没有任何默认样式宽度

    • 高度无法通过css样式设置、它的宽高受其本身内容控制,随着内容的宽高改变而改变

    • span标签可以设置左右的外边距和内边距,但是上下的外边距和内边距无法设置

  • span标签主要用来选中文本,然后修饰文本

8 盒子模型

CSS处理网页时,它认为每个标签都包含在一 个不可见的盒子里,如果把所有的标签都想象成盒子,那么我们对网页的布局就相当于是摆放盒子,我们只需要将相应的盒子摆放到网页中相应的位置,即可完成网页的布局。 

盒子模型:

1f2cc62a37af4bcfa68fcfa3a8546989.png

一个盒子我们会分成几个部分:

  1. 内容区(content)

    • 内容区指的是盒子中放置内容的区域,也就是标签中的文本内容,子标签放置于内容区中

    • 当一个标签没有内边距、边框,那么内容区大小就是标签的大小

    • 通过width和height两个属性设置的是内容区的大小而不是整个盒子的大小

    • width和height属性只适用于块标签(包含行级块)

  2. 内边距(padding)

    • 内边距指的是内容区到边框之间的距离

    • 内边距会影响整个盒子的大小,使用padding属性来设置标签的内边距。

      代码示例:

      padding-top: 10px;/*设置内容区与上方边框的距离*/
      padding-bottom: 10px;/*设置内容区与底部边框的距离*/
      padding-left: 10px;/*设置内容区与左边框的距离*/
      padding-right: 10px; /*设置内容区与右边框的距离*/
      padding:10px 20px 30px 40px; /*设置标签上、右、下、左(顺时针)四个方向的内边距*/
      padding: 10px; /*上下左右边距都一样时可以这样简写*/
      
      图示:

    加padding: 10px 后效果图:265d981f0d27439295270a28fed52f6f.jpeg

  3. 边框(border)

    • 标签的最外层,会影响标签的大小

    • 使用border属性设置盒子的边框

    • 边框样式: dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(槽线)

      border-radius:设置四个角为圆角边框

      border-top-left-radius:设置左上为圆角边框

      border:1px red solid; 
      /* 分别指定了边框的宽度、颜色和样式 */ 
      /* 也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框 */
  4. 外边距(margin)

    • 外边距是标签距离另一个标签之间的距离,不影响标签的

    • 不影响标签的大小,但是会影响标签的位置,标签所占的空间会改变

    • 使用margin属性可以设置外边距,用法和padding类似

    • 可以通过margin-top/lift/right/bottom这些属性修饰

      /* 上下不能给auto,只能给具体的值 */
      margin-top: 10px;
      margin-bottom: 10px;
      /* 组合使用可使标签居中 auto(外边距最大化)*/
      margin-left: auto;
      margin-right: auto;

      (margin: 10px auto;) 效果:42d016217c564f0a9ca955ec7a4bf047.jpeg

注意:

  • 标签整体大小 = 内容区 + 内边距 + 边框

9 清除浏览器的默认样式

浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的,所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

*{ 
    margin: 0; 
    padding: 0; 
}

10 文档流--浮动,定位

   网页是一个多层的结构,一层叠加一层。

  • 我们通过css可以分别为每一层来设置样式

  • 用户只能看到最顶上的一层,这些层最下面的一层我们就称之为文档流

    • 文档流是网页的基础

更通俗的说文档流就是标签在网页中默认的排放顺序,将窗体自上而下分成一行行 ,并在每行中按从左至右的顺序排放标签。

  • 文档流中标签默认会紧贴到上一个标签的右边,如果右边不足以放下标签,标签则会另起一行,在新的一行中继续从左至右摆放。

  • 这样一来每一个块标签都会另起一行,那么我们如果想在文档流中进行布局就会变得比较麻烦。

图示: 

c3baaeb994884bfc836b138a58281e4b.png

因此,我们要进行网页的布局,就必须打破这一默认排放规则。

那么怎么打破网页的默认排放规则呢?

  1. 浮动

  2. 定位

11 浮动

11.1 浮动概述

浮动指的是使标签脱离原来的文档流,在父标签中浮动起来,浮动使用float属性。

可选值:

none :不浮动 
left :向左浮动 
right :向右浮动 

块级标签和行级标签都可以浮动,当一个行级标签浮动以后将会自动变为一个块级标签;当一个块级标签浮动后,宽度会默认是内容的宽度,所以当漂浮一个块级标签时我们都会为其指定一个宽度。

  • 当一个标签浮动以后,其下方的标签会上移。

  • 浮动会使标签完全脱离文档流,也就是不再在文档中在占用位置,标签浮动以后不会再影响父标签的高度,也就是浮动标签不会撑开父标签。

11.2 清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值:

left : 忽略左侧浮动

right :忽略右侧浮动

both :忽略全部浮动

案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 外边的盒子如果不设置宽度,默认宽度就是浏览器宽度,已经是居中状态,
               所以要想使内容居中,就要给外边的盒子设置宽度,然后再调整margin属性使内容居中 */
            .nav_box{
                background-color: antiquewhite;
                width: 750px;
                margin: auto;
            }
            .nav{
                float: left;
                background-color: palegreen;
                width: 150px;
                padding: 10px 0px;
                text-align: center;
            }
            .content_box{
                width: 750px;
                margin: auto;
                margin-top: 10px;
            }
            .content_box_left{
                background-color: pink;
                float: left;
                width: 200px;
                height: 400px;
            }
            .content_box_center{
                background-color: aqua;
                float: left;
                width: 334px;
                height: 400px;
                margin: 0px 8px;
            }
            .content_box_right{
                background-color: pink;
                float: left;
                width: 200px;
                height: 400px;
            }
            .content_box_bottom{
                background-color: aquamarine;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <div class="nav_box">
            <div class="nav">首页</div>
            <div class="nav">公司介绍</div>
            <div class="nav">产品案例</div>
            <div class="nav">公司新闻</div>
            <div class="nav">联系我们</div>
            <!-- 
                 浮动后的标签不占原来的空间,没有把父级标签撑起来,
                 所以下面继续写的内容就会被浮动起来的内容盖住
                 解决:清除浮动,会自动将父级标签撑开
            -->
            <div style="clear: left;"></div>
        </div>
        <div class="content_box">
            <div class="content_box_left">left</div>
            <div class="content_box_center">center</div>
            <div class="content_box_right">right</div>
            <div style="clear: left;"></div>
            <div class="content_box_bottom">底部</div>
        </div>
    </body>
</html>

图片解释:896cc4fcd64842f4813e90dbb7e3e2d5.jpeg

62fdae931de142b4892e69ca925b28b7.jpeg

6ee13aac4e534fa589e902c8e02826a4.jpeg

60989d6fc07341f58ebce3780b2db702.jpeg 最终效果:f8ba421ba69143aea43aca5cfa10d32f.jpeg

12 定位(Position)

定位的基本思想很简单,它允许你定义的标签相对于其正常位置,或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

  • 需要有参照物 比如:自己、其他标签、父标签、浏览器本身

12.1 相对定位(relative)

  • 移动时,是以自己本身的位置为参照物的(也就是它的起点)进行移动,移动后,原来的空间还被占用。

  • 通过position:relative; 开启相对定位,left right top bottom四个属性来设置标签的偏移量。

相对定位的特点:当标签的position属性设置为relative时,则开启了标签的相对定位

  1. 当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化

  2. 相对定位是相对于标签在文档流中原来的位置进行定位

  3. 相对定位的标签不会脱离文档流

案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 100px;
                height: 100px;
                background-color: palegreen;
                /*开启相对定位*/
                position: relative; 
                left: 100px;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: paleturquoise;
            }
        </style>
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </body>
</html>

效果:87ee2139a7e647e0b161471126c94064.jpeg

12.2 绝对定位

  • 绝对定位是不占空间的,运用了绝对定位的标签会脱离原来的文档流,浮动起来,因此视觉上会其他的标签重叠。

  • 可以通过position: absolute; 开启绝对定位, left right top bottom四个属性来设置标签的偏移量

绝对定位的特点:

  1. 开启绝对定位,会使标签脱离文档流,也就是使标签上升一个层级

  2. 开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化

  3. 参照物:相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签的绝对定位都会同时开启父标签的相对定位),如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位,一般情况,开启了一个标签的绝对定位,都会开启父级标签的相对定位。

  4. 绝对定位会改变标签的性质,行级标签变成块标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 100px;
                height: 100px;
                background-color: aqua;
                position: absolute;/*开启了绝对定位*/
                left: 100px;
                top: 100px;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: palegreen;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="box3">box3
            <div class="box1">box1</div>
        </div>
        <div class="box2">box2</div>
    </body>
</html>

图片说明:a54668851ca6400fb0243bd02d45a583.jpeg

0ccfcdc3ccec4a69a23eec4cd37172d3.jpeg

93274f7c4759427885ab416a91c8e978.jpeg

2f2f0f1a9cb04c5d9d9e3b4d80b23f2b.jpeg

ae46fb5f161e44b1a2ddb08aa5724b00.jpeg

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chen☆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值