前端开发【第2篇：CSS】

2022-09-20 11:11:07

鸡血

样式的属性多达几千个，但别担心，按照80-20原则，常用的也就几十个，你完全可以掌握它。

Css初识

HTML的诞生

早期只有HTML的时候为了让HTML更美观一点，当时页面的开发者会把颜色写到标签里面，想想一下一堆标签一堆属性：颜色、字体等，总结一个字就是“乱”

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

CSS语法和CSS优先级

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

前端开发【第2篇：CSS】

2、3种css样式

内联样式

当你键入<h2 style="color: red">CatPhotoApp</h2>，你就给h2元素添加了inline style(内联样式)。

层叠样式

内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）

<!-- 在代码的最顶端，创建一个如下的style元素：

在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如，如果你想要将所有的h2元素设置为红色,

你的代码应该看起来像这样：

 -->

<style>

  <!-- 选择器 {属性名称: 属性值;} -->

  h2 {color: red;}

</style>

外部样式

单独把css写入到一个文件中称为外部样式

    <!-- 引入CSS样式文件 -->

    <!--<link href="/statics/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>-->

3、优先级

内联样式 > 层叠样式  > 外部样式

选择器

选择器可以层层嵌套,这句话不懂没关系继续看

元素选择器[标签选择器]

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

它会根据页面自动应用到标签中不需要调用

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

类选择器[Css样式类选择器]

类选择器可以理解为把多个样式封装到一个变量中，当我们使用这个变量的时候其实就是调用这一组样式

它可以放到外部样式文件中也可以在头部样式中定义

<!-- 定义类选择器样式 -->

    <style type="text/css">

        .main-container  {

            background-color: aqua;

        }

    </style>

<!-- 应用类选择器样式 -->

    <div class="main-container">

        Test information

    </div>

id选择器

和类选择器类似，类选择器在使用的时候我们使用的class属性来应用类选择器，使用id选择器的时候我们应用使用id属性

        /* id 选择器 */

        #footer {

            background-color: aqua;

        }

        <!-- id选择器应用 -->

        <div id="footer">

            Test information

        </div>

上面的不管是类选择器和id选择器还是元素选择器可以进行嵌套

    <style type="text/css">

        #footer div .main-container div {

            background-color: aqua;

        }

    </style>

    <!-- 使用-->

    <div id="footer">

        <div class="main-container">

            Test information

            <div>

                Test information

            </div>

        </div>

    </div>

子元素选择器

h1 > strong {color:red;}

<!-- 使用 -->

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

属性选择器

/* 下面的例子为带有 title 属性的所有元素设置样式： */

[title] { color:red; }

/* 下面的例子为 title="shuaige" 的所有元素设置样式：*/

<img title="shuaige" src="/i/w3school_logo_white.gif" />

/* 下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值： */

[title~=hello] { color:red; }

<h2 title="hello world">Hello world</h2>

<h2 title="hello shuaige">Hello world</h2>

/* 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。在css中分隔符是使用  "-"  例如en-shuaige, en-name*/

[lang|=en] {background:yellow;}

<p lang="en">Hello!</p>

<p lang="en-us">Hi!</p>

<p lang="en-gb">Ello!</p>

/* 匹配属性值以指定值开头的每个元素。 */

div[class^="test"]

<div class="test-shuaige">第三个 div 元素。</div>

/* 匹配属性值以指定值结尾的每个元素。 */

div[class$="test"]

<div class="test">第三个 div 元素。</div>

/* 匹配属性值中包含指定值的每个元素只要包含就可以。*/

div[class*="test"]

<div class="first_test">第一个 div 元素。</div>

伪类选择器

a:link {color: #FF0000}        /* 未访问的链接 */

a:visited {color: #00FF00}    /* 已访问的链接 */

a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */

a:active {color: #0000FF}    /* 选定的链接 */

CSS样式

背景

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

1、普通颜色背景和img背景

/* 普通背景 */

p {background-color: gray;}

/* 图片背景 */

body {background-image: url(/i/eg_bg_04.gif);}

2、背景重复

比如我们定义的div元素是100px,背景图片是10px，默认情况下图片就会平铺开来布满整个100px大小,如果我们不想让他重复可以使用repeat属性

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

body

  {

  background-image: url(/i/eg_bg_03.gif);

  background-repeat: repeat-y;

  }

3、背景图片定位

可以利用 background-position 属性改变图像在背景中的位置。

<html>

<head>

<style type="text/css">

body {

    background-image: url(/i/eg_bg_03.gif);

    background-repeat: no-repeat;

    background-position:center;

}

</style>

</head>

<body>

</body>

</html>

前端开发【第2篇：CSS】

定位方式

有关键字：(center、top、bottom、right、left)中心、上、下、左、右 ，两两来组合进行定位

<style type="text/css">

body {

    background-image: url(/i/eg_bg_03.gif);

    background-repeat:no-repeat;

    background-position:top left;

}

</style>

百分比方式

有时候上面关键字满足不了我们就可以采用百分比的方式

<style type="text/css">

body {

    background-image: url(/i/eg_bg_03.gif);

    background-repeat:no-repeat;

    background-position:20% 100%;

}

</style>

这个百分比也是由两个百分数组合的  第一个百分数代表“里左边多远”，第二个百分数代表“里上面多远” 哈哈好理解吧

4、背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

<html>

<head>

<style type="text/css">

body

{

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat;

background-attachment:fixed

}

</style>

</head>

<body>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

</body>

</html>

前端开发【第2篇：CSS】

文字

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等

字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）

列表

列表属性简写：

ul { list-style:square inside url('/i/arrow.gif'); }  /* 第一个值是类型 第二个值是位置 第三个值是图片url*/

1、列表类型- list-style-type

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>前端开发-CSS-1</title>

    <style type="text/css">

        ul.circle {list-style-type:circle}  /* 圆形 */

        ul.square {list-style-type:square}  /* 方块*/

        ol.upper-roman {list-style-type:upper-roman}  /* 罗马符号 I II */

        ol.lower-alpha {list-style-type:lower-alpha}  /* 希腊符号 --! a b c d */

    </style>

</head>

<body>

    <div>

        <p>圆形:</p>

        <ul class="circle">

            <li>Coffee</li>

            <li>Tea</li>

            <li>Coca Cola</li>

        </ul>

        <p>方形:</p>

        <ul class="square">

            <li>Coffee</li>

            <li>Tea</li>

            <li>Coca Cola</li>

        </ul>

        <p>罗马符号:</p>

        <ol class="upper-roman">

            <li>Coffee</li>

            <li>Tea</li>

            <li>Coca Cola</li>

        </ol>

        <p>希腊符号:</p>

        <ol class="lower-alpha">

            <li>Coffee</li>

            <li>Tea</li>

            <li>Coca Cola</li>

        </ol>

    </div>

</body>

</html>

前端开发【第2篇：CSS】

2、列表图像 list-style-image

<html>

<head>

    <style type="text/css">

        ul { list-style-image: url('/i/eg_arrow.gif')}

    </style>

</head>

<body>

    <ul>

        <li>咖啡</li>

        <li>茶</li>

        <li>可口可乐</li>

    </ul>

</body>

</html>

前端开发【第2篇：CSS】

3、图标位置 list-style-position

<html>

<head>

    <style type="text/css">

        ul.inside { list-style-position: inside }

        ul.outside { list-style-position: outside }

    </style>

</head>

<body>

    <p>该列表的 list-style-position 的值是 "inside"：</p>

    <ul class="inside">

        <li>Earl Grey Tea - 一种黑颜色的茶</li>

        <li>Jasmine Tea - 一种神奇的“全功能”茶</li>

        <li>Honeybush Tea - 一种令人愉快的果味茶</li>

    </ul>

    <p>该列表的 list-style-position 的值是 "outside"：</p>

    <ul class="outside">

        <li>Earl Grey Tea - 一种黑颜色的茶</li>

        <li>Jasmine Tea - 一种神奇的“全功能”茶</li>

        <li>Honeybush Tea - 一种令人愉快的果味茶</li>

    </ul>

</body>

</html>

前端开发【第2篇：CSS】

盒子模型

你可能早已经注意到了这点，所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。

前端开发【第2篇：CSS】

拿小米官网来说首屏被分文了这么多个盒子，当然就和我们平时使用的盒子一样，里面也可以包含一个一个的小盒子

前端开发【第2篇：CSS】

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

content：也就是实际的内容的[文字、图片](实际指的是内容的高度和宽度)

border：是边框，也就是包裹盒子的边，或边缘（边框包裹内容和内边距，它可以有宽度他也有4个方向）

padding：是内容到边框的距离，可以有上、下、左、右（内容距离盒子内边缘的举例它有4个方向）

margin：外边框可以理解为，边框的扩展还需要占用多大的空间，也是上、下、左、右（不同的盒子边框外边缘距离另一个盒子边框外边缘的距离）

模型兼容性问题

1、margin值：如果两个盒子是上下排布，上面的盒子给margin-bottom值，下面盒子给margin-top值那么盒子之间的实际值不是它们相加的和而是取最大值，这里有个特殊的当它们float起来后其值为和

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box1 {

            border: 10px solid red;

            margin-bottom: 30px

        }

        .box2 {

            border: 10px solid blue;

            margin-top: 10px

        }

    </style>

</head>

<body>

    <div style="position: fixed; top: 50%; left: 50%;  width: 200px; background-color: chartreuse">

        <div class="box1"> Box1 </div>

        <div class="box2"> Box2 </div>

    </div>

</body>

</html>

解决方法：只写一个即可、或者让盒子浮动起来

2、margin值：盒子之间为父子关系的时候，如果父级盒子没有margin-top和padding值，那么子级盒子的margin-top会被父级继承

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box1 {  width: 100px;  height: 100px;  background-color:red;  }

        .box2 {  width: 100px;  height: 100px;  background-color:orange;}

        p {width: 50px; height: 50px; margin-top: 20px; background-color: black}

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2">

        <p></p>

    </div>

</body>

</html>

前端开发【第2篇：CSS】

问题原因：

看补充的overflow这也是一个溢出处理，overflow的本质是溢出隐藏而在这里是将溢出的收回来~

问题解决方法：

给父级盒子添加：overflow:hidden溢出隐藏

.box2 {  width: 100px;  height: 100px;  background-color:orange; overflow: hidden}

3、盒子属性的写法

    <!--

    大小：

    width

    height

    ----------------------------------------

    内边框[padding]:

    padding: 10px 20px 30px 40px;   上下左右

    padding: 10px;  4个方向

    padding: 10px 20px 30px;  上 左右 下

    padding: 10px 20px;  上下 左右

    ----------------------------------------

    外边框[margin]：和padding一样

    margin: 10px 20px 30px 40px;   上下左右

    margin: 10px;  4个方向

    margin: 10px 20px 30px;  上 左右 下

    margin: 10px 20px;  上下 左右

    ----------------------------------------

    边[border]:

    border-top-width: 20px;

    border-top-style: solid;

    border-top-color: red;

    简写: border-top: 20px solid red;  宽 样式  颜色

    同样：他有4个方向  上下左右 都可以按照上面的方式配置

    如果4个边框都相同:

    border: 20px solid red;  同理

    -->

CSS定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

相对定位

#box_relative {

  position: relative;

  left: 30px;

  top: 20px;

}

前端开发【第2篇：CSS】

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位

absolute这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

  1. 当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent（在父对象内）来进行定位。
  2. 如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解
    <div style="position:relative;background-color: blue;height:100px;">

        <!--当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性-->

        <div style="position:absolute;right: 0px;bottom:0px;background-color: blueviolet">su1</div>

    </div>

前端开发【第2篇：CSS】

    <div style="background-color: blue;height:100px;">

    <!--当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性-->

    <div style="position:absolute;right: 0;bottom:0;background-color: blueviolet">su1</div>

    </div>

    <div style="height: 1000px; background-color: aqua">

        shuai

    </div>

这里仔细看下我给他定位的位置是右下角,当我们打开网页后它是在右下角但是鼠标华东后看下结果，它就不在右下角了，所以说如果父级别没有使用position的时候需要注意

前端开发【第2篇：CSS】

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

补充

溢出

应用场景，有这么一种情况，在一个div内有很多的的内容，如果div的框体不是很大超出去了怎么办？详细情况如下图，代码

代码如下：

    <div style="height:100px;width: 500px; background-color:green;">

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

    </div>

前端开发【第2篇：CSS】

解决方法：增加overflow样式，代码如下:

    <div style="overflow:auto;height:100px;width: 500px; background-color:green;">

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

    </div>

前端开发【第2篇：CSS】

 透明度

透明度，用的比较多，需要注意，简单代码例子如下：

    <div style="background-color:blue;height:100px;padding-top:30px">

        <!--这里设置内部的div的透明度-->

        <div style="opacity: 0.5;background-color:pink;height:30px;margin-left: 30px;margin-right:30px;">

        </div>

    </div>

效果图如下：

前端开发【第2篇：CSS】

层级

大部分主流浏览器都支持层级，我们可以使用z-index+浮动+透明度实现一个例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>前端开发-CSS-1</title>

    <style type="text/css">

        .main-container {

            position: absolute;

            top: 0; left: 0;

            height: 100%; width: 100%;

            background-color: rgba(0,0,0,0.1);

            z-index: 1;

        }

        .main-cover {

            position: absolute;

            left: 50%;

            top: 50%;

            height: 100px;

            width: 100px;

            background-color: blueviolet;

        }

    </style>

</head>

<body>

    主题内容为白色

    <div class="main-container">

        <div class="main-cover">

            ceshi

        </div>

    </div>

</body>

</html>

前端开发【第2篇：CSS】

 圆润度

除了像素，你还可以使用百分比来指定border-radius边框半径的值。当border-radius为50%的时候他就是一个圆形了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .main-container{

            position: fixed;

            left: 50%;

            top: 50%;

            height: 100px;

            width: 100px;

            background-color: chartreuse;

            border-radius: 10%;

        }

    </style>

</head>

<body>

    <div class="main-container">

    </div>

</body>

</html>

前端开发【第2篇：CSS】

上一篇：小白的springboot之路（十七）、阿里云OSS 的使用


下一篇：51nod 1005 大数加法