全栈架构师之路

Appearance

CSS 入门 ​

CSS简介 ​

CSS概述 ​

function

Cascading Style Sheets

层叠样式表

层叠： 使用不同的添加方式，给同一个 HTML 标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签

样式： 给 HTML 标签添加需要显示的效果。

CSS 通常称为 CSS 样式或层叠样式表，又称之为网页的美容师，主要用于设置 HTML 页面排版和字体

CSS快速入门 ​

案例 ​

  • 书写 div，要求设置：字体为黄色，字体大小 100px， 边框为 1px 实线 边框颜色为红色

代码 ​

html
<div style="color: yellow; font-size: 100px; border: 1px solid red;">
  我是div
</div>

小结 ​

  • 属性名和属性值之间通过:隔开
  • 多个样式之间通过;隔开
  • 普通样式
    • color:red
    • 样式名:样式值
  • 复合样式
    • border:1px solid red
    • 样式名:样式值 1 样式值 2 样式值 3

CSS引入方式 ​

内嵌样式 ​

  • 在 html 标签中使用 style 属性引入 css 样式
html
<h1 style="color:red; font-size:100px;">文字</h1>
  • 语法格式
html
<标签名称 style="属性名1：属性值1；属性名2：属性值2；......"></标签名称>

  • 练习

    书写 div

    字体为黄色

    字体大小 100px

    边框为 1px 实线 边框颜色为红色

  • 参考代码

html
<!-- 
书写div
字体为黄色
字体大小100px
边框为 1px  实线 边框颜色为红色 
-->
    <div style="color: yellow; font-size: 100px; border: 1px solid red;">
      我是div
    </div>

  • 优缺点：

    • 优点：书写方便 可读性强(直观的看到标签的样式是什么)

    • 缺点：没有复用性

内部样式【重点】 ​

  • 在 html 中的 head 标签中 使用<style>标签引入 css 样式

  • 语法格式

html
<head>
<style>
标签名称 {
  样式名1：样式值1；
  样式名2：样式值2；
}
</style>
</head>

  • 练习

    书写多个 div

    字体为红色

    字体大小为 100px

    背景色为黄色

    边框为 1px 实线 边框颜色为蓝色

  • 参考代码

html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                color: red;
                font-size: 100px;
                background: yellow;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
<!-- 
书写多个div
字体为红色
字体大小为100px
背景色为黄色
边框为 1px  实线 边框颜色为蓝色
 -->
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
    </body>
</html>

  • 优缺点

    • 优点：具有一定复用性 只能本 html 页面中可以使用样式

    • 缺点：可读性差

外部样式【重点】 ​

  • 将 css 样式封装成一个单独的 css 文件，在 html 中进行引入

  • 语法格式

html
<link rel="stylesheet" type="text/css" href="css文件路径" />

  • 练习

    书写多个 div 将 css 样式独立封装到 css 文件 字体为红色 字体大小为 100px 背景色为黄色 边框为 1px 实线 边框颜色为蓝色

  • 参考代码

html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <link rel="stylesheet" href="../css/1.css" />
  </head>
    <body>
<!-- 
书写多个html; 多个div
字体为红色
字体大小为100px
背景色为黄色
边框为 1px  实线 边框颜色为蓝色
 -->
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
    </body>
</html>
css
div{
    color: red;
    font-size: 10px;
    background-color: yellow;
    border: 1px solid blue;
}

  • 优缺点

    • 优点：复用性极高 可读性居中

    • 缺点：性能低 需要获得 css 文件的传输时间

优先级 ​

行内样式 > id 选择器 > 类选择器 > 标签选择器 > 通用选择器

小结 ​

CSS 引入方式

  • 内嵌样式

    html
    <标签名称 style="属性名1：属性值1；属性名2：属性值2；......"></标签名称>

  • 内部样式

    html
    <head>
<style type="text/css">
  标签名称｛
              样式名1：样式值1；
              样式名2：样式值2；
            ｝
</style>
</head>

  • 外部样式

    html
    <link rel="stylesheet" type="text/css" href="css文件路径" />

CSS选择器【重点】 ​

https://www.w3.org/TR/CSS21/selector.html

规则结构 ​

Rule-Structure

基本选择器 ​

元素选择器 ​

  • 语法格式

    css
    element{属性：属性值}

  • 练习

    html
    <!--
【需求】选中所有的div，给其添加以下样式
1.字体为黄色；
2.字号为100px；
3.边框  1px solid red;
-->
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
    css
    div{
  color: yellow;
  font-size: 100px;
  border: 1px solid red;
}

id选择器 ​

  • 语法格式

    css
    #id{属性：属性值}

  • 练习

    html
    <!--
【需求】选中第二个div，给其添加以下样式
1.字体为黄色；
2.字号为100px；
3.边框  1px solid red;
-->
<div>我是div1</div>
<div id="div2">我是div2</div>
<div >我是div3</div>
    css
    #div2{
  color: yellow;
  font-size: 100px;
  border: 1px solid red;
}

class选择器 ​

  • 语法格式

    css
    .class{
  属性：属性值
}

  • 练习

    html
    <!--
  【需求】选中第二个和第三个div，给其添加以下样式
    1.字体为黄色；
    2.字号为100px；
    3.边框  1px solid red;
-->
<div >我是div1</div>
<div class="myDiv">我是div2</div>
<div class="myDiv">我是div3</div>
    css
    .myDiv{
  color: yellow;
  font-size: 100px;
  border: 1px solid red;
}

属性过滤选择器 ​

选择具某个属性值的标签

  • 语法格式

    html
    <form>
  <input type="text"/><br/>
  <input type="password"><br/>
</form>
    css
    input[type="text"] {
    background-color: red;
}
input[type="password"] {
    background-color: pink;
}

组合选择器 ​

多元素选择器 ​

逗号选择浏览器，规则中包含两个不同的选择器

  • 语法格式

    html
    <div>我是div1</div>
<div>我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
    css
    div,span{
  color: yellow;
  font-size: 100px;
  border: 1px solid red;
}

后代选择器 ​

  • 语法格式

    html
    <div id="d1">
  <div class="s1">
    <span>我是span1</span>
  </div>
  <span>我是span2</span>
</div>
<div id="d2">
  <div class="s1">
    <span>我是span3</span> 
  </div>
  <span>我是span4</span> 
</div>
    css
    #d2 span{
  color:red
}

子代选择器 ​

  • 语法格式

    html
    <div id="d1">
  <div class="s1">
    <span>我是span1</span>
  </div>
  <span>我是span2</span>
</div>
<div id="d2">
  <div class="s1">
    <span>我是span3</span>
  </div>
  <span>我是span4</span> 
</div>
    css
    #d2>span{
  color:red
}

伪类选择器【了解】 ​

  • 语法格式

    css
    a:link {
  color:#333;
}
a:hover {
  color:red;
}
a:active {
  color:green;
}
a:visited {
  color: pink;
}

结构性伪类【扩展】 ​

*-child ​

  • first-child
  • last-child

selector-hierarchy-1

*-of-type ​

  • first-of-type
  • last-of-type

selector-hierarchy-2

nth-*-child ​

  • nth-child
  • nth-last-child

selector-hierarchy-3-1

selector-hierarchy-3-2

nth-*-of-type ​

  • nth-of-type
  • nth-last-of-type

selector-hierarchy-4-1

selector-hierarchy-4-2

CSS常用样式【熟悉】 ​

字体样式 ​

文字的字号、粗细和字体的样式(斜体)。

样式名作用说明
font-family设置文字的字体；font-family="宋体"设置的字体必须是系统中已经安装的
font-size设置文字的字号（大小）；font-size="100px"单位：像素
font-style设置文字的样式（斜体）；font-style="italic"
font-weight设置文字的粗细；font-weight="bold"

【练习】

html
<!--
文字样式
  font-szie:字号
  font-family:字体
  font-style:字体样式
  font-weight:文字粗细

【需求】设置span标签中文字的字体样式
  7号字
  楷体
  斜体
  加粗
-->

<span>早睡能解决80%的问题</span><br>
<a href="">点墨星河</a>
css
span {
  font-size: 100px;
  font-family: 楷体;
  font-style: italic;
  font-weight: bold;
}

文本样式 ​

文本的颜色，间距，缩进等样式。

样式名作用说明
color文本颜色color="red"或color="#FFF"
text-decoration文字修饰underline 下划线，overline 上划线，line-through 删除线
text-indent文本缩进单位：em，如：text-indent="2em"：缩进两个字符
text-align文本水平对齐方式text-align:left 左对齐，center 居中对齐，right 右对齐
word-spacing单词之间的间隔word-spacing: nomal 默认值, word-spacing: 10px 间隔10像素
line-height文本的行高line-height: normal 默认值, line-height: 30px 行高30像素
text-shadow设置阴影及模糊效果水平偏移; 垂直偏移; 模糊值; 阴影颜色;

【练习】

html
<!--
文本样式：
  text-align:水平对齐方式  左，中，右
  text-indent:首行缩进
  text-decoration:文本装饰  下划线，贯穿线...
  color:设置字体颜色

【需求】
  div文本居中
  div字体红色
  取消a标签文本的下划线
  给p标签中的内容，首行缩进2个字符
-->
<div>只有在中国，小龙虾才活的有尊严</div>

<a href="#">点墨星河</a>

<p>
只有在中国，小龙虾才活的有尊严。
只有在中国，小龙虾才活的有尊严。
只有在中国，小龙虾才活的有尊严。
只有在中国，小龙虾才活的有尊严。
只有在中国，小龙虾才活的有尊严。
只有在中国，小龙虾才活的有尊严。
只有在中国，小龙虾才活的有尊严。
只有在中国，小龙虾才活的有尊严。
只有在中国，小龙虾才活的有尊严
</p>
css
div {
    text-align: center;
    color: red;
}

a {
    text-decoration: none;
}

p {
    text-indent: 2em;
}

边框和背景 ​

边框相关 ​

样式名作用使用示例常用取值
border设置对象边框的样式border:border-width border-style(required) border-colorborder-width:定义边框的宽度；border-style:设置边框的4个边的样式，如：实线，虚线；border-color:设置边框的颜色；
height设置标签的高度height:100pxlength：px，cm；%：百分比高度；
width设置标签的宽度width:100pxlength：px，cm；%：百分比高度；

背景相关 ​

背景样式属性作用&取值
background-color设置对象的背景颜色：colorname,rgb
background-image设置对象的背景图片：url(图片的路径)
background-repeat设置背景的平铺方式：no-repeat:不平铺，repeat-x:横向平铺，repeat-y:纵向平铺；（注：图片默认是平铺满整个盒子）
background-positiontop上对齐; bottom下对齐; left左对齐; right右对齐; center居中对齐
background-size- 默认平铺;
- cover 图片保持比例放大或缩小使X轴与Y轴都铺满整个容器，但图片超出容器部分会被裁剪掉，图片不变形。
- contain 图片保持比例放大或缩小填充容器，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。

练习 ​

  1. 给页面某个 div 设置：宽度 200 像素，高度 200 像素，1 像素实线黑色的框 ；

  2. 给 div 设置背景色 lightgreen，背景图片，观察不同的图片平铺方式；

代码示例

html
<!--
【需求一】将div设置如下样式
  1. 宽度300px；
  2. 高度300px；
  3. 边框：1px 实线 红色；

【需求二】给div设置背景图片，并演示以下平铺方式
  1. 默认平铺方式；
  2. 水平方向平铺；
  3. 垂直方向平铺；
  4. 不平铺；
-->

<div>
  早睡能解决80%以上的问题
</div>
css
div{
  width: 300px;
  height: 300px;
  border: 1px solid red;
  background-color: yellow;
  background-image: url("../img/reg.png");
  /*background-repeat: repeat-x;*/
  /*background-repeat: repeat-y;*/
  background-repeat: no-repeat;
}

行和块之间的转换 ​

HTML 提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内（内联）标签。

display属性取值 ​

值描述
inline此元素将显示为行内元素（行内元素默认的display属性值）
block此元素将显为块元素（块元素默认的display属性值）
none此元素将被隐藏，不显示，也不占用页面空间

练习 ​

需求

  1. 将 div 转换成行内元素；
  2. 将 span 转换成行级元素；
  3. 将 id 为 div3 的 div 隐藏；

代码示例

html
<!--
【需求】
  1. 将div转换成行内元素；
  2. 将span转换成行级元素；
  3. 将id为div3的div隐藏；
-->

<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
<hr/>
<span id="span1">我是span1</span>
<span id="span2">我是span2</span>
css
#div1 {
  background-color: red;
}

#div2 {
  background-color: green;
}

#div3 {
  background-color: yellow;
}

div {
  width:100px;
  height:100px;
}

#span1 {
  background-color: green;
}

#span2 {
  background-color: red;
}

div {
  display: inline;
}

span {
  display: block;
}

#div3{
  display: none;
}

盒子模型 ​

盒子模型概述 ​

任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、边界(margin)， 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

  • 内容（content）就是盒子里装的东西；
  • 内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
  • 边框(border)就是盒子本身了；
  • 外边界(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

1529773462396

相关属性 ​

盒子模型相关的属性：border 边框，padding 内边距；margin 外边距；

属性作用
border边框属性
padding内边距
margin外边距
outline轮廓
box-sizingcontent-box(默认) / border-box

border 边框属性 ​

属性边框样式取值
border-style边框线型solid：定义实线；
dashed：定义虚线；
double：定义双线
border-width边框宽度length：允许自定义边框宽度
border-color边框颜色颜色名，十六进制颜色值
border-radius边框圆角指定圆角的半径
border简写线型 宽度 颜色

padding 内边距 ​

内边距四边距离定义：

属性含义
padding-top:10px;上内边距
padding-left:10px;左内边距
padding-bottom: 10px;下内边距
padding-right:10px;右内边距

box-sizing 宽高计算方式 ​

属性含义
content-box默认值，元素的宽度和高度只包括内容区域，不包括边框（border）、内边距（padding）和外边距（margin）
border-box元素的宽度和高度包括内容区域、边框和内边距，但不包括外边距。也就是说，元素的边框和内边距会挤压内容区域的大小

margin 外边距 ​

属性含义
margin-top:10px;上外边距
margin-left:10px;左外边距
margin-bottom: 10px;下外边距
margin-right:10px;右外边距

outline 轮廓线 ​

属性含义
outline-color轮廓线颜色
outline-style轮廓线型
outline-width轮廓线宽度
outline设置color style width

简写方式 ​

外边距的写法含义
margin:10px四边相同
margin:10px 20px;上下 左右
margin:10px 20px 30px;上 左右 下
margin:10px 20px 30px 40px;上 右 下 左

块级元素 - 水平居中 ​

css
margin:auto;

案例 ​

  • 盒子模型 & 注册表单

1534058479195

需求分析 ​

需求：使用盒子模型修改注册页面
  1、给body添加背景图片 regist_bg.jpg
  2、设置一个div包裹form表单，设置div宽度500px、高度400px，背景为白色，边框实线 5px 颜色：#ccc
  3、设置外边距上下100px，左右auto
  4、通过设置内边距使表单在div中间

代码实现 ​

html
<!--
    需求：使用盒子模型修改注册页面
        1、给body添加背景图片 regist_bg.jpg
        2、设置一个div包裹form表单，设置div宽度500px、高度400px，背景为白色，边框实线 5px 颜色：#ccc
        3、设置外边距上下100px，左右auto
        4、通过设置内边距使表单在div中间
-->

<div id="formDiv">
  <form action="#" method="get">
    <table>
      <tr>
        <td align="right">用户名：</td>
        <td align="left"><input type="text" name="username"></td>
      </tr>
      <tr>
        <td align="right">密 码：</td>
        <td align="left"><input type="password" name="password"></td>
      </tr>
      <tr>
        <td align="right">确认密码：</td>
        <td align="left"><input type="password" name="repassword"></td>
      </tr>
      <tr>
        <td align="right">性 别：</td>
        <td align="left">
          <input type="radio" name="sex" value="男">男
          <input type="radio" name="sex" value="女">女
        </td>
        </tr>
        <tr>
          <td align="right">头 像：</td>
          <td align="left"><input type="file" name="upload"></td>
        </tr>
        <tr>
           <td align="right">爱 好：</td>
             <td align="left">
               <input type="checkbox" name="hobby" value="编程"/>编程
               <input type="checkbox" name="hobby" value="把妹"/>把妹
               <input type="checkbox" name="hobby" value="装逼"/>装逼
             </td>
        </tr>
        <tr>
          <td align="right">所在城市：</td>
          <td align="left">
            <select name="city">
              <option>上海</option>
              <option>广州</option>
              <option>北京</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">自我描述：</td>
          <td align="left">
            <textarea re rows="3" cols="15" name="desc" ></textarea>
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td align="left">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
          </td>
        </tr>
      </table>
    </form>
  </div>
css
            body{
                background-image: url("../img/regist_bg.jpg");
            }

            #formDiv {
                width: 500px;
                height: 400px;
                background-color: white;
                border: 5px solid #cccccc;
                margin: auto;
                margin-top: 50px;
                padding-left: 174px;
                padding-top: 100px;
            }

补充 ​

列表属性 ​

list-style-type: disc 等 list-style-image: url("图片地址") list-style-position: inside; outside;

扩展属性 ​

圆角 ​

border-radius

阴影 ​

box-shadow

背影图片尺寸 ​

background-size

文本阴影 ​

tetxt-shadow

学习目标总结 ​

  • 能够使用 CSS 的基本选择器选择元素
  • 能够使用 CSS 的扩展选择器选择元素
  • 能够使用常见的 CSS 属性
  • 能够说出盒子模型的属性