14-前端开发之CSS

2023-08-30 11:18:28

什么是 CSS ?

CSS 指层叠样式表 (Cascading Style Sheets)，用于对页面进行美化。

存在的方式有3种：

元素内联：在标签中使用 style='xx:xxx;'
页面嵌入：在页面中嵌入< style type="text/css"> </style >
引入外部 CSS 文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。

编写注释

/*注释内容*/

元素内联

直接在标签上应用，代码如下：

<p style="background-color:yellow">

元素内联

</p>

效果如下：

页面嵌入

在Head里面写好css样式然后再style标签中应用。

主要的样式选择器有：id 选择器，class 选择器，标签选择器，层级选择器，组合选择器和属性选择器。

下面将逐一介绍样式选择器的使用。

样式应用优先级：直接在标签上写的 style 优先，然后按编写顺序，就近原则应用。

class 选择器

class 选择器应用的比较广泛一些，基本语法如下：

<head>

    <meta charset="UTF-8">

    <title>class选择器</title>

    <style>

        .s1{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <!--使用class="s1"来应用head中.s1的样式-->

    <div class="s1">我是 class 选择器</div>

</body>

id 选择器

由于id不能重复，一般不推荐使用id选择器，知道即可，了解一下基本语法：

<head>

    <meta charset="UTF-8">

    <title>id选择器</title>

    <style>

        #s1{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <!--使用id="s1"来应用head中#s1的样式-->

    <div id="s1">我是 id 选择器</div>

</body>

标签选择器

给所有同一类型的标签添加样式

<head>

    <meta charset="UTF-8">

    <title>标签选择器</title>

    <style>

        /*所有div都会应用此样式*/

        div{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <div>我是标签选择器1</div>

    <div>我是标签选择器2</div>

</body>

关联选择器（层次选择器？）

<head>

    <meta charset="UTF-8">

    <title>关联选择器</title>

    <style>

        /*注意是中间空格*/

        .idselect p{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <!--div标签里面只有p标签才能应用此样式-->

    <div class="idselect">

        我是DIV

        <p>我是P</p>

    </div>

</body>

效果如下：

组合选择器

以上选择器都可以组合起来用，代码如下：

<head>

    <meta charset="UTF-8">

    <title>组合选择器</title>

    <style>

        #i1,.c1,div p{

            background-color: aqua;

        }

    </style>

</head>

<body>

    <!--div标签里面只有p标签才能应用此样式-->

    <div>

        我是DIV

        <p>我是P</p>

    </div>

    <div id="i1">

        我是#i1

    </div>

    <div class="c1">

        我是.c1

    </div>

</body>

看效果吧：

属性选择器

对选择到的标签通过属性再进行一次筛选

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style>

        .c1[name="dave"]{

            width: 50px;height: 50px;

            background-color: chartreuse;

        }

    </style>

</head>

<body>

    <!--只有符合属性规则的标签才会应用样式-->

    <div class="c1">我是DIV</div>

    <input class="c1" type="text" name="dave">

    <input class="c1" type="password">

</body>

看效果吧：

更多选择器请参考：CSS 选择器参考手册

外部引入

css 样式也可以写在单独文件中，在头部直接引入也可以用

<head>

    <meta charset="UTF-8">

    <title>外部引入</title>

    <link rel="stylesheet" href="css/commons.css" />

</head>

CSS 常用属性

基本

height           # 高度,百分比

width            # 宽度,像素,百分比

text-align:ceter # 水平方向居中

line-height      # 垂直方向根据标签高度

color            # 字体颜色

font-size        # 字体大小

font-weight      # 字体加粗

background（背景）

1. background-color 背景颜色，代码如下：

<div style="background-color: red">

    Hello World

</div>

更多颜色请参考这里：CSS颜色集

2. background-image 背景图片，代码如下：

<!--默认是平铺,加上 background-repeat: no-repeat可以取消重复，此外还有：repeat-x;repeat-y-->

<div style="background-image: url(image/favicon.ico);height: 80px;background-repeat: no-repeat" >

</div>

3. background-position

应用场景：所有的小图都放置在一张大图上，利用定位背景图像显示该大图的某个部分，达到显示不同小图的目的。

<head>

    <meta charset="UTF-8">

    <title>background-position</title>

    <style>

        .bg-icon{

            /*定义一个图片*/

            background-image: url(icon1.png);

            /*设置图片不平铺*/

            background-repeat: no-repeat;

            height: 18px;

            width: 18px;

            /*设置一个边框用来演示这个例子的窗口*/

            border: 2px solid red;

            /*根据图片xy轴定位来调整窗口显示小图的位置*/

            background-position-x: 0;

            background-position-y: -80px;

        }

    </style>

</head>

<body>

    <div class="bg-icon"></div>

</body>

border 边框，代码如下：

<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->

<!--第一种：线的粗细为1像素，实线、红色-->

<div style="border:1px solid red;height:10px" ></div>

<!--第二种：线的粗细为1像素，点、蓝色-->

<div style="border:1px dotted blue;height:10px" ></div>

<!--第三种：线的粗细为1像素、虚线、紫色-->

<div style="border:1px dashed purple;height:10px" ></div>

显示效果如下：

边框也可以单独设置上下左右任意一边，代码如下：

<!--在左边设置边框，3px、实线、蓝色-->

<div style="border-left: 3px solid red">Hello World</div>

显示效果如下：

display

<!--display 为none将隐藏标签-->

<div style="display: none;">Hello World</div>

<!--默认inline。此元素会被显示为内联元素，元素前后没有换行符。-->

<div style="display: inline;background-color: chartreuse ">Hello World</div>

<!--block:此元素将显示为块级元素，此元素前后会带有换行符。-->

<a style="display: block;background-color: chartreuse ">Hello World</a>

<!--行内块元素：既有设置行内标签属性，也有块级标签属性-->

<a style="display: inline-block;background-color: chartreuse ">Hello World</a>

更多属性可以参考：CSS display 属性

float

浮动，用途很广泛，让标签浪起来，块级标签也可以堆叠。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>luotianshuai_study</title>

    <style>

        .float-left{

            width:20%;

            background-color:red;

            height: 500px;

            float: left;

            /*这里长和宽，可以用百分比或者直接指定像素来指定*/

        }

        .float-right{

            width: 80%;

            background-color:blue;

            height: 500px;

            float:left;

            /*这里长和宽，可以用百分比或者直接指定像素来指定*/

        }

    </style>

</head>

<body>

    <div class="float-left"></div>

    <div class="float-right"></div>

</body>

</html>

注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：

<div style="clear:both;"></div>

margin、padding

1.margin（外边距）

/*外边距从上往下移50px*/

margin-top: 50px;

/*外边距从左往右移50px*/

margin-left: 50px;

更多属性请点击这里

2.padding（内边距）

/*内边距从上往下移50px*/

padding-top: 50px;

/*内边距从左往右移50px*/

padding-left: 50px;

更多属性请点击这里

cursor

<div style="cursor:pointer">停放在这里显示小手(pointer)</div>

<div style="cursor:help">停放在这里显示问号(help)</div>

<div style="cursor:wait">停放在这里显示圆圈(wait)</div>

<div style="cursor:move">停放在这里显示移动(move)</div>

<div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

day15-CSS补充知识点

position（定位）

position 主要有4个属性值：

static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
fixed: 绝对定位，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
relative: 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。如果元素没有已定位的父元素，那么它的位置相对于.

fixed 应用例子

下面的例子主要是将“标题栏”固定的顶部，“返回顶部”按钮固定在右下角，无论你怎么滚动屏幕，它们相对浏览器窗口都是固定在同一位置。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>固定标题栏&&返回顶部</title>

    <style>

        .pg-header{

            background-color: crimson;

            height: 48px;

            color: #FFFFFF;

            position: fixed;

            top:0;

            left:0;

            right:0;

        }

        .pg-body{

            background-color: olivedrab;

            height: 500px;

            margin-top: 50px;

            color: #FFFFFF;

        }

        .gototop{

            background-color: aqua;

            position: fixed;

            right: 30px;

            bottom: 30px;

        }

    </style>

</head>

<body>

    <div class="pg-header">我是头部</div>

    <div class="pg-body">我是内容1</div>

    <div class="pg-body">我是内容2</div>

    <div class="gototop">返回顶部</div>

</body>

</html>

relative && absolute 应用例子

relative 相对于网页整体固定。
absolute 是相对于一个有着 position 属性的父级对象进行定位的，如果不存在，那么它就会以body为定位对象，按照你首次打开浏览器的整个窗口进行定位，当你向下滑动时它会随之移动。

看代码：

    <!--这里定义了一个reletive属性的position对象-->

    <div style="position:relative;width: 500px;height: 200px;border: 2px solid red;margin: 0 auto">

        <div style="position: absolute;right:0;bottom:0;width: 100px;height: 50px;border: 2px solid blue;"></div>

    </div>

<!--absolute属性的这个对象是相对于它父级的对象定位的-->

还有个输入框的例子看看：

<div style="height: 35px;width: 400px;position: relative;">

    <input type="text" style="height: 35px;width: 370px;padding-right: 30px">

    <span style="position: absolute;right: 6px;top: 10px;background-image: url(user_icon.jpg);height: 18px;width: 18px;display: inline-block;"></span>

</div>

opacity（透明度）

用于设置 div 元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明）。

代码如下：

div

{

opacity:0.5;

}

注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。

z-index（页面层级展示顺序）

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

Z-index 仅能在定位元素上奏效（例如 position:absolute;）

来看个三级页面的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>z-index</title>

    <style>

        .page1{

            z-index: 10;

            background-color: aquamarine;

            height: 300px;

            width: 500px;

            position: fixed;

            top: 50%;

            left: 50%;

            margin-top: -150px;

            margin-left: -250px;

        }

        .page2{

            z-index: 9;

            background-color: #AAAAAA;

            top:0;

            right:0;

            bottom: 0;

            left:0;

            position: fixed;

            opacity: 0.5;

        }

        .page3{

            background-color: blue;

            height: 500px;

            margin-top: 50px;

        }

    </style>

</head>

<body>

    <div class="page1">页面一</div>

    <div class="page2">页面二</div>

    <div class="page3">页面三</div>

</body>

</html>

overflow

这个属性定义溢出元素内容区的内容会如何处理。主要属性如下：

visible: 默认值。内容不会被修剪，会呈现在元素框之外。
auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
hidden: 内容会被修剪，并且其余内容是不可见的。
inherit: 规定应该从父元素继承 overflow 属性的值。

<body>

    <!--overflow:auto属性：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。-->

    <div style="height: 50px;background-color: crimson;overflow: auto">

        Dave<br>

        Dave<br>

        Dave<br>

        Dave<br>

        Dave<br>

    </div>

</body>

hover

hover 选择器用于选择鼠标指针浮动在上面的元素。

标题栏鼠标滑过变色的实现例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠标滑过变色</title>

    <style>

        .pg-header{

            position: fixed;

            height: 48px;

            background-color: crimson;

            line-height: 48px;

            top:0;

            left:0;

            right:0;

        }

        .pg-body{

            margin-top: 50px;

        }

        .w{

            width: 980px;

            margin: 0 auto;

        }

        .pg-header .menu{

            display: inline-block;

            padding: 0 10px 0 10px;

            color: #FFFFFF;

        }

        /*鼠标滑过变色*/

        .pg-header .menu:hover{

            background-color: darkred;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="w">

            <a class="logo">LOGO</a>

            <a class="menu">首页</a>

            <a class="menu">超市</a>

            <a class="menu">全球购</a>

        </div>

    </div>

    <div class="pg-body">

        <div class="w">内容</div>

    </div>

</body>

</html>

码农公寓