第四篇 web前端 vue - 第2章 CSS - 《村刀学院java全栈从入门到入职》

一、引言
- 1.1CSS概念
二、 CSS简介
三、 CSS导入方式
四、 CSS选择器
五、 CSS属性
六、 CSS盒子模型

一、引言

1.1CSS概念

     层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、 CSS简介

2.1 什么是CSS

CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素
多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的
应用优先级高的，不冲突的共同作用

2.2 CSS能干什么

修饰美化html网页。
外部样式表可以提高代码复用性从而提高工作效率。
html内容与样式表现分离，便于后期维护。

2.3 CSS书写规范

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

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。

2.4 基础语法

选择器｛属性：值;属性:值….. ｝

注意事项：

请使用花括号来包围声明
如果值为若干单词，则要给值加引号
多个声明之间使用分号;分开
css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

三、 CSS导入方式

3.1 内嵌方式(内联方式)

把CSS样式嵌入到html标签当中，类似属性的用法

 <div style="color:blue;font-size:50px">This is my HTML page. </div>

3.2 内部方式

在head标签中使用style标签引入css

<style type=“text/css”> //告诉浏览器使用css解析器去解析
    div{color:red;font-size:50px}
</style>

3.4 @import方式

在页面中引入一个独立的单独文件

  <style type="text/css">
       @import url("div.css")
  </style>
 该内容放在head标签中

link和@import方式的区别：

link所有浏览器都支持，@import某些版本低的IE不支持
@import是等待html加载完成才加载
@import不支持js动态修改

四、 CSS选择器

主要用于选择需要添加样式的html元素

4.1 基本选择器

元素选择器：在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值}

<style type="text/css">
    span{color: red;font-size: 100px}
</style>

id选择器：给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}

创建id选择器：
    <div id="s1">hello,everyone!</div>
    <div id="s2">hello,everyone!</div>
    <div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰 
    <style type="text/css">
        #s1{color: red;font-size: 100px}
        #s2{color: green;font-size: 100px}
        #s3{color: blue;font-size: 100px}
    </style>

class选择器：给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}

创建class选择器：
    <div class="s1">hello,everyone!</div>
    <div class="s2">hello,everyone!</div>
    <div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰：
    <style type="text/css">
        .s1{color: purple;font-size: 100px}
        .s2{color: pink;font-size: 100px}
        .s3{color: yellow;font-size: 100px}
    </style>

备注：以上基本选择器的优先级从高到低：id选择器，class选择器，元素选择器

4.2 属性选择器

根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明
格式为：
htm标签[属性=‘属性值’]{css属性:css属性值;}
html标签[属性]{css属性:css属性值;}

body内容：
    <form name="login" action="#" method="get">
        <font size="3">用户名：</font>
        <input type="text" name="username" value="zhangsan"><br>
        <font size="3">密码：</font>
        <input type="password" name="password" value="123456"><br/>
        <input type="submit" value="登录">
    </form>
head中书写：
    <style type="text/css">
        input[type='text'] {
            background-color: pink;
        }
        input[type='password'] {
            background-color: yellow;
        }
        font[size] {
            color: green
        }
        a[href] {
            color: blue;
        }
    </style>

4.3 伪元素选择器

主要是针对a标签
语法：
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}

代码：
    <a href="https://hao.360.cn/">点我吧</a>
样式：
    <style type="text/css">
        <!--静止状态 -->
        a:link {color: red;}
        <!--悬浮状态 -->’
        a:hover {color: green;}
        <!--触发状态 -->
        a:active {color: yellow;}
        <!--完成状态 -->
        a:visited {color: blue;}
    </style>

4.4 层级选择器

父级选择器子级选择器….，具体示例如下：

 <div id="div1">
     <div class="div11">
         <span>span1-1</span>
     </div>
     <div class="div12">
         <span>span1-2</span>
     </div>
</div>
<div class="div2">
    <div id="div22">
        <span>span2-1</span>
    </div>
    <div id="div23">
        <span>span2-2</span>
    </div>
</div>

<style type="text/css">
    #div1 .div11{color:red;}
    #div1 .div12{color:purple;}
    .div2 #div22{color:green;}
    .div2 #div23{color:blue;}
</style>

后代选择器：筛选选择器1元素下的所有选择器2元素
语法：选择器1 选择器2{}
子元素选择器：筛选选择器1的元素下的子选择器2
语法：选择器1 > 选择器2{}注意：

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器
子选择器：即大于符号(>),用于选择指定标签元素的第一代子元素。
包含选择器：即加入空格,用于选择指定标签元素下的后辈元素该选择器，是对“元素选择器”的扩展，对一个标签内部所有后代标签进行过滤。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。（对所有后代都起作用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子选择器</title>
    <style>
       /* div span{
            color:red;
        }*/

        div>span{
            color:blue;
        }
    </style>
</head>
<body>


<!--如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器

子选择器：即大于符号(>),用于选择指定标签元素的第一代子元素。

包含选择器：即加入空格,用于选择指定标签元素下的后辈元素
                     该选择器，是对“元素选择器”的扩展，对一个标签内部所有后代标签进行过滤。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。（对所有后代都起作用）-->

<div>
    <span>这是div下的span标签</span>
    <span>这是div下的span标签2</span>

    <p>
        <span>这是p标签下的span标签</span>
        <span>这是p标签下的span标签2</span>
    </p>


</div>

</body>
</html>

五、 CSS属性

5.1 文字属性

| 属性名

| 取值

| 描述

| | —- | —- | —- | | font-size

| 数值

| 设置字体大小

| | font-family

| 默体、宋体、楷体等

| 设置字体样式

| | font-style

| normal正常; italic斜体;

| 设置斜体样式

| | font-weight

| 100~900数值;bold;bolder;

| 粗体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文本属性</title>
    <style>
        p{
            font-size: 20px;
            color:red;
            font-style:normal;
            font-family: "Microsoft YaHei";
            letter-spacing:5px;
            line-height: 30px;
            text-indent: 100px;
        }
        #pContent{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p>
    CSS中设置的字体
    考虑到兼容性，我们总会在CSS中队字体进行一些设置，这类设置往往设置在body标签上，
    无论是人人网，腾讯网，淘宝网，开心，新浪，网易等都是如此。以下为各个大型网站的body的字体设置：
</p>

<span id="pContent">这一行文字有下划线</span>


</body>
</html>

5.2 文本属性

属性名	取值	描述
color	十六进制;表示颜色的英文单词;	设置文本颜色
text-indent	5px缩进5像素;20%缩进父容器宽度的百分之二十;	缩进元素中文本的首行
text-decoration	none;underline;overline;blink;	文本的装饰线
text-align	left;right;center	文本水平对齐方式
word-spacing	normal;固定值;	单词之间的间隔
line-height	normal;固定值;	设置文本的行高
text-shadow	四个取值依次是：水平偏移；垂直偏移；模糊值；阴影颜色；	设置阴影及模糊效果

5.3 背景属性

属性名	取值	描述
background-color	16进制;用于表示颜色的英语单词;	设置背景色
background-image	url(‘图片路径’)	设置背景图片
background-repeat	repeat-y;repeat-x;repeat;no-repeat;	设置背景图的平铺方向
background-position	top;bottom;left;right ; center;	改变图像在背景中的位置

注意：
background-position:属性设置背景图像的起始位置。
(第一个值是水平位置，第二个值是垂直位置。
如果您仅规定了一个关键词，那么第二个值将是”center”。)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        div{
            width:800px;
            height:400px;
            border:1px solid red;
            background-image: url("img/small.jpeg");
            background-repeat: repeat-x;
            background-position: top left;
        }
    </style>
</head>
<body>

<div id="backgroundDiv">

  </div>
</body>
</html>

5.4 列表属性

属性名	取值	描述
list-style-type	disc等	改变列表的标识类型
list-style-image	url(“图片地址”)	用图像表示标识
list-style-position	inside;outside	标识出现在列表项内容之外还是内部

5.5 尺寸属性

width:设置元素的宽度
height:设置元素的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        #borderDiv{
            width: 400px;
            height: 400px;
            border: blue double 10px;
        }
    </style>
</head>
<body>

<div id="borderDiv">

</div>
</body>
</html>

5.6 显示属性

显示属性display ，以下是常用取值：

none:不显示
block:块级显示
inline:行级显示

5.7 轮廓属性

绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。常用属性：

属性名	取值	描述
outline-style	solid(实线)/dotted(虚线)/dashed(虚线)等	设置轮廓的样式
outline-color	16进制;用于表示颜色的英文	设置轮廓的颜色
outline-width	数值	设置轮廓的宽度

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;outline-offset:10}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h1>outline-style 属性</h1>

<p class="dotted">点状轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓。效果取决于 outline-color 值。</p>
<p class="ridge">凸脊轮廓。效果取决于 outline-color 值。</p>
<p class="inset">凹边轮廓。效果取决于 outline-color 值。</p>
<p class="outset">凸边轮廓。效果取决于 outline-color 值。</p>

</body>
</html>

5.8 浮动属性float
●浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。
●副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。
●解决办法：添加空盒子在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div .clear{clear:both;}


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #one{
            border: solid red 2px;
            height: 100px;
            width: 100px;
            float:left;
        }
        #two{
            border: solid blue 2px;
            height: 100px;
            width: 100px;
            float: left;
        }
        #parent{
            border: solid green 2px;
            /*height: 100px;*/
        }
       /* #three{
            clear:both;
        }*/
    </style>
</head>
<body>
<div id="parent">
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three"></div>
</div>
</body>

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

clear 属性：规定元素的哪一侧不允许其他浮动元素。它的取值如下：

取值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  border: 1px solid red;
}

.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>

<h1>不使用 clear</h1>
<div class="div1">div1</div>
<div class="div2">div2 - 请注意，在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。</div>
<br><br>

<h1>使用 clear</h1>
<div class="div3">div3</div>
<div class="div4">div4 - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。</div>

</body>
</html>

5.9 定位属性

相对定位(relative)：元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。

示例1:

<head>
    <style type="text/css">
        h2.pos_left {
            position: relative;
            left: -20px
        }
        h2.pos_right {
            position: relative;
            left: 20px
        }
    </style>
</head>
<body>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
    <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
    <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

示例2：


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #one{
            width:200px;
            height:200px;
            border: solid red 3px;
        }
        #two{
            width:200px;
            height:200px;
            border: solid green 3px;
            /*相对定位*/
            position: relative;
            top:50px;
            left: 50px;
        }
        #three{
            width:200px;
            height:200px;
            border: solid blue 3px;
        }
    </style>
</head>
<body>
<div id="one">第一个盒子</div>
<div id="two">第二个盒子</div>
<div id="three">第三个盒子</div>
</body>

绝对定位(absolute)：元素框从文档流完全删除，并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框。

示例1：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #one{
            width:400px;
            height:400px;
            border: solid red 3px;
        }
        #two{
            width:400px;
            height:400px;
            border: solid green 3px;
            /*绝对定位*/
            position: absolute;
            top:50px;
            left:50px;
        }
        #three{
            width:400px;
            height:400px;
            border: solid blue 3px;
        }
        #parent{
            position: relative;
            border: solid black 3px;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three">第三个盒子</div>
</div>
</body>